How to use same origin through Cloudflare

Google has changed the preferred way of mapping a custom domain for the server Google Tag Manager container. Instead of using a subdomain (like sgtm.example.com) they encourage using the same origin (like example.com/sgtm).

With the same origin custom domain for sGTM, you will have the main benefit of server-side tagging - setting up first-party cookies. And with the tagging server using the same origin domain, you do not need to configure any additional settings to prolong cookies. However, mapping the same origin will be more complicated than configuring a subdomain.

Before you begin

• For this setup to work, all your site traffic must be proxied through Cloudflare. The functionality of CF Workers will allow you to proxy sGTM requests as well. If you cannot proxy your site's traffic, please consider another option for extending the life of cookies, such as Stape’s Cookie Keeper.
• At Cloudflare, you must use SSL/TLS in Full mode. Otherwise, same origin proxying may work via a redirect with a 301 status, which is incorrect. If you cannot set Full in the SSL/TLS settings, you can proxy requests to the Stape subdomain instead of your own.
• Keep in mind that for some tags to function properly, your CDN should not apply caching or query string sorting. For example, Cloudflare’s Query String Sort or URL normalization will interfere with the sendPixelFromBrowser API utilized by some server-side tags.

Setup guide

1. Create a worker in Cloudflare.

2. Add worker name.

3. In the worker settings, click Edit code and create a js similar to the screenshot below, where:

• /metrics/ - is a path you choose for your server container.
• https://sgtm.stape.video/ - is your tagging server URL. There are two scenarios:
  • [Not recommended] The default tagging server URL that was provided to you by Stape. In this case, the tagging server URL will look like https://wapdsrl.ca.stape.io.
  • [Recommended] The custom subdomain you’ve set up inside the stape.io User Space. Using a custom subdomain when configuring a worker is recommended since it gives two benefits: loading gtm.js and gtag.js from a custom path using the Custom Loader power-up, which makes tracking scripts unblockable and allows the setting of long-lived first-party cookies. If you use a custom subdomain for your same origin tagging server URL, ensure you've added a custom domain to your sGTM container on Stape and created DNS records as described here. Do not use Own CDN with the same origin domain.

export default { async fetch(request, env, ctx) { let {pathname, search, host} = new URL(request.url); pathname = pathname.replace('/metrics/', '/'); const domain = 'sgtm.stape.video'; let newRequest = new Request((`https://` + domain + pathname + search), request); newRequest.headers.set('Host', domain); return fetch(newRequest); }, };

Deploy and save the changes.

4. Go to your sGTM worker → click Settings → Domains & Routes and create a new Route. Add the URL you use for server GTM ending with * (for example, stape.video/metrics*) and select your domain in zone selection.

5. Now, click three dots next to your domain name → Configure Rules.

6. Click Create rule → Configuration Rules:

• Specify any understandable rule name, e.g., sGTM same origin.
• Custom filter expression.
• URI Path starts with /metrics (change to your origin if you’re using a different one.)
• SSL → select the option Full.

Deploy the Rule.

7. Go to Rules → Overview → Create Rule → Request Header Transform Rule:

• Enter a descriptive rule name, e.g., sGTM same origin.
• Custom filter expression.
• URl Path starts with /metrics (change to your origin if you’re using a different one.)
• Set a static header name X-From-Cdn with the value cf-stape.

Save the Rule.

Custom Loader

Once the same origin setup is done, we also recommend updating Custom Loader for ad blocker protection and implementing it on your site. Don’t forget to specify your Same Origin path in it.

For more information, see our guide on Custom Loader.