How to load server-side tagging via a path on your website

Google’s product continues to evolve relentlessly. Until recently, setting up a server-side tagging environment was best achieved through a subdomain. This approach allows you to create first-party cookies required by your tools, which have a longer lifespan than third-party cookies. As a result, you collect more data, and the data remains significantly more reliable.

However, with Safari’s new measures, more is now required beyond simply creating your own domain to extend the lifespan of cookies. Cookies set from a subdomain with a different IP address are now only retained for 7 days.

Different Options

Google has recently updated its recommended method for linking a custom domain to the Google Tag Manager server container. Instead of using a subdomain (e.g., sgtm.2manydots.nl), it is now advised to use the same origin domain (e.g., 2manydots.nl/data).

By using the same origin domain for sGTM, you gain the primary benefit of server-side tagging: the ability to set first-party cookies. Additionally, since the tagging server uses the same origin domain, you don’t need extra configurations to extend the lifespan of cookies. However, configuring a path on the same domain is significantly more complex than setting up a subdomain.

With this latest update, there are now multiple ways to load your server-side tagging environment on your website. Let’s walk you through these options.

Option 1: Subdomain

This was the initial method recommended for server-side tagging. In this approach, you host your tagging server on a subdomain. All data is processed here and forwarded via an API to the desired services, such as Google Analytics 4 or the Facebook Conversions API.

Make sure the subdomain for your server-side tagging container is different from your website’s subdomain. For example, if your website is accessible at www.2manydots.nl, choose a different subdomain for your server container, such as sgtm.2manydots.nl. The diagram below illustrates how this setup works.

Option 2: Same Origin (Path)

This is Google’s newest method. Instead of configuring a subdomain, you link a path to the tagging server. You can choose any path you like for this purpose. For example, in our case, it could be www.2manydots.nl/data. The specific path doesn’t matter as long as it’s not already being used on your website.

We’ll guide you through the process of setting this up yourself, provided you already have a server-side tagging environment. To configure this, you’ll need the following:

• A server container in Google Tag Manager
• A tagging server
  • Still using App Engine? Ensure your tagging server is newer than version 2.2.0.
• A CDN (e.g., Cloudflare) or load balancer capable of forwarding the path.

Stap 1: create a worker

There are multiple ways to configure this, but we’ll use Cloudflare for its simplicity. With Cloudflare, setting this up via a worker is incredibly straightforward. However, keep in mind that workers are not entirely free. The free plan allows a maximum of 100,000 requests per day.

Create a new worker and assign it a name of your choice.

Step 2: configuring your worker

Now it’s time to configure your worker. We’ve already prepared the code for you. There are two key decisions you need to make:

1. Choose your path.
   For example, /data. Update this value within the parentheses at ‘const newPath’.
2. Choose where to link your worker. Update this value within the parentheses at ‘const newDomain’.
   • Option 1: Link to the default Google Cloud URL. We don’t recommend this option because it won’t allow your Google Tag Manager environment to load correctly.
   • Option 2 (Recommended): Link to your subdomain URL. For example, in our case, the subdomain is sgtm.2manydots.nl. We strongly recommend selecting this option for the best performance.

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});
async function handleRequest(request) {
  const url = new URL(request.url);
  const { pathname, search } = url;
  // Specify the path you want to modify and the new domain
  const newPath = pathname.replace('/data/', '/');
  const newDomain = 'https://sgtm.2manydots.nl';
  const newUrl = newDomain + newPath + search;
  const response = await fetch(newUrl, request);
  
  // Return the response from the fetch request
  return response;
}

Step 3: trigger the worker on your chosen path

Once you have saved your worker, it is important to trigger the worker on the path you have chosen. You do this under the ‘Triggers’ tab in your created worker. Disable the automatically created path.

Create a new route. Enter the following here: www.jouwwebsiteurl.nl/gekozenpad/*

• www.jouwwebsiteurl.nl = The subdomain that your website runs on and GTM will reside on.
• /chosenpath/ = Your previously chosen path
• = RegEx that everything will be picked up next.

Step 4: Adjust server URL in Google Tag Manager

Adjust the configuration of your server container in Google Tag Manager so that it can recognize the path and process requests correctly. Have you done this? Then click the preview button and start a debug session to see if it works. Also be sure to adjust your variables, especially if you’re loading your GTM container through a subdomain.

Need help?

Have you followed all the steps? Then you’re all set! All your data will now flow through your website’s (sub)domain and chosen path directly to the tagging server. Since the tagging server uses the same domain as your website, there’s no need for additional configurations to extend cookie lifespan.

If you’re stuck or need assistance, we’re here to help. Our team has successfully completed over 100 server-side tagging implementations and is always ready to tackle new challenges. Check out our server-side tagging page or feel free to contact us for more support.