Question 1

How to use same origin through Cloudflare

Accepted Answer

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.

Question 2

Before you begin

Accepted Answer

- 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.

Question 3

Setup guide

Accepted Answer

1. Create a worker in Cloudflare: open the Compute & AI tab → Workers & Pages → click Get started next in the Start with Hello World! option.

2. Add worker name → click Deploy.

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.work/ - is your tagging server URL. There are two scenarios:

export default {
    async fetch(request, env, ctx) {
        let {
            pathname,
            search,
            host
        } = new URL(request.url);
        pathname = pathname.replace('/metrics/', '/');
        const domain = 'sgtm.stape.work';
        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 * (in our example, it's stape.work/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 contains /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 header.
- Custom filter expression.
- URl Path contains /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.

7.1. If you are not using your own subdomain and are proxying requests to the standard Stape subdomain, you also need to add the X-Stape-Host header with the value of the host where the events are taking place (for instance, X-Stape-Host: www.example.com).

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

- Enter a descriptive rule name, e.g., sGTM same origin Stape host.
- Custom filter expression.
- URl Path contains /metrics (change to your origin if you’re using a different one.)
- Set a static header name X-Stape-Host with the value of the host of events (in the case of our example, it's stape.work).

Save the Rule.

Question 4

Custom Loader

Accepted Answer

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.

Question 5

Testing your Same Origin setup

Accepted Answer

After you create your Cloudflare Worker and route, check that everything is configured correctly by sending a single test request using a GA4 tag.

1. Create a GA4 tag in your web GTM container.

Add your Measurement ID (any ID works for testing) and set the server_container_url to the same-origin path you configured (in our example, it is https://stape.work/metrics).

2. (Optional) To streamline testing, add your same-origin path (in our case, https://stape.work/metrics) to your server GTM settings. Click Admin → Container Settings → enter the path under Server container URLs.

3. Open Preview mode in both your web GTM container and your server-side GTM container. If everything is set up correctly, the server container should open in preview at the new path you created.

If, for some reason, the preview doesn’t open at the new path, you can manually enter it in the preview window’s URL. If the URL doesn’t work, potential solutions are:

- In Cloudflare’s DNS Records, make sure that requests to your main domain are proxied through Cloudflare.

- In SSL/TLS, check that the encryption mode is set to Full. If it isn’t, click Configure, select Full, and click Save. This change may take up to 24 hours, so give it enough time to update.

4. Trigger a page view on your site. In the server container preview, you should now see an incoming page_view request from your website’s real domain.

How to use same origin through Cloudflare

Before you begin

Setup guide

Custom Loader

Testing your Same Origin setup

Related articles