Fb has now formally launched their Conversions API tag template for server-side tagging in Google Tag Supervisor.
With this tag template, you’ll be able to create a server-side tag that fires with any Shopper designed to parse requests right into a unified occasion mannequin.
One such Shopper already exists, and each single Server container has it built-in: the GA4 Shopper.
When you haven’t but deployed a Server container, take a look at this video walkthrough for extra particulars on do it.
On this information, I’ll stroll you thru the steps that you must take to get Fb’s Conversions API working in unison with a GA4 Shopper.
This implies one easy however highly effective factor:
You don’t must run any Fb JavaScript within the net browser. The Fb server-side tag will be capable to make the most of your present GA4 information streams, albeit with some small modifications to cater to Fb’s distinctive necessities for the payload.
If you wish to use the Fb net pixel to deal with each the net stream and the server-side information dispatch, you’ll have to wait some time till Fb formally releases their resolution for splitting the net pixel stream into each a Fb server request and a customized endpoint request (e.g. your server-side endpoint).
X
The Simmer Publication
Subscribe to the Simmer e-newsletter to get the newest information and content material from Simo Ahava into your e mail inbox!
The way it works
Right here’s a quick overview of how the method works.
Nearly 10 years of running a blog and that is nonetheless the standard of my course of diagrams…
The GA4 net tag data the occasion
Your GA4 tags working within the net browser will gather occasions as they’ve completed till now.
Nonetheless, as an alternative of sending the occasions on to Google Analytics servers, you’ll configure the transport_url
discipline within the GA4 Config tag (ideally) to dispatch the requests to your Server container as an alternative.
Along with this, you’ll want so as to add some new fields to the GA4 requests, in order that the Fb tag template will be capable to entry this info. This consists of issues like Consumer Knowledge parameters (used for person matching), and sure Fb customized information parameters you need the server-side tag to gather as properly.
You don’t have to fret about sending any of this Fb-specific info to GA4! We’ll clear up the payload within the Server container.
The GA4 Shopper captures the request
When you configure the transport_url
in your GA4 Config tag, it is going to be despatched to your Server container.
Within the Server container, you want a GA4 Shopper with Default GA4 paths chosen.
You can too proxy the gtag.js container by checking the Default gtag.js paths for particular IDs, and you can even make the most of the Server container’s cookie capabilities by increasing Extra Settings and exploring the FPID choice.
The Fb tag takes the information and forwards it to Fb
Within the Server container, the GA4 Shopper parses the incoming HTTP request despatched by the GA4 net tag and converts it into an occasion information object.
This object triggers the Fb server-side tag (the template for which you’ll find within the Neighborhood Template Gallery), which reads the occasion information and eventually sends the payload to Fb.
You probably have (as you need to) a GA4 tag working within the Server container, dispatching the GA4 Shopper’s output to GA4 servers as properly, you may wish to clear up a number of the parameters reserved for Fb to stop them from “leaking” into your GA4 information.
And that’s it for the overview! Let’s bounce into every half in additional element.
Replace the GA4 net tag
Let’s begin with modifying the GA4 net tag.
When you’re simply beginning to work with Server containers, it could be sensible to copy your present GA4 net tags reasonably than exchange their performance with the transport_url
discipline.
That manner you’ll be able to “parallel monitor” through the net tag AND the Server container. You may wish to create a brand new information stream in GA4 simply on your server-side hits.
However this isn’t a information on create a GA4 server-side setup. As a substitute, we’ll deal with using the GA4 net tag for Fb’s functions.
The Fb server-side tag has a restricted stock of parameters it may possibly make use of.
Occasion Title
First, there’s the Occasion Title discipline within the GA4 net tag itself. You possibly can set something you want into this and it’ll work with Fb’s endpoint. Nonetheless, some occasion names have particular performance, and they’re routinely transformed to Fb’s commonplace occasion identify format. Right here’s the record:
Occasion identify in GA4 tag | Occasion identify transformed by Fb’s tag |
---|---|
add_payment_info |
AddPaymentInfo |
add_to_cart |
AddToCart |
add_to_wishlist |
AddToWishlist |
begin_checkout |
InitiateCheckout |
generate_lead |
Lead |
page_view |
PageView |
buy |
Buy |
search |
Search |
sign_up |
CompleteRegistration |
view_item |
ViewContent |
So if you happen to use any of the occasion identify values within the left column, Fb will convert them to the corresponding values within the proper column when amassing the information.
Another occasion names will likely be used as-is with out modifications when amassing the information to Fb.
Basic parameters
There are a handful of utility parameters which you can set as GA4 occasion parameters, and they are going to be dealt with in a particular manner by the Fb tag.
event_time
The event_time
parameter must be set to the second when the information was collected on the web site. The format is UNIX (epoch) time in seconds. In different phrases, to get the present timestamp with a Customized JavaScript variable, for instance, you would use this:
perform() {
return Math.spherical(new Date().getTime() / 1000);
}
Notice that you simply don’t have to ship this. If it’s not a part of the GA4 hit, then the Fb tag will merely set the timestamp to the second the server-side tag was executed.
event_id
event_id
is used for deduplicating similar occasions collected from multiple supply (e.g. website online and Server container).
That is solely related if you’re duplicating information assortment between the net pixel and the Server container, for instance. If you’re solely amassing occasions utilizing one or the opposite, you do not have to make use of event_id
!
The event_id
should be distinctive for all of the occasions that must be deduplicated. Every set of occasions that must be deduplicated will need to have its personal distinctive occasion ID, in any other case Fb won’t be able to constantly deduplicate the information.
With Google Tag Supervisor, making a constantly distinctive occasion ID is a bit troublesome, as variables are resolved every time they’re invoked. So in case you have, for instance, the {{Random Quantity}} variable used as Occasion ID in an online pixel and a server-side name, then it should return a special quantity for each instances the variable is known as.
A reasonably easy strategy to create the Occasion ID could be to generate a random Web page ID for each web page load, after which concatenate this with a sequence quantity that’s elevated by one for every set of Fb occasions that must be deduplicated. Another choice is to push an occasion to dataLayer
for every set of Fb tags that must be deduplicated, and with that occasion additionally push the random, distinctive Occasion ID. That manner all of the Fb hits (that require deduplication) can fireplace on the occasion and use the Occasion ID within the pushed object.
page_location
Though page_location
is routinely collected from the URL of the web page when the GA4 tag fires, you can even override it with a customized worth as within the screenshot above.
That is collected because the event_source_url
by the Fb server-side tag.
action_source
You possibly can set action_source
to considered one of:
e mail
web site
app
phone_call
chat
physical_store
system_generated
different
This discipline is optionally available, and it specifies the context of the hit: the place did the conversion occur.
You possibly can additionally configure the Motion Supply within the server-side Fb tag. Nonetheless, if you happen to do ship the action_source
within the GA4 hit, it overrides the server-side tag setting.
Consumer information parameters
With acceptable consent and/or different authorized premise checked, you can even ship person information parameters to Fb to assist match the conversion with the person who carried out the motion.
Please, please, please just be sure you have the authorized proper to ship finish customers’ private information to Fb. Don’t observe the directions beneath blindly – be sure to aren’t breaching the customers’ proper to privateness.
For person information parameters to work within the server-side setup, you should add the next discipline to the occasion parameters of the GA4 tag sending the person information:
Set the sphere identify to first_party_collection
and worth to true
.
Consumer IP tackle and Consumer-Agent string
If you would like, you’ll be able to override the IP tackle and Consumer-Agent string despatched to Fb utilizing the GA4 net tag as properly. It is a good manner of anonymizing the request if you happen to don’t need Fb to make use of the person’s precise IP and Consumer-Agent.
To override the IP tackle, set the sphere ip_override
, and to override the Consumer-Agent string, set the sphere user_agent
.
When you don’t override these fields, the server-side tag will ahead the person’s precise IP tackle and Consumer-Agent to Fb to assist with person matching.
Consumer information parameters within the widespread occasion schema
You can too explicitly ship private information in regards to the person to Fb. The server-side tag will hash the information, so Fb won’t ever obtain the information in a readable format.
If the information is already hashed when despatched with the GA4 tag, the Fb tag gained’t hash it once more.
Listed here are the parameters you’ll be able to set:
user_data.email_address
user_data.phone_number
user_data.tackle.first_name
user_data.tackle.last_name
user_data.tackle.metropolis
user_data.tackle.area
user_data.tackle.postal_code
user_data.tackle.nation
That is what it’d look within the GA4 net tag:
Fb-specific parameters
There are additionally a handful of Fb-specific parameters you’ll be able to set. These are not hashed routinely.
Parameter identify | Description |
---|---|
x-fb-ud-ge |
Consumer gender. Hashing is required. |
x-fb-ud-db |
Consumer date of start. Hashing is required. |
x-fb-ud-external_id |
Exterior ID, e.g. advertiser loyalty ID. Hashing is beneficial. |
x-fb-ud-subscription_id |
Subscription ID, e.g. a subscription ID for the person within the transaction. This shouldn’t be hashed. |
x-fb-ck-fbp |
The _fbp cookie worth. See beneath. |
x-fb-ck-fbc |
The _fbc cookie worth. See beneath. |
You possibly can ship the _fbp
and _fbc
cookie values with the parameters listed above. When you don’t explicitly set them, and the person has these cookies of their browser, and the server-side tagging endpoint is first-party, then the Fb tag will routinely learn the cookie values from the person’s cookies.
Notice that at the moment, the Fb tag does not set the cookies within the response. I’ve submitted an Challenge about this to Fb, as I believe it could make quite a lot of sense to have the tag add the
Set-Cookie
headers within the HTTP response again from the Server container.
Right here’s what a few of these parameters may appear to be within the GA4 occasion tag:
Customized information parameters
You can too ship customized information parameters to Fb by setting them as fields within the GA4 net tag.
Basic parameters
There are a handful of basic parameters that may be set within the GA4 net tag. The Fb server-side tag will be capable to learn these and ship them to Fb.
GA4 parameter identify | Transformed by the Fb tag | Description |
---|---|---|
forex |
forex |
Foreign money code of the transaction (or different occasion with a financial worth). |
worth |
worth |
Whole worth of the transaction (or different occasion with a financial worth). |
search_term |
search_string |
What the person looked for with the location search. |
transaction_id |
order_id |
Distinctive order / transaction ID. |
That is what these parameters would appear to be within the GA4 occasion tag:
Gadgets
When you’re amassing Ecommerce to GA4, you may have already got an objects
array in place.
Properly, the server-side Fb tag can routinely take the contents of this objects
array and switch it right into a contents
array!
That is how the mapping is completed:
Key in objects |
Mapped to in contents |
Description |
---|---|---|
item_id |
id |
Merchandise ID (e.g. SKU). |
item_name |
title |
Merchandise title or identify. |
worth |
item_price |
Merchandise worth. |
item_brand |
model |
Merchandise model label. |
amount |
amount |
Variety of objects within the occasion. |
item_category |
class |
Merchandise class label. |
That is by far the best strategy to construct the contents
array.
Naturally, you can even ship the contents
array with a customized parameter named x-fb-cd-contents
.
Fb-specific customized information parameters
You can too ship a lot of Fb-specific customized information parameters. These are:
Parameter identify | Description |
---|---|
x-fb-cd-content_category |
Content material class. |
x-fb-cd-content_ids |
Content material IDs. |
x-fb-cd-content_name |
Content material identify. |
x-fb-cd-content_type |
Content material sort. |
x-fb-cd-contents |
Contents array. |
x-fb-cd-num_items |
Variety of objects. |
x-fb-cd-predicted_ltv |
Predicted lifetime worth. |
x-fb-cd-status |
Standing. |
x-fb-cd-delivery_category |
Supply class. |
You possibly can learn extra about these parameters in addition to about their anticipated codecs behind this hyperlink.
Right here’s an instance of what these may appear to be within the GA4 occasion tag:
Check occasion code
When you’re testing the Conversions API endpoint, you need to use the take a look at occasion code to gather hits to your Fb account with extra debug info included.
You can set the take a look at occasion code within the GA4 net tag if you want. All that you must do is ready the occasion parameter test_event_code
like this:
Nonetheless, it could be simpler to configure the take a look at occasion code within the Fb server-side tag (see beneath).
Be certain that the GA4 Shopper is working within the server container
When the GA4 net tag has the transport_url
discipline set to level at your server-side endpoint, the endpoint will obtain a GA4 request each time such a tag fires within the web site.
If the server-side endpoint doesn’t have a GA4 Shopper configured, the request will fail with a 400
error.
Just be sure you have a GA4 Shopper working within the Server container. If not, create one by selecting the New.
Subsequent, open the Shopper and ensure the Default GA4 paths choice is checked.
This must be sufficient to make your endpoint declare the incoming GA4 requests and parse them into the format required by the Fb tag.
Load the Fb Conversions API Tag template from the template gallery
Subsequent, head on to Templates within the Server container.
Within the Tag Templates field, click on the Search Gallery button.
Seek for the Fb Conversions API Tag template, choose it, and click on Add to workspace.
Create and configure the Fb Conversions API Tag
Within the Server container, go to Tags and create a brand new tag.
Select the Fb Conversions API Tag as the kind.
To ship information to the Conversions API, you will want the next info:
- The Pixel ID to which the information is shipped.
- An API Entry Token for interacting with the Conversions API.
- (Optionally) a Check Occasion Code with which to check the Conversions API with out truly inflicting information to be collected towards your pixel.
You can too set the Motion Supply explicitly right here, if you want.
For extra info on get the required values, seek the advice of Fb’s documentation.
Lastly, you’ll wish to set off the tag when the GA4 Shopper fires.
Set off when any GA4 request is acquired
The only strategy to work with the Fb tag is to set off it each time any GA4 request is processed by the GA4 Shopper.
You’d must create a brand new Customized set off, the place the situation is:
Shopper Title equals <your GA4 Shopper identify>
For instance, I’ve created a GA4 Shopper named GA4
. Thus, my set off appears like this:
While you add this set off to the Fb tag, it should (attempt to) ship information to Fb when any GA4 occasion is retrieved.
Set off conditionally
Nonetheless, you may wish to fireplace the tag solely when some GA4 requests are acquired by the GA4 Shopper. For instance, maybe you solely wish to fireplace the tag when it has a kind of Fb-specific parameters included. Or maybe you wish to fireplace the tag just for a given occasion identify.
The set off above will fireplace solely when the GA4 Shopper receives a request and when the request’s question string has a question parameter that begins with both ep.x-fb-
or epn.x-fb-
. The primary is for customized textual content parameters despatched with the GA4 tag, and the second is for customized quantity parameters.
Question String is a built-in variable you’ll be able to allow within the Variables part of the Server container.
The Lookup Desk variable above might be used to set the tag to fireplace for under a particular set of occasion names. Within the Fb tag’s set off, you’ll add the situation that this Lookup Desk variable must resolve to the true
worth for the tag to fireplace.
Notice that the occasion names must match these set within the GA4 net tag. So if you need a page_view
GA4 net occasion to fireplace the Fb server-side tag, you would wish so as to add page_view
to the record of allowed occasions.
There are various methods to deal with this, and that you must think about how and if you need Fb to obtain information from the Server container. There are equally some ways so as to add Fb-specific parameters to the GA4 net tag to be able to “flag” sure requests to be supposed just for Fb.
Since you’re including all these new parameters to the GA4 net tag, it’s doable you don’t wish to ship them to GA4 as properly. That is significantly true for all these x-fb-
prefixed parameters.
First, calm your self. The GA4 server-side tag will NOT ship any Consumer Knowledge parameters, which means these prefixed with user_data
. So if you happen to ship an e mail tackle unhashed to your Server container because the user_data.email_address
parameter (following this), these will not be processed by the server-side GA4 tag!
However for all of the others, you’ll want so as to add the parameters you wish to exclude into the respective setting of your GA4 server-side tag(s). For instance, right here I’m ensuring that the x-fb-cd-ge
(for Gender), x-fb-cd-db
(for Date Of Delivery), and x-fb-cd-content_type
(for Content material Kind) are not despatched to GA4:
I want there was a strategy to specify an everyday expression match, for instance, however for now you simply must explicitly record the parameters you wish to exclude.
One of the simplest ways to get an inventory of parameters which can be processed by the GA4 Shopper is to check out the Server container’s Preview mode and particularly the Occasion Knowledge tab for any given occasion that fires the GA4 tag.
Right here you’ll be able to see how I’ve the three x-fb-...
parameters generated by the GA4 Shopper, so I want so as to add these to the exclusion record within the GA4 server-side tag.
There’s yet another Fb-specific parameter within the screenshot above which I ought to most likely additionally exclude. Can you notice which one it’s?
Check the setup
After you have the GA4 net tag configured, the GA4 server-side Shopper arrange, the Fb server-side tag able to go, and the GA4 server-side tag up to date, you’re able to take a look at the whole lot.
Take each the Server container and the net container to Preview mode, and do one thing that causes a GA4 occasion designed for Fb’s information assortment to fireplace within the net container.
Within the net container’s preview mode, you need to see a GA4 request to the Server container. To see this, be sure to have the GA4 Measurement ID chosen within the Preview filters reasonably than the GTM container ID (see the way it’s completed within the screenshot beneath).
Within the Server container’s preview mode, you need to see an incoming HTTP request, the place the Occasion Title you configured within the GA4 net tag is proven beneath the request.
When you choose the request, you need to see an outgoing request to Fb (and probably to GA4 as properly):
When you choose the Fb request, you need to see the proper entry token within the URL, a properly shaped request physique with all of the parameters you included (person information parameters being hashed), and eventually a standing code of 200
to point a profitable request.
You also needs to verify the outgoing request to GA4 to ensure all of the parameters you wished to exclude are, certainly, excluded.
Lastly, in Fb you need to see your occasion are available to the take a look at occasion software (assuming you had been utilizing the Check Occasion Code).
If it doesn’t work, be sure you verify for doable error responses from Fb by opening the request particulars within the Server container’s Preview mode.
Abstract
Establishing Fb information assortment utilizing a GA4 information stream from the net to the Server container has its perks.
The largest one, by far, is that you simply gained’t be loading any Fb JavaScript within the browser. This alone ought to make this convoluted information assortment scheme definitely worth the effort to set it up.
You’ll additionally be capable to construct a consolidated information assortment mannequin the place redundancy is minimized. In spite of everything, the semantic content material of conversion information whether or not to Fb or to GA4 is all the time roughly the identical – the keys and labels simply have completely different names.
It’s nonetheless a reasonably new and tough resolution, although. For one, the Fb server-side tag doesn’t at the moment write the _fbc
and _fbp
cookies, so if you’re not working Fb JavaScript within the browser, it’s doable these identifiers are misplaced. I’ve submitted a problem about this to Fb’s GitHub undertaking, so hopefully it is going to be sorted out in some unspecified time in the future.
It’s additionally a little bit of a chore to first allowlist the parameters for Fb after which to blocklist them in GA4. However that’s unavoidable for now. Maybe in some unspecified time in the future the Server container will give extra instruments for constructing parameter maps between Purchasers and tags, reasonably than having so as to add them one-by-one into all of the tags individually.
I hope you loved this text. As soon as Fb releases a strategy to leverage the Fb net pixel to ship information to the Server container, I’ll follow-up with one other information about this technique, too. However personally I’m an enormous fan of piggy-backing off the GA4 tag because of the perks listed initially of this chapter.
What do you concentrate on Fb’s entry into the Google Tag Supervisor Server container? What options are you lacking?