Do you acquire some traffic through Meta Ads campaigns (e.g., Facebook Ads)? Setting up a tracking pixel to monitor your performance and user behavior on your site is essential. However, since April 2021 and the iOS changes, this type of tracking has been less effective. It must be combined with a new advertising tracking technology: the Facebook Conversion API (or CAPI).
This article guides you through implementing the Facebook Pixel and Facebook CAPI via Google Tag Manager, including visitor consent.
Install the Facebook Pixel
To install the Facebook Pixel, we will use the most popular Tag Management System on the market: Google Tag Manager. Why choose it over hard coding or a dedicated plugin? Because GTM simplifies tag deployment while adding transparency to the tracking in place.
In Google Tag Manager, go to Templates and import the template from the gallery: Facebook Pixel.
A. Installing a page view tracking tag
Create your first-page view tag. This tag will report the people visiting your site to Facebook without any specific event constraint. With this tag, you can create retargeting audiences based on visitors and lookalike audiences.
As you can see, a {{Event ID}} variable has been added in the dedicated section in the More Settings dropdown. This numerical sequence is used in anticipation of configuring the Conversion API to avoid counting events twice. We will discuss its functioning in the article later, but in the meantime, you can add it by importing a new variable template.
Let’s go back to our tag and add a trigger to it.
If you are using Axeptio as a Consent Management Platform, you can trigger this event on the “Custom Event” trigger and fill in “axeptio_activate_facebook_pixel” as a field:
B. Install a purchase tracking tag
Are you an e-commerce company? Then nothing is more important than measuring the volume and value of purchases generated through your campaigns.
Setting up this event will also allow the algorithm to optimize its performance better and create new similar audiences to reach potential customers.
Create a new tag and select the standard “Purchase” event. At this point, you would be measuring purchase volume by triggering your tag at the time of purchase. You must map additional information to establish your ROAS (return on advertising investment).
Facebook defines the mandatory parameters for each event in its official documentation.
For the purchase event, we will therefore report the following fields in the Property Name section:
- Currency: the currency.
- Value: the total amount of the purchase.
- content_type: the product type, which can be set as either product or product_group.
- Contents: the product information (corresponding to the items array in the standard terminology).
In the Property Value section, you must indicate the corresponding dataLayer variables for these parameters.
Then, we need to configure the tag trigger when a purchase occurs AND when the user consents.
If your site has an e-commerce data layer in the GA4 model, you can use the custom “purchase” event.
We then add an exception that will block the tag if the user has not consented to the Facebook cookie is dropped.
In the custom event field, we will enter the regular expression “.*,” which means all events. We add the “axeptio_authorized_vendors” cookie variable as a condition, which must not contain “facebook_pixel.”
The tag will only trigger when the purchase event occurs if the user’s cookie choice contains facebook_pixel.
Installing the Facebook Conversion API
Now that our Pixel is created, we want to set up the Facebook Conversion API. This tracking method differs from the Facebook Pixel in its functioning. While the Pixel is a JS script that runs in the user’s browser, the CAPI is set up server-side.
These two ways of tracking Meta conversions can be used independently or together. Add a deduplication key if you want to combine them (which Meta recommends). Remember the Event ID? That’s precisely its role and why we added it to our tags.
To set up as presented below, you must have set up Google Tag Manager Server-Side and provisioned a tracking server.
Google Tag Manager Server-Side communicates with your classic Google Tag Manager, also known as Client-Side (browser-side). Some tags can be shared with your tracking server, which is the case with Google Analytics 4.
We will detail the method using this browser-side tag and its client-side server to receive the request.
Note that we have written an article that outlines the step-by-step process for server-side proxyfication of Google Analytics, making it compliant with CNIL regulations.
A. Creating the Google Analytics 4 Configuration Tag
First, you need to create a GA4 configuration tag. As explained, this tag will communicate with your tracking server. To do this, check “Send to Server Container” and enter the URL of your server.
You’ll notice that the box “Send a ‘Page View’ event when this configuration loads” must be unchecked. This is once again related to the Event ID variable, and we’ll return to it in the next section.
In parallel, if you want to use Google Analytics 4, set up an event tag and name it “page_view.”
To transfer the consent cookie value to the server, we add a parameter x-vendor-consent.
Then trigger this tag on all pages.
B. Creation of the GA4 tag for page views for CAPI
Let’s now create a second page_view event tag specifically for CAPI. You may be wondering why? This is the time to explain the functioning of the Event ID.
As previously mentioned, the Event ID is used to deduplicate two identical events sent by the Pixel and, on the other hand, by the CAPI. The Event ID is a random number associated with a temporality indicator when the tag is triggered. This Event ID, therefore, changes with each started tag to be unique. To properly deduplicate events, it is, therefore, necessary for both the Pixel and the server-side tag to be triggered at the same time!
During the configuration of the PageView event of Facebook via the Pixel, we defined the triggering of the tag on axeptio_activate_facebook_pixel. Therefore, the server-side tag must also be triggered at this occurrence. This is not true for the Google Analytics 4 Configuration tag and the page_view event tag dedicated to GA4. This is why we will only create a specific page view tag for CAPI.
In addition to the event_id and consent storing parameters, we add a new field: x-fb-page_view with an actual value.
C. Creating the GA4 purchase tag
In parallel, we create our tag that triggers each purchase made. The event name must be “purchase,” and you must add the fields x-vendor-consent and event_id.
This tag can capture various e-commerce variables (if the dataLayer is structured in a standard way). To do this, check “Send e-commerce data” in More Settings → E-Commerce.
Now that the configuration is complete on your GTM Client-Side, you only have to publish your container.
D. Creating the CAPI Tag
With the browser-side configuration completed, you can switch to your Google Tag Manager Server-Side container.
First, go to the Template section and import the “Facebook Conversion API” tag teStape-designed by stape-io.
Next, create a tag from this template and choose the “Inherit from the client” option. This tag retrieves the information sent to the GA4 client by the GA4 tag in your GTM Client-Side. You do not need to redefine the event name, event_id, or e-commerce parameters.
You must enter your CAPI token provided by Facebook, then your Facebook Pixel.
For the Test Event Code, I recommend adding it to a Conversion Table so that only your debugging actions are taken into account in the Test section of the Meta Business Manager.
So, set your Test Event Code only on debug mode and actual, and check an empty default value.
The tag is configured; let’s take care of its trigger. We will associate two triggers, one for the page_view event and another for the purchase event.
The first tag is for the page_view event. We add the following conditions:
- Client Name = GA4
- Query String contains x-fb-page_view=true. This means that the request includes this parameter.
- Event Name = page_view
- Event Data – x-vendor-consent contains facebook_pixel. For this point, I invite you to refer to the dedicated article on consent management on the server side.
For the purchase tag, you will add the following elements:
Client Name = GA4 Event Name = purchase. If you have multiple events, you can use a regular expression. Event Data – x-vendor-consent contains facebook_pixel.
E. Exclude CAPI-specific events for other tags
The Pixel and Conversion API are now set up. Before testing our configuration in Facebook’s dedicated tool, we have one more action to perform in Google Tag Manager Server-Side.
If you were to publish your container, every page view would be counted twice in Google Analytics 4 (or any other endpoint based on GA4 tags/requests).
That’s why we have to create a specific trigger for “Page View” events by adding the condition Query String does not contain x-fb-page_view=true.
F. Testing your configuration
Last but not least: testing your new configuration!
To do this, go to the associated section of the Meta Business Manager account WHILE putting your Google Tag Manager Server-Side container in preview mode (do you remember the Test Event Code that only triggers in this mode? :)).
Visit a page and make a purchase; if the events are deduplicated, as shown below, your settings are working!
Conclusion
Facebook encourages advertisers to track their websites to optimize their campaigns. Following the steps detailed in this article, you can optimize your tracking while respecting user consent. If you want assistance implementing your GDPR-compliant server-side tracking, do not hesitate to contact the Axeptio teams.
