{"id":71655,"date":"2025-02-06T14:49:10","date_gmt":"2025-02-06T14:49:10","guid":{"rendered":"https:\/\/peraltafinancing.com\/analytics\/facebook-conversions-api-using-ga4-web-tags-and-a-gtm-server\/"},"modified":"2025-02-06T14:49:10","modified_gmt":"2025-02-06T14:49:10","slug":"facebook-conversions-api-using-ga4-web-tags-and-a-gtm-server","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=71655","title":{"rendered":"Facebook Conversions API Using GA4 Web Tags And A GTM Server"},"content":{"rendered":"


\n<\/p>\n

\n

Facebook has now officially<\/strong> released their Conversions API tag template<\/strong><\/a> for server-side tagging in Google Tag Manager<\/a>.<\/p>\n

With this tag template, you can create a server-side tag that fires with any Client<\/a> designed to parse requests into a unified event model<\/a>.<\/p>\n

\n

<\/p>\n

\"Facebook<\/p>\n

<\/a><\/p>\n<\/div>\n

One such Client already exists, and every single Server container has it built-in: the GA4 Client<\/strong>.<\/p>\n

\n

If you haven\u2019t yet deployed a Server container, check out this video walkthrough<\/a> for more details on how to do it.<\/p>\n<\/blockquote>\n

In this guide, I will walk you through the steps you need to take to get Facebook\u2019s Conversions API working in unison with a GA4 Client.<\/p>\n

This means one simple but powerful thing:<\/p>\n

You don\u2019t need to run any<\/em> Facebook JavaScript in the web browser<\/strong>. The Facebook server-side tag will be able to utilize your existing GA4 data streams, albeit with some small modifications to cater to Facebook\u2019s unique requirements for the payload.<\/p>\n

If you want to use the Facebook web pixel<\/strong> to handle both the web stream and<\/em> the server-side data dispatch, you will have to wait a while until Facebook officially releases their solution for splitting the web pixel stream into both a Facebook server request and a custom endpoint request (e.g. your server-side endpoint).<\/p>\n


\n X<\/span><\/p>\n

\n
\n The Simmer Newsletter<\/strong>\n <\/p>\n

\n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n

<\/span><\/p>\n

How it works<\/h2>\n

Here\u2019s a brief overview of how the process works.<\/p>\n

\n

<\/p>\n

\"Facebook<\/p>\n

<\/a><\/p>\n<\/div>\n

\n

Almost 10 years of blogging and this is still the quality of my process diagrams\u2026<\/p>\n<\/blockquote>\n

The GA4 web tag records the event<\/h3>\n

Your GA4 tags<\/strong> running in the web browser<\/em> will collect events as they have done until now.<\/p>\n

However, instead of sending the events directly to Google Analytics servers, you\u2019ll configure the transport_url<\/code> field<\/a> in the GA4 Config tag<\/strong> (preferably) to dispatch the requests to your Server container instead.<\/p>\n

\n

<\/p>\n

\"The<\/p>\n

<\/a><\/p>\n<\/div>\n

In addition to this, you\u2019ll need to add some new fields<\/strong> to the GA4 requests, so that the Facebook tag template will be able to access this information. This includes things like User Data<\/strong> parameters (used for user matching), and certain Facebook custom data parameters<\/strong> you want the server-side tag to collect as well.<\/p>\n

\n

<\/p>\n

\"GA4<\/p>\n

<\/a><\/p>\n<\/div>\n

You don\u2019t have to worry about sending any of this Facebook-specific information to GA4! We\u2019ll clean up the payload in the Server container.<\/p>\n

The GA4 Client captures the request<\/h3>\n

Once you configure the transport_url<\/code> in your GA4 Config tag, it will be sent to your Server container.<\/p>\n

In the Server container, you need a GA4 Client<\/strong> with Default GA4 paths<\/strong> selected.<\/p>\n

\n

<\/p>\n

\"GA4<\/p>\n

<\/a><\/p>\n<\/div>\n

\n

You can also proxy the gtag.js container by checking the Default gtag.js paths for specific IDs<\/strong>, and you can also utilize the Server container\u2019s cookie capabilities by expanding More Settings<\/strong> and exploring the FPID option<\/a>.<\/p>\n<\/blockquote>\n

The Facebook tag takes the data and forwards it to Facebook<\/h3>\n

In the Server container, the GA4 Client parses the incoming HTTP request sent by the GA4 web tag and converts it into an event data object<\/strong>.<\/p>\n

\n

<\/p>\n

\"Event<\/p>\n

<\/a><\/p>\n<\/div>\n

This object triggers the Facebook server-side tag<\/strong> (the template for which you can find in the Community Template Gallery<\/a>), which reads the event data and finally sends the payload to Facebook.<\/p>\n

If you have (as you should) a GA4 tag running in the Server container, dispatching the GA4 Client\u2019s output to GA4 servers as well, you might want to clean up some of the parameters reserved for Facebook to prevent them from \u201cleaking\u201d into your GA4 data.<\/p>\n

\n

<\/p>\n

\"Clear<\/p>\n

<\/a><\/p>\n<\/div>\n

And that\u2019s it for the overview! Let\u2019s jump into each part in more detail.<\/p>\n

Update the GA4 web tag<\/h2>\n

Let\u2019s start with modifying the GA4 web tag.<\/p>\n

If you\u2019re just starting<\/em> to work with Server containers, it might be wise to copy<\/em> your existing GA4 web tags rather than replace their functionality with the transport_url<\/code> field.<\/p>\n

That way you can \u201cparallel track\u201d via the web tag AND the Server container. You might want to create a new data stream in GA4 just for your server-side hits.<\/p>\n

But this isn\u2019t a guide on how to create a GA4 server-side setup. Instead, we\u2019ll focus on utilizing the GA4 web tag for Facebook\u2019s purposes<\/strong>.<\/p>\n

The Facebook server-side tag has a limited inventory of parameters it can make use of.<\/p>\n

Event Name<\/h3>\n

First, there\u2019s the Event Name<\/strong> field in the GA4 web tag itself. You can set anything<\/em> you like into this and it will work with Facebook\u2019s endpoint. However, some<\/em> event names have special functionality, and they are automatically converted to Facebook\u2019s standard event name format. Here\u2019s the list:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Event name in GA4 tag<\/th>\nEvent name converted by Facebook\u2019s tag<\/th>\n<\/tr>\n<\/thead>\n
add_payment_info<\/code><\/td>\nAddPaymentInfo<\/code><\/td>\n<\/tr>\n
add_to_cart<\/code><\/td>\nAddToCart<\/code><\/td>\n<\/tr>\n
add_to_wishlist<\/code><\/td>\nAddToWishlist<\/code><\/td>\n<\/tr>\n
begin_checkout<\/code><\/td>\nInitiateCheckout<\/code><\/td>\n<\/tr>\n
generate_lead<\/code><\/td>\nLead<\/code><\/td>\n<\/tr>\n
page_view<\/code><\/td>\nPageView<\/code><\/td>\n<\/tr>\n
purchase<\/code><\/td>\nPurchase<\/code><\/td>\n<\/tr>\n
search<\/code><\/td>\nSearch<\/code><\/td>\n<\/tr>\n
sign_up<\/code><\/td>\nCompleteRegistration<\/code><\/td>\n<\/tr>\n
view_item<\/code><\/td>\nViewContent<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

So if you use any of the event name values in the left<\/em> column, Facebook will convert them to the corresponding values in the right<\/em> column when collecting the data.<\/p>\n

Any other event names will be used as-is without modifications when collecting the data to Facebook.<\/p>\n

General parameters<\/h3>\n

There are a handful of utility<\/em> parameters that you can set as GA4 event parameters, and they will be handled in a special way by the Facebook tag.<\/p>\n

event_time<\/h4>\n
\n

<\/p>\n

\"event_time<\/p>\n

<\/a><\/p>\n

event_time in the GA4 web tag<\/span><\/p>\n<\/div>\n

The event_time<\/code> parameter should be set to the moment when the data was collected on the website. The format is UNIX (epoch) time<\/strong> in seconds<\/em>. In other words, to get the current timestamp with a Custom JavaScript variable, for example, you could use this:<\/p>\n

\n
function<\/span>() {\n  return<\/span> Math<\/span>.round(new<\/span> Date<\/span>().getTime() \/ 1000<\/span>);\n}\n<\/code><\/pre>\n<\/div>\n
Note that you don\u2019t have<\/strong> to send this. If it\u2019s not part of the GA4 hit, then the Facebook tag will simply set the timestamp to the moment the server-side tag was executed.<\/p>\n
event_id<\/h4>\n
\n
    <\/p>\n
    \"event_id<\/p>\n
    <\/a><\/p>\n
    event_id in the GA4 web tag<\/span><\/p>\n<\/div>\n
event_id<\/code> is used for deduplicating identical events<\/strong><\/a> collected from more than one source (e.g. web site and Server container).<\/p>\n
This is only<\/strong> relevant if you are duplicating data collection between the web pixel and the Server container, for example. If you are only collecting events using one or the other, you do not<\/strong> have to use event_id<\/code>!<\/p>\n
The event_id<\/code> must be unique for all the events that should be deduplicated. Each set of events that needs to be deduplicated must have its own unique event ID, otherwise Facebook will not be able to consistently deduplicate the data.<\/p>\n
With Google Tag Manager, creating a consistently unique event ID is a bit difficult, as variables are resolved each time they are invoked. So if you have, for example, the {{Random Number}}<\/strong> variable used as Event ID in a web pixel and a server-side call, then it will return a different number for both times the variable is called.<\/p>\n
A fairly simple way to create the Event ID would be to generate a random Page ID for every page load, and then concatenate this with a sequence number that is increased by one for each set of Facebook events that needs to be deduplicated. Another option is to push an event to dataLayer<\/code> for each set of Facebook tags that needs to be deduplicated, and with that event also push the random, unique Event ID. That way all the Facebook hits (that require deduplication) can fire on the event and use the Event ID in the pushed object.<\/p>\n
page_location<\/h4>\n
\n
    <\/p>\n
    \"page_location<\/p>\n
    <\/a><\/p>\n
    page_location in the GA4 web tag<\/span><\/p>\n<\/div>\n
Even though page_location<\/code> is automatically collected from the URL of the page when the GA4 tag fires, you can also override it with a custom value as in the screenshot above.<\/p>\n
This is collected as the event_source_url<\/code> by the Facebook server-side tag.<\/p>\n
action_source<\/h4>\n
\n
    <\/p>\n
    \"action_source<\/p>\n
    <\/a><\/p>\n
    action_source in the GA4 web tag<\/span><\/p>\n<\/div>\n
You can set action_source<\/code> to one of:<\/p>\n