There are dozens of articles on how to set up sever-side tagging for your Facebook tags. This guide is going to go through the exact step-by-step process of setting up Facebook’s CAPI as soon as possible, while leaving aside the theoretical fluff.
Facebook CAPI: process overview
The process can be broken down to 3 steps:
- Setting up your web tags
Although we are talking about server-side tracking, client-side tags are still used to forward some information to the server.
- Configuring your server-tags
Contrary to the client-side approach, we will be using one Facebook tag on the client-side to capture all our events.
- Testing your Set-up
Finally, we will test our set to make sure the matching is working as expected.
[image to encapsulate what I’ve said]
Perquisites to follow along
Make sure you have:
✔️ Admin access to your GTM client and server containers
✔️ A production ready server container. If you are still working on it, check this guide.
✔️ Admin or developer access to your Facebook Business Manager Account
Setting up GTM Client Tags
Client tags play the role of a transmitter. After an event fires, all the parameters are forwarded to the server side and claimed by the GA4 client.
Google Tag set up
Before moving to the event tags, we need to add new parameters to the Google Tag in the Configuration Parameter
section.
- Set the
send_page_view
tofalse
. - Add the server container URL.
- Make sure that
first_party_collection
istrue
. This parameter allows Facebook to make use of first party data for matching events from server and browser.
GA4 event tag set up
Now, we move to our event tags. We are going to use a tag that sends page_view
events as an example.
Add parameters to the Google Tag event settings
variable
Why use shared events settings?
We want all events we are going to send to Facebook server tag to have the same essential parameters. If you don’t use the shared event settings
, you will have to manually define the parameters for each event.
- Meta click ID
_fbc Captures the Meta click ID
- Meta browser ID
_fbp Send your browser ID to Facebook
- Event ID
The event_id
is undoubtably the most import thing you can send if you are using both the Facebook Pixel and CAPI. It will help us later to deduplicate events.
Now we need to get the values of each of these parameters somehow. For the event ID, we will use the template you can find in the templates library by searching for Unique Event ID
.
Next we are going to get _fbc
& _fbp
using the First party cookie variable.
Save the tag, and you are done with GA4 event tag configuration.
Add user parameters in Google Tag event Settings
Remember the parameter first_party_collection
? It’s time to put it to good use by passing users first party data like email and city if they are available in your page. You can check the full list of parameters here.
Within the same Google Tag: Event Settings
we will add the user properties. This will help us avoid the repetitive task of adding them each time.
Multiple CAPI events
You need to repeat the same process for each of the events you plan to send to Facebook CAPI.
Facebook CAPI Tag
It’s time to finally use our Facebook server tag. Go to templates, and under tag template, you can click on Search Gallery
.
Look for Facebook Conversion CAPI
by Stape.io and add it to your workspace. Next, Go back to Tags section,
and paste the pixel ID and your conversion API from Facebook events manager.
Add a trigger to the Facebook CAPI Tag
We want the Facebook CAPI tag to forward the event to Facebook, when GA4 client tag fires.
We will select a custom trigger and add the following conditions:
- GA4 client: if the request is coming from the GA4 client
- Event name: in this example, we are using
page_view
. You can of course add any number of events by adding aregex
pattern.
And you are pretty much done.