Implementing a Server-side GTM and GA4 for Wordpress
In this post, I will be writing about how I have implemented Server-side GTM and GA4 tagging on my Wordpress blog.
What is a Server-side GTM?
You might be familiar with the concept of a tag manager in general.
You can use tag managers such as Google Tag Manager to store and fire tags (Google Analytics, Facebook etc).
There are many benefits to using a tag manager and the biggest benefit is the consolidation of tags. But there are also concerns around privacy, slow site speed and usage of third-party cookies for large containers.
Server-side GTM is a solution that allows you to move the tag container from the client-side to the server-side on GCP or any other platform that you prefer. From official Google’s documentation, server-side tagging offers below advantages over client-side tags:
-
Improved performance by having fewer measurement tags or less code to run on client-side
- Better security by storing visitor data in your own server-side environment and then processing and routed to other tags.
I would not be going through the pros/cons of having a server-side GTM on your site. Here is a great article by Simo Ahava talking about this in more detail.
In this post, I would be focusing more on how I have implemented a server-side GTM on this very blog that you are reading.
Creating a Server-side GTM Container
If you are to create a Server-side GTM container, the obvious first step is to create an empty one in your GTM account.
You can pick any name for this and choose the Server as the target platform.
Provision of the tagging server
As a next step, you will be asked to set up your tagging server. Here you can choose the option for Google to automatically provision tagging server or you can set it up manually.
If you are someone who prefers to select the GCP project and App Engine environment for the container, then you can do so by following this guide.
For me, I prefer to have a separate GCP project and want to see how Google set it up, so I chose the automatic option.
It may take a while for Google to set this up for you and once done, you will see a notification and link to go to your new GCP project. From there, you should also link your GCP billing account to this project so that App Engine instances can be started.
Setting up Custom Domain and DNS
I would strongly recommend setting up a custom domain to map your SS GTM instead of using the default app engine domain.
When you have created your SS GTM for the first time, it will have its own default URL pointing to appspot.com like below:
If you don’t create your own custom domain, you won’t be able to use the information from cookies. Browsers such as Safari may still consider appspot.com as a third-party domain and you won’t be able to enjoy the benefits of having SS GTM.
Choosing a custom domain is simple. If you have a domain like zinkohlaing.com, you can consider creating a custom domain such as ssgtm.zinkohlaing.com for your SS GTM. This is exactly what I did.
Once you have decided on your custom domain name, you can go to the GCP project that you have created for your SS GTM. From there, you can click on App Engine. Then you can go to Settings, and click on Custom Domains. From there you can add a custom domain.
I am using Google Domains as my domains registrar and it is relatively easy to add a custom domain there and get it set up. If you are using other providers, a new window tab will open in which Google will ask to verify your domain. You can then follow the instructions on the screen to add TXT records.
As the last step, it will provide a list of DNS records to add to your DNS provider. Here, I use Cloudflare to manage my DNS so I would then need to add these to my DNS records. Here is an article explaining in more detail how to do so.
Once you have added these records, it may take an hour or two to get these working. In the meantime, you can go back to your GTM container settings and change the tagging server URL to your new custom domain. In my case, that will be ssgtm.zinkohlaing.com. Then click on “Save“.
If you want to verify your implementation, you can go into your SS GTM, and click on the Preview button.
It should open a new debug window with your custom domain in the URL. Then you will know your DNS setup is successful!
How to set up GA4 Tag in SS GTM Container
You can send data to a SS GTM using one of the below methods:
- Using client-side web GTM container
- Using gtag.js
- Using custom code
Setting up in client-side web GTM Container
The easiest method is to use the client-side web GTM container that you have already been using. We will call this container Web-GTM from now on.
Switch to your client-side web GTM container and go to Tags.
Look for GA4 Configuration Tag. If you haven’t already created one, you can proceed to create one. You can add the measurement ID of a GA4 property that you’re using (or) planning to use. Here I would recommend having two separate GA4 properties; one for normal Web-GTM and one for SS GTM. The purpose is to look at data being sent from different types of containers and analyse the differences.
Under GA4 Config Tag, Fields to Set, you should add below:
- Field Name: transport_url
- Value: <your SS GTM custom domain>
The idea is that your SS GTM will piggyback on your Web-GTM to send and receive data. Once you have saved the settings and published your Web-GTM container, you are now ready to receive GA4 data from the SS GTM container.
Configuration of server-side GTM Container
Switch to your SS GTM and go to Tags. Click on New Tag to create a new GA4 tag.
Currently below tag types are available in SS GTM Container environments.
Select Google Analytics: GA4 tag.
There are many settings to update inside the tag but if you don’t want to change anything, you don’t really have to. All you have to do is update the Measurement ID (here, you have to use the GA4 property you have created for SS GTM).
There is an option to Redact visitor IP addresses. If you want to protect IP addresses, you can choose a true value for this.
I left Event Name, Event Parameters and User Properties default values as I don’t want to change any.
Perhaps you might want to use different values from your Web-GTM, then, in that case, feel free to do so!
Then you will have to pick a trigger. There is already a default All Pages trigger but I recommend creating a Custom Event trigger as we only want to fire GA4 Client related hits.
Currently below trigger types are available in SS GTM.
The naming convention should be better here as it is not very clear on the difference between Custom and Custom Event.
Choose the first one Custom and select it to fire on Some Events where Client Name equals GA4.
Save the trigger and apply it to your GA4 tag.
That’s it! You have now set up a GA4 tag for your SS GTM!
Debugging your SS GTM implementation
If you want to verify and debug your SS GTM implementation, please follow the below steps:
Step 1: Click on Preview button on your SS GTM. It will open an empty debug window.
Step 2: Open a new tab and go to your website that already has Web-GTM container published and running. Note, if you haven’t published the changes from the previous step in your Web-GTM, it is recommended to use Preview mode in your Web-GTM to open your site.
Step 3: If you browse around your website, you should start to see hits showing up under SS GTM like below:
You should also be able to see the GA4 tag you have implemented and the values it sent.
Step 4: You can also go into the GA4 property (i.e, SS GTM GA4 property) and look at the Realtime report to verify the data.
This is how you can debug and preview the requests!
Do not forget to publish your SS GTM if everything is satisfactory!
Thanks for reaching the end of this guide! Hope this helps with your setup for SS GTM! Happy tagging!