Products that cover the topic Magento 2 Google Analytics 4 (GA4) GTM Extension

Server-Side GTM Configuration using RENDER

 

What is Server-side GTM tracking?

Server-side GTM (Google Tag Manager) is an advanced way to handle your Google Analytics 4 website tracking by moving some of the data collection and tag execution from the user’s browser (client-side) to a server that you control.

 

What is RENDER?

Render helps teams deploy, secure, and scale everything from hundred-line prototypes to complex mutli-service architectures - all with a relentless commitment to performance and uptime.

 

Why Server-Side tracking?

There are multiple reasons to implement server-side GTM tracking and they include: 

1. Improved data privacy
2. Ad-Blockers bypass
3. Greater tracking accuracy due to less browser restrictions


How it works? 

The idea is the same as with client-side however, server-side GTM tracking includes one additional step, instead of sending all the data to Google's servers directly, data is being sent to your own server first. The process looks like this:

1. User interacts with your website (e.g., clicks "Add to Cart").
2. Client-side GTM sends the event to your server-side GTM endpoint.
3. Server processes the event and forwards it to GA4, Facebook, TikTok, or other platforms.
4. Server can also enrich or filter data before sending it, e.g., anonymize emails or merge offline conversions.

 

Getting started

To get started you will need: 

  1. Account at RENDER.COM
  2. Account at Google Tag Manager

 

Setup Google Tag Manager

It's likely that you already use client-side GTM implementation with all the required triggers, tags and variables for proper Google Analytics 4 tracking. You will still use this container with a few minor changes which we shall explain before.

 

Creating server-side GTM container

1. Start from https://tagmanager.google.com/#/home

2. Select the 3 dots icon and then select Create Container

3. Name your container as per your branding or website so you can recognize it easily

4. For Target plaform select Server

5. Click Create

6. Prior to being created you shall be presented with a POPUP with 2 choices regarding Google Tag Manager installation. The option "Automatically provision tagging server" is designed to deploy and run your server-side container at Google Cloud servers. Since, we're going to deploy this on RENDER.COM, select the other option called "Manually provision tagging server"

 

When you select "Manually provision tagging server", you will be presented with a Container Config string. Copy this string because it will be required later for configuring RENDER web service. For the time being, we shall leave GTM configuration as is and we shall now focus on configuring RENDER.COM part, we shall go back and fourth between configuration because they are interconnected and depend on each other. 

 

Setup RENDER.COM

Proper RENDER configuration, requires creating 2 distinct Web Services at RENDER.COM, one of the service would be our PREVIEW container, and the other service will be our production server.

 

Setting Preview Web Service at RENDER

1. Login to your RENDER account.

2. Click + ADD NEW and then select Web Service

3. For Source Code select Existing Image, we shall be using a ready DOCKER image here.

4. Under Image URL insert: gcr.io/cloud-tagging-10302018/gtm-cloud-image:stable

5. Click Connect

6. On next screen name your service e.g. gtm preview

7. Select your instance type. For testing purposes FREE option is OK, once you're happy with how things work you can scale for production with ease

8. Critical part of the configuration here is setting ENVIRONMENT VARIABLES correctly. There are 3 important variables, that need to be set here, they include CONTAINER_CONFIG, PORT and RUN_AS_PREVIEW_SERVER (applies for preview service only)

a) For CONTAINER_CONFIG enter the config string that you copied earlier while creating Server-Side GTM container

b) PORT must be set to 8080

c) RUN_AS_PREVIEW_SERVER must be set to true.

If property set, Environmental variable should look like the image below

 

Once the service is created and running, you shall see the render-generated URL of your preview server e.g. https://gtm-XXX.onrender.com, this is important and required for the next step.

 

Setting Server Web Service

Now we shall repeat nearly the same process as the preview service, howerver with different ENVIRONMENTAL VARIABLES

1. Login to your RENDER account.

2. Click + ADD NEW and then select Web Service

3. For Source Code select Existing Image, we shall be using a ready DOCKER image here.

4. Under Image URL insert: gcr.io/cloud-tagging-10302018/gtm-cloud-image:stable

5. Click Connect

6. On next screen name your service e.g. gtm server

7. Select your instance type. For testing purposes FREE option is OK, once you're happy with how things work you can scale for production with ease

8. Critical part of the configuration here is setting ENVIRONMENT VARIABLES correctly. There are 3 important variables, that need to be set here, they include CONTAINER_CONFIG, PORT and PREVIEW_SERVER_URL (applies for server service only)

a) For CONTAINER_CONFIG enter the config string that you copied earlier while creating Server-Side GTM container

b) PORT must be set to 8080

c) PREVIEW_SERVER_URL must be set to the URL of the render-geneated preview service e.g. https://gtm-XXX.onrender.com (from the previous step)

9. Save service and deploy

 

 

With this RENDER configuration should be complete.

 

Linking GTM with RENDER

We now have to merge everything so it can work together. 

 

1. Go back to your Google Tag Manager account

2. Select your server-side container

3. Click Admin -> Container settings

4. Inside Server Container URL insert the URL generated by RENDER.COM for the Server Web Service. Somehting we struggled here with was making the mistake to insert the Preview service URL so be careful to insert the correct url. 

 

5. Save container settings

 

Using your own domain instead of render-generated domains

For reducing Ad-Blockers impact, it's often good idea to use your own domain instead of render-generated domains. This will ensure that blockers won't block the requests. The most common approach here is to create a new sub-domain of your own domain. For example if your domain is example.com, you can setup a new subdomain called api.example.com, then from your hosting provider: 

1. Remove any AAAA records from your sub-domain while configuring DNS. AAAA records map to an IPv6 address, and Render uses IPv4. These records can cause unexpected behavior for your custom domain.

2. Add the provided CNAME record in your domain’s DNS.

You can find more about configuration here - Custom Domains on Render

3. If you decide to use your own sub-domain, it is important not to forget to update the container server URL from the render-generated to your own.

 

 

Switching to server-side endponts

With this part, we're almost done however things are still not working as expected. Your client-side GTM snippet is still sending data to Google servers instead of your custom render server. To fix we need to make a change in our client-side GTM container. 

This artile presumes you're running our GA4 extension for Magento 2 but all the configuration explained can be done without using it.

 

1. Go back to your Google Tag Manager account

2. Select your Client-Side container, which is currently loaded on your website

3. Find the Google Tag and click Edit

4. Under Configuration settings add new parameter called transport_url 

5. For value insert your RENDER WebService Server URL (see below)

 

transport_url parameter changes the destination where your tags send data. With it, GTM snippet will no longer send the data to Google directly but to your web server at RENDER. This is one of the most important changes that need to be done.

 

Adding (verifying) CLIENT

One of the last steps which is often overlooked is verifying that server-side container has proper Client set. A client in a server-side GTM container is essentially the listener/decoder for incoming HTTP requests. Its job is to:

  1. Receive requests from sources like web browsers, apps, or other servers.
  2. Parse the request data (like query parameters, headers, cookies, JSON payloads).
  3. Translate it into events that the GTM server-side container can process.
  4. Without a client, your server-side container wouldn’t know what to do with incoming requests.

 

To verify client, follow the steps below

1. Go to your tag manager account

2. Select your server-side container

3. From the left menu click Clients

4. Make sure that in the clients list you see GA4 (this is usually automatically created for you). If GA4 client is there, then this step is complete as well.

 

VERIFICATION AND TESTING

We did a lot of configurations and now we need to make sure that everything is working. Verification and testing is important step to ensure that your server is accepting requests and forwarding them to Google servers, otherwise your data won't be transmitted and you risk losing valuable marketing data

 

1. Check if data is being sent to your server and not to Google

To check if data is routed to your own server at RENDER, use Chrome browser. When in Chrome, hit F12 to activate Developer Tools, then select Network tab to inspect all requests that are being sent by the browser. Initially you may see a lot of requests so use the filter field and insert collect?v=2 to show only GA4 requests. If everything is correct you should see your render server URL as shown below

 

2. Run GTM (server-side) container in Preview mode

To test which tags are firing and what requests are being received you can run GTM in Preview mode. The server-side Preview mode is a bit different compared to the one for client-side debugging. 

Under SUMMARY you shall see all requests that come from browsing your website, while in Preview Mode.

 

TROUBLESHOOTING

We've cried a lot :) and learned hard lessons so we'll share them here to spare you the desperation. 

 

1. Running Preview mode throws 502 error at RENDER.COM

If you are running a HOBBY plan at RENDER, services go asleep after ~15 minutes. Then when you run GTM in Preview mode (server-side) container, the server web service will awake BUT the Preview service won't start automatically and this will result in 502 error. To fix this, restart the preview service at RENDER, then way a minute or so and try to run GTN in Preview mode again, it should work correctly. now.

 

2. No tags are firing

If you don't see any tags firing, then you should consider the following

a) Check if you have ANY tags created in the server-side container

b) Do not expect client-side tags to fire automatically, client-side and server-side tags are separate collection of tags, so you may need to configure your server-side container with all the tags that you want to fire.

 

Extensions for Magento

Anowave is an extension developer for Magento 1.x and Magento 2.x platforms. We provide a wide range of premium extensions for our in-house and public clients. The extensions we offer extend the capabilities of Magento and provide bespoke functionality. They also fill some gaps in the functionality provided by the base platform and help customers choose Magento as their preferred eCommerce platform.

The extensions we offer are part of our full-range Magento service, which also includes a Premium Helpdesk where customers can speak with actual software engineers and have their issues resolved without hassle. Premium-labeled modules also include free installation, configuration, testing, etc.