Understanding Facebook CAPI Integration with Google Analytics 4 Using Server-Side Google Tag Manager

One of the most sought-out solutions happens to be how to use Facebook Conversions API with the server-side implementation in Google Analytics 4 (GA4). To do this, we’ll be making use of Facebook’s own generic server-side template in Google Tag Manager (GTM) for GA4.  

You do not need a dedicated Facebook browser SDK or a Facebook client because the template itself utilizes the event data object that resides within the GA4 client.  

Before setting up Facebook CAPI, make sure the following prerequisites are met:

1. The base pageview and event tags for GA4 have been implemented in a client-side container with reference to the GA4 Server Side property.
   • This can be done by creating a GA4 Configuration tag that has the “Send to server container” checkbox checked and setting it to the GA4 pageview as well as corresponding GA4 event tags. 
     • Make sure that the server container URL specified under the checkbox matches the URL specified in the server-side container.
2. The server-side GTM container has a valid container URL specified.
3. The tagging server has been set and verified.

To integrate Facebook CAPI (Conversions API) with GTM, follow these steps:

1. Set up a Facebook Business Manager account.
   • To use Facebook CAPI, you’ll need to set up a Facebook Business Manager account if you haven’t already. You’ll also need to create a Facebook App and add it to your Business Manager account.
2. Create a Facebook CAPI event.
   • In your Facebook App, navigate to the Conversions API tab and create a new event. 
   • You’ll need to give the event a name, and select the parameters that you want to track, as well as specify conditions in which the event fires.
   • Go to the non-server-side GTM container and update the corresponding GA4 event tag to add an event_id parameter.  
     • If the event is not a purchase event, you will need to set the event_id parameter to be equal to a custom javascript variable that generates and returns a random number.
     • Example:
     • return Math.floor(Math.random() * 100000).toString() ? Math.floor(Math.random() * 100000).toString() : “”;
     • This will ensure that once the event is sent, Facebook CAPI will receive and be able to account for the conversion accordingly without tracking duplicate events.

After configuring Facebook, the next part of this task will involve working within GTM to set up the Facebook CAPI tag.

• Add the Facebook CAPI server-side custom tag template in GTM.
  • Click on “Templates”, then under Tag Templates, click on “Search Gallery”.
  • Look for “Facebook Conversion API” by stape-io.
  • Click on it, then click “Add to Workspace”.
  • Read through the notes in the pop-up window, then click “Add”.
• After adding the Facebook CAPI server-side template, there are two methods of setup.
  • Custom – The user can designate specifically what Facebook events they want to send to the server.
    • Recommended for specific implementations where not all GA4 server-side events are a direct match to what is needed for Facebook.
  • Generic – The user chooses to send all GA4 server-side events over to Facebook.
    • This specific setup may come with drawbacks if not all configured GA4 server-side events are recognized as Facebook events.  
• Create a Facebook CAPI Server-Side Tag in GTM using the imported template.
• Click on the “Tags” tab, then click “New”, then click the “Tag Configuration” box.
• Select the new custom template “Conversions API”.
• Name the tag “Facebook CAPI”.
• Fill in the following fields:
  • Pixel ID: Obtained from the Facebook Business Manager account by going into the Data Source tab.  
  • API Access Token: Obtained from the Facebook Business Manager Account. Choose the pixel you want to implement, then select Settings.  Click on the Generate access token link located under Set up manually, then follow instructions.  

• Custom:
  • Tag Configuration Details:
    • Event Name Setup Method: Override.
    • Event Type: Customize to your liking. Users can select either Standard or Custom Events.
    • User Data: Add Parameters for User Data (if applicable, this will help bolster event matching between server and client-side).
    • Custom Data: Add Parameters for Custom Data.
    • Notes: For both User and Custom Data, the variable that is referenced typically comes from “Event Data” variable type. Make sure the Event Data parameter that is being referenced matches the parameter name in the corresponding GA4 Serverside Tag.
  • Trigger Configuration Details:
    • If PageView Tag:
      • Use the default All Pages Trigger.
    • If Event Tag:
      • Set the Trigger to Custom Event type and for custom name, make sure it matches the corresponding GA4 Event Name.
• Generic:
  • In the Tag Configuration:
    • Event Name Setup Method: Inherit from Client 
    • User Data: Add Parameters for User Data.
    • Custom Data: Add Parameters for Custom Data.
  • Set the trigger for the Facebook CAPI tag to fire when the GA4 client tag fires.
    • Click on add a Trigger.
    • Click on “Custom”.
    • Click on the “Some Events” radio button.
    • Set the condition to where “Client Name” (built-in GTM variable) is equal to “GA4”.
    • Name the Trigger “Client – GA4”.
• Once the setup is complete, check the Preview Mode.
  • Click on the “Preview” button to enter Preview Mode.
  • Enter the URL of the page that has SSGTM integration. Click Connect.
  • Go back to the Preview mode tab.
  • Check the request beginning with “collect…” to confirm events are firing as per expected.
  • Under the request, click on the event itself “page_view” to confirm that the Facebook Server Side request was received.
    • If everything was set up correctly, there should be no errors produced here. If not, make sure the valid Facebook Pixel ID, API Token, and Test Event Codes are referenced.
  • Similarly, click around the page and confirm that the corresponding events setup in GA4 are also firing and being received to Facebook servers as well. 
    • Custom Events when triggered will match the event names setup in GA4.

In addition to configuring Facebook CAPI, there is also a way to integrate OneTrust consent management as well and have the serverside tags listen for OneTrust consent.

1. Go to the client-side GTM Container.
2. For all GA4 server-side tags, keep these open with no exception triggering as we want GA4 server-side tags to fire at all times no matter what. This is in compliance since we aren’t sending any information over to GA4 at this time.
3. In either the Google Tag or the Configuration Settings Variable:
4. Add a parameter called “onetrust_consent_levels”.
5. For the variable, create a custom variable called “CJS – Optanon Groups Value”.
6. Add the following code:

function getGroups() {
  var optanonConsent = decodeURIComponent(document.cookie);

  // Regex code to match and extract Groups value out of optanonConsent cookie.

var regex = /groups=([^&]*)/;
var match = regex.exec(optanonConsent);

if (match && match[1]) {
var groupsValue = match[1];
return groupsValue;
  }
}

1. Go to the Serverside GTM Container.
2. Create a new variable called “Event Data – onetrust_consent_levels”.
   • Variable Type: Event Data
   • Key Path: onetrust_consent_levels
3. For each serverside tag that is applicable, create a blocking trigger with the following configuration:
   • Trigger Type: Custom
   • This Trigger Fires On: Some Events
   • Conditions:
     • Event Data – onetrust_consent_levels does not contain {{OneTrust Category ID}}:1
4. To test that the trigger is working as expected, go to GTM Preview Mode:
   • Click on the “Preview” button to enter Preview Mode.
   • Enter the URL of the page that has SSGTM integration. Click Connect.
   • Clear GTM Preview History for serverside.
   • In the banner preferences for OneTrust, reject all choices or toggle off all the categories.
   • Go back to the Preview mode tab.
   • Check the request beginning with “collect…” to confirm events are firing as per expected.
   • Under the request, click on the event itself “page_view” to confirm that the Facebook Server Side request was successfully blocked.
     • If everything was set up correctly, there should be a green checkmark next to the blocking trigger to confirm it has been successfully activated.
   • Similarly, click around the page and confirm that the corresponding events setup in GA4 are also firing and being blocked as well.

By following these steps, you can set up Facebook CAPI with server-side GTM to listen for consent, track conversions as well as other important metrics on your website!