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). In order 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 non-server side container with reference to server-side GTM tracking.  
   • 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 and 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.  
     1. If the event is not a purchase event, you will need to set the event_id parameter 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() : “”;
     2. Otherwise, if the event is a purchase event, the event_id value can be the order_id number or transaction_id value.
     3. 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.

1. • Create the Facebook CAPI server-side custom tag template in GTM.
     1. Click on this link to access Facebook’s own Meta Conversions API custom code.  
     2. Then click on “raw”.
     3. Click on File > Save As.
     4. Save to the desired location, then go to the file.  
     5. Edit the name and delete “.txt” at the end of the file leaving it as “template.tpl”.
        1. This will change the file type to the desired “tpl”.
     6. Go back to GTM, then create a custom tag template by clicking on “Templates” in the left hand side menu.
     7. Click “New” in Tag Templates.
     8. In the upper right-hand corner, click on the three dots, then click “Import”.
     9. There will be some errors after importing that needs user intervention. 
        1. Click on “Tests”, then delete the double-quotes surrounding extendCookies.
        2. Click on “Refresh Template” to refresh the template and preview changes. 
     10. The template is now ready. Click on “Save”.
   • Create a Facebook CAPI Server-Side Tag in GTM using the imported template.
     1. Click on the “Tags” tab, then click “New”, then click the “Tag Configuration” box.
     2. Select the new custom template “Conversions API”.
     3. Name the tag “Facebook CAPI”.
     4. Fill in the following fields:
        1. Pixel ID: Obtained from the Facebook Business Manager account by going into the Data Source tab.  
        2. 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. 
        3. Test Event Code: Obtained from the Facebook Business Manager Account. Go to the Test Events tab, then obtain the test events code from there.
        4. Action Source: This is a dropdown field that specifies where the conversions took place. Defaulted to “Website”.
        5. Click on Save.

1.  
2. 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”.
3. 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. The server-side implementation will automatically parse and send events to Facebook.

By following these steps, you can set up Facebook CAPI with server-side GTM to track conversions and other important metrics on your website.