Step by step guide to set up server-side GTM(SGTM)

Server side architect picture from Google.

Today, we gonna talk about Server-side GTM. Why do we need SGTM? Is your site getting slowed down by tags, or if you want to control your data? SGTM might be the key solution to all these problems.

Table of Contents

What is Server-Side GTM?

GTM works by implementing tags (snippets of code) directly on your website. Which mean your website need to do a lot of work! It needs to capture data from your website and fire lots of javascript for each event and each user. On top of that, it also has a risk of leaking your data in the midst of sending firing the tags. Think of SGTM as a middleman between your website and the platforms where you send your data. It hold the data and decide which data to send to each platform also allow you to process the data in your server before sending them to all the various platforms.

Why Make the Switch?

Here's why server-side GTM is a game-changer:

Improved Website Performance: By offloading tag processing to a server, you reduce the workload on your website's browser, leading to faster page load times. Lesser JavaScript, faster processing.
Enhanced Data Privacy: With more control over data flow, you can better comply with privacy regulations like GDPR and CCPA. You can host your server in Europe, thus, complying with more stringent rules.
Increased Data Security: Server-side tagging provides an extra layer of security, making it harder for malicious actors and hackers to steal the data.
Better Data Accuracy: Reduce reliance on browser-based tracking prevention, leading to more accurate data collection. Cookies ain't gonna be an issue.
Greater Flexibility: Gain more control over how you collect, transform, and distribute data to different platforms.

Implementing Server-Side GTM: A Step-by-Step Guide

Ready to get started? Here's a simplified guide to implementing server-side GTM:

Step 1: Create a Server-Side GTM Container

Log in to your Google Tag Manager account.
Click on "Create Container".

Select "Server-Side" as the container type.
Enter a name for your container and choose the appropriate workspace.
Click "Create".

Step 2: Choose a Hosting Platform

You'll need a server to host your server-side GTM container. Here are some popular options:

Google Cloud Platform (GCP): Highly recommend to use GCP. There is an option to even auto provision the server for you. GCP offers a managed service called Cloud Run that is specifically designed for hosting serverless functions.
Stape: Stape is a platform that specializes in hosting server-side GTM containers. It might also be cheaper to use Stape than hosting your own server
Custom Server: If you have experience with server administration, you can set up your own server to host your server-side GTM container. You can use AWS or Linux or Window servers if you have the tech expertise.

Step 3: Configure Your Server

The specific steps for configuring your server will depend on the platform you choose. If you choose GCP that is auto setup, you can skip this step. However, the general process involves:

Creating a new project or function in your chosen platform.
Install or deploy the Server GTM to your cloud platform. There is a docker file in us-docker.pkg.dev/cloudrun/container/server-side-gtm --platform managed
.
Configure Domain: Once your container is running, you'll get a URL for it. But, for better organization and security, it's best to use a custom subdomain (like gtm.yourwebsite.com). You'll need to configure your domain's DNS settings to point this subdomain to your Cloud Run service.

Step 4: Set Up Data Forwarding

Set up a way to send data from your website or app to your server-side GTM container. This can be done using:

HTTP POST requests: You can use JavaScript to send HTTP POST requests to your server-side GTM container with the necessary data.
Server-Side Tagging Libraries: Some platforms offer libraries that can be used to send data to your server-side GTM container.

We will focus on HTTP POST requests in this guide. In general:

Website gather data
Website send the data to server side GTM
Server Side GTM process the data with your usual triggers and tags

Example: We want to track button clicks on a "Sign Up" button on our website.

Website code:

<button id="signup-button">Sign Up</button>

<script>
  const signupButton = document.getElementById('signup-button');

  signupButton.addEventListener('click', () => {
    // Gather data about the event
    const eventData = {
      event: 'button_click',
      button_id: 'signup-button',
      page_url: window.location.href,
      timestamp: Date.now()
    };

    // Send the data to server-side GTM via HTTP POST
    fetch('https://gtm.yourwebsite.com', { // Replace with your server-side GTM URL
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(eventData)
    })
    .then(response => {
      // Handle the response from the server (optional)
      console.log('Data sent successfully:', response);
    })
    .catch(error => {
      // Handle any errors that occur
      console.error('Error sending data:', error);
    });
  });
</script>

What's happening:

Event Listener: We attach an event listener to the "Sign Up" button. This listener waits for a "click" event.

Data Collection: When the button is clicked, we collect relevant data:

event: A name for the event ("button_click").
button_id: The ID of the button that was clicked.
page_url: The URL of the current page.
timestamp: The time of the click.

HTTP POST Request: We use the fetch API to send an HTTP POST request to our server-side GTM container.

URL: Replace https://gtm.yourwebsite.com with the actual URL of your server-side GTM container.
Method: We use POST to send data to the server.
Headers: We set the Content-Type header to application/json to indicate that we're sending JSON data.
Body: We convert the eventData object to a JSON string using JSON.stringify() and include it in the request body.

{
  "event": "button_click",
  "button_id": "signup-button",
  "page_url": "https://www.example.com/current-page", 
  "timestamp": 1671178100000 
}

The above is the JSON that is generated and sent to server side GTM.

Step 5: Configure Tags, Triggers, and Variables

In your server-side GTM container, you can create tags, triggers, and variables just like you would in a web container. However, you'll need to use server-side data sources and destinations.

Going back to the example, you can set up a trigger when event "button_click" happened and send to Google Analytics 4(GA4).

Step 6: Publish Your Server-Side GTM Container

Once you're satisfied with your testing, you can publish your server-side GTM container. This will make your changes live.

Key Considerations:

While server-side GTM offers numerous advantages, it requires some technical expertise to set up and maintain.
You may need to adjust your existing tracking implementations to work with the server-side setup.
Consider the costs associated with running a server for your GTM container.

Hope this have been useful!

A shameless plug here. I am an advertising professional with a mission to teach others about marketing technology. I’m putting Martech tutorials without a paywall.

If you enjoyed this article, please do consider to clap/follow me, or buy me a coffee here!

Cheers friends!