The usage of third-party cookie-blocking software and ad blockers is growing daily. These tools work well to block cookies and third-party advertisements, which can have a big effect on tracking.
Advertisers risk losing important data for measurement and targeting as a result. Because iOS devices and browsers like Safari are built to automatically block third-party cookies, this problem is particularly noticeable on these platforms.
This trend toward privacy-focused browsing has the potential to upend tracking strategies and complicate the process of gathering user information for analytics and tailored advertisements. This is the problem that can stop the working of our Facebook pixel tracking. To solve this problem comes the first-party server-side tracking solution.
What is server-side tracking?
Server-side tracking is a method of collecting and sending data directly from your web server to analytics platforms, bypassing the user’s browser to avoid issues like cookie blocking and ad blockers.
In server-side tracking we also drop cookies, but they’re called first-party cookies. We drop these cookies through our domain rather than any third-party platforms. These cookies are not blocked by ad blockers or browser privacy settings, because they are essential for the functioning of your website. Server Side First Party Tracking By Google Tag Manage With Stape
After reading the article, I hope now your server container is ready to get data from your GTM web container. Because we will complete the total tracking through the GTM, so please let’s start from the web container because we have to send all data from the web container to the server container through the server.
Because in server-side tracking, data from the web container is sent to the server container (GTM Server container) via an HTTP request. This is typically done using HTTP requests
So let’s start the setup of this data-sending process from the web container.
Set up the web container to send data on the server.
To do it, go to your web container; from there we will start the setup of the process to send data to the server container. But to do it, we will take help from the GA4 tag templates.
We use GA4 tag templates to send data from the web container to the server container because they help streamline and simplify the process of tracking user interactions. Facebook Pixel Tracking
In the pixel tracking you can see that first we start our working with the “PageView” events in the same way we will start working here also. To do it, first go to your GTM tag section and then go to create a new tag in there.
From here, select “Google Tag” as your tag type. With this we will send our data from the web container to the server.
Now let’s start the tag setup.
At first here in the “tag ID” place, your GA4 Measurement ID. If you have your own GA4, then use the Measure ID here, or if you don’t have it, you can create it, or you can use any number here according to the ID. But the best way is to use your GA4 Measurement ID.
Now it’s time to set up some parameters with the tag. Here you can see we set up a total of 6 parameters here.
X-fb-ck-fbp: With these parameters we can send the “fbp” cookie dropped by Facebook. On the client-side, the _fbp cookie is generated by Facebook Pixel or through the fbclid URL parameter.
The server container can’t directly access this cookie due to restrictions like SameSite cookie; the value of the _fbp cookie is sent as a parameter in the event—specifically, as x-fb-ck-fbp—to the server container.
Here you can see how we created the variable. First, from the GTM variable section, we select the “1st Party Cookie” as our cookie type. Then in the “Cookie Name” we placed the value “_fbp.” You can also follow the same way to create the “fbp” cookie collector variable.
X-fb-ck-fbc: With this variable we send another dropped cookie by Facebook. But this cookie is dropped every time by Facebook when someone comes through the Facebook ads. Here in the picture you can see how we created the variable.
First_party_collection: When you set “first_party_collection”: “true”, it means that the data collection is happening from the first party—i.e., your website’s domain—rather than a third-party service (such as Facebook, Google, etc.). This is important because first-party data is not blocked by common browser privacy settings or ad blockers, which tend to block third-party cookies.
Event_time: In tracking and analytics, event_time refers to the timestamp indicating when a specific event (like a page view, button click, or purchase) occurred. This timestamp is critical for accurately recording the exact time an event took place, allowing you to analyze trends, behaviors, and performance over time.
To create this variable, first go to your variable section and create a new variable from the user-defined variable. Select “Custom JavaScript” as your trigger type. Then paste the code and save the variable to use it here.
function() { return Math.round(new Date().getTime() / 1000); }
Now through the last parameters, we are going to use the server URL. Through this URL your data will be sent to the server. Be careful in the time of writing the parameter’s name; do it in our way, the way we did.
Now it’s time to set up the trigger, so to do it, scroll down and select “All Pages” as your trigger type because this tag should work on every page, and it should give us a page view event.
ViewContent
Now we have to create one more new tag for the ViewContent. To do this again, go to your “Tag” section in GTM. Create a new tag, but at this time select this new tag type.
After selecting the tag type, now let’s start the setup of ViewContent.
After selecting the tag in the “Measurement ID,” we place the same measurement ID, and in the “Event Name” place, we place the event name. Here in the time we are working to set up the “ViewContent,” but we have to remember that we are sending this data through GA4, so at the time we have to follow the GA4 schema. Because GA4 called “view_item” every time after viewing one product, not “ViewContent.”
But don’t worry, from the server, when we send the data to Facebook, these things will be fixed as per Facebook rules.
Now it’s time to set up the important parameters. To do it, scroll down and click on the “Event Parameters.”
For the Facebook server-side tracking, we will have to send these 8 parameters. Here with this all-new event, we have to send some more data about our viewed product, like the product name, product IDs, currency, and total product value. Facebook Ads Pixel Setup
Here for all these parameters, you can use the same variable you used in your browser-side “ViewContent” tracking. You just have to change the parameter name.
Now set up the trigger for this new tag.
AddToCart
In the same way, you can create a new tag for the “AddToCart” events.
You just have to change the trigger for “AddToCart” according to the data layer.
InitiateCheckout
After every time when our traffic goes for checkout in the checkout page, then the event will be fired in the data layer.
But think about the way that every person doesn’t buy just one single product. They can buy product more then one. So for the “InitiateCheckout” we have to select one perfect variable that can solve this problem.
So now we just changed the two parameters, like we did in our browser-side tracking. So now it’s done.
Purchase
Now this is the final event that we have to send to the server. The tracking way is also the same for this tag, but here for this event we have to send some more new parameters. With all of these new parameters, we will have to send some user info also. We will get all this info after completing one purchase in the data layer.
In this way, you will be able to see your customer data in the data layer, so we have to send all these values to Facebook. But we have to use the hash value to send it to Facebook.
Here you can see that first we set all of the previous parameters. Let’s set up the next call.
All these events were created as per our data layer rules. The Clear Concept Of GTM DataLayer
In the way we created all of the variables.
But if you saw any data that is not in the hashed form, then you have to use custom JavaScript to change it into hashed data.
To do it, first create one variable in the way that will collect your targeted data.
Then again, go to your variable section and select “Custom JavaScript” as your variable type and paste the code.
function() {
return sha256({{value}});
function sha256(r){if(r){r=r.toString();for(var $,_,o=Math.pow,f=o(2,32),t="length",a="",n=[],h=8*r[t],i=sha256.h=sha256.h||[],c=sha256.k=sha256.k||[],e=c[t],s={},u=2;e<64;u++)if(!s[u]){for($=0;$<313;$+=u)s[$]=u;i[e]=o(u,.5)*f|0,c[e++]=o(u,1/3)*f|0}for(r+="\x80";r[t]%64-56;)r+="\0";for($=0;$<r[t];$++){if((_=r.charCodeAt($))>>8)return;n[$>>2]|=_<<(3-$)%4*8}for(_=0,n[n[t]]=h/f|0,n[n[t]]=h;_<n[t];){var v=n.slice(_,_+=16),g=i;for($=0,i=i.slice(0,8);$<64;$++){var l=v[$-15],k=v[$-2],x=i[0],S=i[4],d=i[7]+(A(S,6)^A(S,11)^A(S,25))+(S&i[5]^~S&i[6])+c[$]+(v[$]=$<16?v[$]:v[$-16]+(A(l,7)^A(l,18)^l>>>3)+v[$-7]+(A(k,17)^A(k,19)^k>>>10)|0),p=(A(x,2)^A(x,13)^A(x,22))+(x&i[1]^x&i[2]^i[1]&i[2]);(i=[d+p|0].concat(i))[4]=i[4]+d|0}for($=0;$<8;$++)i[$]=i[$]+g[$]|0}for($=0;$<8;$++)for(_=3;_+1;_--){var w=i[$]>>8*_&255;a+=(w<16?0:"")+w.toString(16)}return a}function A(r,$){return r>>>$|r<<32-$}}
}
Here, just in the red box, change it with your variable name that you want to change in hashed.
In the way, you have to create more and more new variables that you want to change in hash form.
5 more important parameters that we can send in Facebook. But here the “Transaction ID” is the valuable parameter. This we have to send must be. But the other one you can send to Facebook if your site has anything; otherwise, you can avoid it.
Here you can see how we created the variable. Then create the trigger, and your tracking is now done from the GTM web container.
Event ID
In GTM, an event ID is commonly a unique identifier for some event that happens on your website or app when a person interacts with it. This ID is used to log and identify events on the site so that the correct data can be associated with it in analytics systems (e.g., Google Analytics, Facebook Pixel).
We have used the event ID for deduplication. Because in one place we are sending data in two different ways. One browser is client-side, and the other one is server-side. So if we don’t send the event ID with the event, then our platform will start counting every piece of data as new data. That’s why we have to send the event ID with every event.
To set up the event ID with the event, first we have to add one more new template in our GTM. So to do it, go to your variable section and create a new variable from the user-defined variable.
Here to select the variable type, we have to discover new variables.
So from here, select search and select the Event ID variable template. Now after adding the new templates in the variable section, you can use it as your variable type.
Event ID variable creation is now done. So again, go to your tag section because now we have to set this variable with every single tag. Let’s start it with the Facebook pixel templates.
In every Facebook pixel template, you can add this under the “More Settings.” In the same way, set up the event ID for every single tag.
Now again you have to set up this variable in your GA4 tag. Because with this tag you are sending data to your server. So here also it’s important to have the event ID.
Here in the GA4 tag you can send this event_id simply like this with the other parameters.
Great, your GTM web container is now ready to send data to your server, and in previous time we already completed our server container setup, so the server container is also ready to get data through the GA4 client in the server container.
GTM Server Container Setup
This is the view of your server container. Here you can see the GA4 (Web) client.
The server container client in Google Tag Manager (GTM) is responsible for capturing the data coming from the browser container. When a website user interacts, data such as page views or events is collected by the browser container and then sent to the server container through HTTP requests. The client of the server container processes that data, does any transformation/enrichment as necessary, and logs it to analytics platforms such as Google Analytics or TikTok. This server-side method helps in increasing performance, avoiding overhead on the browser, and also supporting more secure data handling to track it accurately.
To check that your server container is working perfectly, first click on the preview section from the server container.
This is your first view after opening the preview from the server container. Now go to your GTM web container and create a new preview and do some events on your site.
Here you can see how we are getting data from the server in our server container. So we can send this through the API to our site.
To do it first, you have to add one tag template in your server container like the previous way.
Now go back to the tags section and create a new tag, and as the tag type, select the recently added Facebook API.
This is the view of your Facebook API. Here to complete the setup, we have to collect three things. one “Access Token,” the 2nd “Facebook Pixel ID,” and the test event code.
To get this, all we have to do is go back again to our Facebook event manager setting.
Now from the setting, scroll down.
Now go to your API and paste all this code. And we already have the pixel ID.
Great, now we just have to set up the trigger. So go to your trigger section.
Now in the trigger, select “Custom” as the type, then select “Some Events.” Then you can see in the next first position we select “Event Name” in the next “Matches RegEx” and in the other place “page_view|view_item|add_to_cart|begin_checkout|purchase.” You can also do it for your trigger setup.
By using “Matches RegEx” in the trigger configuration, you can set up a custom trigger in GTM to track multiple events. You can allow the trigger to match particular event names using a regular expression (RegEx) by choosing “Matches RegEx” after entering “Event Name” in the first dropdown.
You enter “page_view|view_item|add_to_cart|begin_checkout|purchase” in the second field. This regular expression instructs GTM to start up whenever any of these things take place. Because the | symbol is used to separate the various event names, this trigger will activate for any of these events, enabling you to record actions at every stage of the customer journey, from page viewing to purchase.
But in the first place, if you find that the “Event Name” is missing, then go to your variables section, and from the built-in variables, select the “Event Name,” and you’re done.
So with this, your Server API setup is now done. This server API will collect every single important piece of data as per Facebook rules, and it will send it to Facebook. To check if it is working perfectly or not, you can run one more preview. After the preview, you can publish both of your containers.
