Meta¶

This guide provides a step-by-step approach to setting up Meta Pixel and the Meta Conversions API (CAPI) using Google Tag Manager (GTM) and a server-side container. This "parallel tracking" method is the most robust way to ensure accurate and resilient data collection for your Meta advertising campaigns.

Prerequisites¶

Before you begin, ensure you have the following:

• Meta Business Suite: Access to the Meta Business account, including the Events Manager for your specific Pixel. This will also be useful for testing events.

• Pixel ID and Access Token for the Conversions API events, which can be obtained in Events Manager. Learn how to get the Pixel ID and the token in their documentation.

• Web Google Tag Manager (GTM): Access to a web GTM container that is already implemented on your website and sends GA4 events to the server-side GTM. Learn how to share access to a GTM container.

• Server-side GTM Container: A server-side GTM container provisioned by  Usercentrics, available via a first-party endpoint, and configured to process GA4 events.  Learn how to set up a server-side GTM provided by Usercentrics in our Get started guide and learn how to share access to a GTM container here.

Benefits of Server-Side Tagging for Meta¶

• Improved Data Accuracy: Server-side tagging bypasses ad blockers and browser privacy restrictions (like Safari’s ITP or Firefox’s ETP), resulting in more reliable and complete conversion data.

• Enhanced Data Control: You decide exactly what data to share with Meta, allowing you to enrich or anonymize information to comply with privacy regulations (GDPR/CCPA). Shifting tagging from the browser to the server may also reduce the load on the JavaScript thread in the browser, improving site speed and Web Vitals, which can positively impact SEO.

• Longer Attribution Windows: By setting first-party cookies from your own domain, you extend their lifespan in browsers like Safari, leading to better long-term attribution.

Rollout plan¶

The implementation follows a "parallel tracking" model. This means you will send events from both the user's browser (via Meta Pixel) and your server (via Conversions API). Meta will then use a unique Event ID to deduplicate these events, ensuring that a single user action is only counted once.

Step 1: Implementation of parallel tracking¶

Part A: Web GTM (client-side) configuration¶

The goal here is to configure your website's GTM container to send data to your server-side GTM container and to fire the standard Meta Pixel for browser-side tracking.

1. Create a Unique Event ID Variable.

   For deduplication to work, every event must have a unique ID that is identical for both the browser and server event.

   1. In your Web GTM container, go to Variables - New.

   2. Choose Custom JavaScript Variable and paste the following code:

      ```
      function() {
        var timestamp = new Date().getTime();
        var randomNumber = Math.random().toString(36).substring(2);
        return 'evt_' + timestamp + '_' + randomNumber;
      }
      ```
      

   3. Name this variable CJS - Unique Event ID.

2. Add Event ID to GA4 Event Tags.
   Add a parameter event_id and insert the {{CJS - Unique Event ID}} variable as a value on each GA4 event.

3. Set up the Meta Pixel Tag.

   1. In your Web GTM container, go to Tags - New.

   2. Click Tag Configuration and find the Facebook Pixel tag template by facebookarchive in the Community Template Gallery.

   3. Enter your Meta Pixel ID. It's best practice to store this in a Constant variable.

   4. For the PageView event (and other standard or custom events), expand the More Settings section and insert the {{CJS - Unique Event ID}} variable in the Event ID field.

   5. Set the trigger to All Pages for the base PageView tag. For other events (e.g., add_to_cart, purchase), use the appropriate triggers.

Part B: Server-side GTM Configuration¶

Now, we will configure the server container to receive the data from the web container and forward it to Meta's Conversions API.

1. Set up the Meta Conversions API Tag:

   1. In Google Tag Manager, under Templates,  click Search Gallery. Search for "Usercentrics" and select the Meta Conversion API Tag by Usercentrics template.
      Click Add to workspace and confirm the addition again with Add. You can learn more about this tag in our documentation page.

   2. Go to Tags - New. Click Tag Configuration, and select the template you added.

   3. Configure the following:

      1. Pixel ID: Enter the same Meta Pixel ID you used in the web container.

      2. API Access Token: In your Meta Events Manager, go to Settings and generate an Access Token under the Conversions API section. Store this securely in your server-side GTM as a variable.

      3. Action Source: Set this to Website.

      4. You can choose the option to Extend Meta Pixel cookies. This means that Facebook’s cookies will be set by a server which improves their longevity.

   4. If your web GTM container uses the standard ecommerce naming convention to send GA4 events, the tag template will automatically transform them into the equivalent Meta standard events.

2. Configure Triggering:

   1. Trigger: Set the trigger to fire on all events from your GA4 client. Create a new trigger of type Custom and set it to fire when Client Name equals the name of your GA4 client.

   2. Keep in mind to validate the consent. Here are our guidelines on consent.

You can explore an idea of allowlisting specific incoming events, which can be standard and custom. This way, you will minimize the risk of polluting the analytics with unwanted events and reduce the amount of data that you share with third-party vendors.

Step 2: Quality assurance¶

Testing is critical. Use server-side GTM's Preview mode and Meta's Test Events tool simultaneously.

Part A: Validation and debugging¶

Debugging your own requests before roll-out¶

Before you publish anything, make sure that your browser-based and server-based events work as expected. You can do that by following the steps below:

1. Open Preview Mode: Start Preview mode in both your Web and server-side GTM containers.

2. Open Meta's Test Tool: In your Meta Events Manager, go to the Test Events tab.

3. Generate Traffic: Open your website from the GTM Preview tab. Navigate around and trigger the events you've set up.

4. Verify in Web GTM: In the Web GTM Preview, you should see your Meta Pixel tags firing. Click on a tag and inspect the Event ID being sent.

5. Verify in server-side GTM:

   • In the server-side GTM Preview, you should see incoming requests from your GA4 client.
   • Click on the Facebook Conversions API tag that fired. Inspect the Event ID in the outgoing request to Meta. It must match the Event ID from the Web GTM tag.

6. Verify in Meta Events Manager:

   • In the Test Events tab, you should see events arriving.
   • Crucially, make sure that for any given event name (“PageView” in the screenshot below), there’s one event from the server and one from the browser. Both events need to have the same Event id for the deduplication to work. If you want to learn more about the details of how Meta deduplicated browser/server events, read their documentation about it.

Quality assurance after roll-out¶

Once your setup is live, you should do more high-level checks to make sure all events work as expected. To do that, you can go to the Meta Events Manager of your pixel ID. In the overview section, you will see all the different events that the pixel has registered from both the server and the browser.

For each event, make sure that the data coming from the browser and the server are similar. Server-based events should outperform the browser-based events. If everything works as expected, you’ll see a screen similar to the one below that shows you the conversion uplift that your server-side setup causes.

If there are issues, click View details to inspect different events. There, Meta will present additional info about what information is missing from your server events.

Part B: Expected challenges & solutions¶

Challenge: Events are not being deduplicated¶

Solution: The most likely cause is a mismatch in the event_id. Use the Preview modes in both containers to verify that the exact same event_id is being sent with both the browser and server events for a single action. Also, ensure the event names are identical (e.g., add_to_cart in the browser and add_to_cart on the server).

Challenge: Low Event Match Quality (EMQ) score¶

Solution: The EMQ score depends on how well Meta can match the event to a user profile. To improve it, send more user parameters. The most valuable are hashed email (em), phone number (ph), first name (fn), last name (ln), and the fbp (Facebook browser ID) and fbc (Facebook click ID) cookies. Ensure your server-side GTM tag is configured to capture and forward these parameters.

Challenge: Server events are not showing up in Meta¶

Solution: Use the server-side GTM Preview mode. Check the Tags tab to see if the CAPI tag fired. If it failed, check the Response tab in the Outgoing HTTP Requests section. This will often contain an error message from Meta explaining why the event was rejected.

Step 3: Final optimizations (optional but recommended)¶

• Improve Event Match Quality: Systematically go through your data layer and user information available on the site. Work with your developers to expose more non-PII and PII (to be hashed) data points that you can send via the Conversions API. The more high-quality data you provide, the better your ad targeting and attribution will be.

• Block Redundant Browser-Side Beacons: Once you are confident in your server-side setup, you can consider blocking certain Meta Pixel tags from firing in the browser for specific users or situations (e.g., for logged-in users where you have rich server-side data) to further improve site performance. This is an advanced step and should be approached with caution.