Server-side Google Analytics 4 for Shopify

1.1 Select your GTM account → Click Admin → Click + next to the Container name.

1.2 Add Container Name → Under Target platform, choose Server. Click Create.

1.3 Choose Manually provision tagging server. Copy your container config. We will need it in the following steps.

2.1 Go to Stape and create an account or log in. You can try our service for free and explore the benefits of Stape hosting for the GTM server.

2.2 Press the button Create container in the top right corner.

2.3 Enter your container details:

Then click Create Container.

2.4 Choose a plan for your container. You can start with a Free plan. Click Continue with a Free plan.

You will see the status of your container, container config, and plan name. It takes several minutes to deploy a server container. Please reload the page to update the status. If the setup was done correctly, you should see the status Running.

The critical feature of server-side tagging is setting first-party cookies, which requires a server-side setup. You need to use a custom tagging server URL or domain to enable this feature. The custom tagging server URL or custom domain should share the same domain as your website.

Due to cookie restrictions, configuring custom domains for sGTM has become more complex. ITP affects user tracking in Safari and Firefox.

To improve your tracking, you need to set up a custom domain. It will help you prolong your cookie lifetime in all browsers.

Let’s discuss ways to configure a custom domain for your sGTM tagging server URL.

There are three ways to set up a custom domain:

However, the “Same origin” method is technically advanced. You'll require a CDN or a load balancer to configure a same origin domain.

If you can't configure the same origin domain, we have solutions for prolonging cookie lifetime in Safari: Own CDN and Cookie Keeper.

By default, when you add your custom subdomain to your Stape container, it will be verified by the CNAME record.

Below is an example of a custom subdomain setup:

Сhoose your container on Stape, scroll down, and click Add custom domain.

Add Subdomain name - it can be any name that works for you, just be sure to avoid using phrases specific to advertising or tracking: ad, gtm, stgm, tracking, analytics, metrics, stape, gtag, etc.

A Content Delivery Network (CDN) distributes your website's assets across a global network of servers to reduce latency and improve load times for users in different locations. It is useful if your audience is geographically distributed or if you want to improve cookie tracking and data accuracy.

By default, the CDN is disabled, which means JavaScript files (like gtm.js, gtag.js, and analytics.js) are served directly from the server location where your sGTM container is hosted. Effectively, it bypasses both Stape Global CDN and Own CDN options and gives you a direct, unproxied connection between your site and the sGTM container.

To enable the CDN, click the Add CDN toggle and select one of the following options:

 Next, in the How to connect section, there are two ways of connecting a custom domain to your container:

The easiest way to connect domains. Log in with your DNS provider details via Entri, and give us one-time permission to connect your domain. That's it, you can proceed directly to Step 5 to verify your domain; no manual configuration is required.

With this option, you have to add DNS records manually to your hosting provider to connect your subdomain to Stape.

After you add a custom subdomain to your container, you will see DNS records that should be created to verify the custom domain. The DNS record depends on the server location and the CDN option you choose. In the next step, we show how to add DNS records.

By default, subdomain verification is performed with CNAME records, but you can verify your subdomain with A and AAAA records if you need to (usually in cases when you need to avoid adding duplicated records).

We will cover both options below with a step-by-step guide on how to create records using Cloudflare. But you can use any other provider.

Once you've entered the DNS records to your DNS provider, return to the Stape container page where you've been configuring the custom domain and click Verify.

Wait for Stape to finish verifying your custom domain (when the container status bar changes from Verifying to Ready). Usually, it takes 2-3 hours to verify the custom domain. For some DNS providers, verifying records might take up to 72 hours. We will email you once the custom domain is verified or any error is detected.

If you face any problems with domain verification, please follow our guide on troubleshooting a custom domain.

Go to your Google Tag Manager server container → Admin → Container Settings → change Tagging server URL to your subdomain.

Update the script

If you use a custom domain, updating the Web GTM script on your website is highly recommended. This tweak will load gtm.js from your domain. To do so, replace the default domain googletagmanager.com with the custom domain you set up in the previous step.

Alternatively, you can automate this process with the Custom Loader power-up. Instead of manually editing the GTM script, Custom Loader generates a ready-to-use code snippet that loads GTM and GA4 scripts directly from your custom domain. This saves your time, makes your tracking scripts more resilient to ad blockers, and assures all cookies are treated as first-party.

Custom Loader modifies gtag.js and gtm.js loading paths to resist ad blockers and ITPs, potentially increasing data volume by up to 40%.

4.1 Find and copy your web GTM ID in GTM. To find GTM ID log in to your Google Tag Manager account and open a Web GTM container. In the top right corner (next to the Submit and Preview buttons) you’ll see some short text that starts with "GTM-" and then contains some letters/numbers. 

 4.2 Open your sGTM container on Stape →  Click Power-Ups.

Find Custom Loader and click Use.

4.3 Add the following settings:

Domain - from the list of domains connected to your container, select the necessary ones. 

Web GTM ID - add web Google Tag Manager ID. Check out how to find web GTM ID in our guide.

GA4 ad block bypass - enables bypassing adblockers' impact on the GA4 tracking code. Note that this setting will affect all container domains. Be sure to debug both the web and server GTM containers after enabling this toggle.

Same Origin Path - if you are using same origin approach for configuring custom domain, please specify the proxy path for requests.

Platform - the Custom Loader code differs for each platform. Select "Shopify".

4.4 Once you’ve entered all the Code & Setup information, click the Generate button.

4.5 Follow the instructions on the Configuration panel to set up Custom Loader in your app.

5.1. Install Stape Conversion Tracking app in store. 

5.2. In the Generate tab are all the settings related to installing the GTM snippet on all pages of your Shopify shop.

Here you need to specify your GTM WEB container ID.

It is extremely important to use your own subdomain for first party cookies to work correctly and for tracking to work in general. If you do not already have a subdomain added to your sGTM container, you can use this guide to add it.

An optional parameter, but its use is highly recommended to increase protection against ad blockers. Specify here your Stape container identifier. Follow this guide to find Stape container identifier.

You can learn more about Cookie Keeper power-up on this page. This allows you to minimize the impact of the latest ITP restrictions. Before activating this feature, make sure you have it enabled in Stape, in your container.

Here you can take the GTM snippet to install it on pages that are outside of your Shopify theme (such as pages made by third-party apps like Zipify).

5.3. In the Data Layer tab you can find the data layer events to activate and configure. The second box gives you control over whether event names get the _stape suffix to prevent any clashes in GTM. If it’s off, events keep their normal names.

Here you can find a complete list of events and their payload which is added via the Stape app. 

Data layer activation:

In Customer privacy section, under Permission spoiler, please make sure to select ‘Not required’. The code snippet only generates dataLayer, it does not set any cookies or report any data to third-party.

5.4. Webhook events are configured in the Webhook tab.

Note: the problem with webhooks on Shopify is that they don't contain any cookie data which is crucial for tracking any platform, so using webhook events is only recommended as a last resort if you for some reason can't track it online.

This tab is where the webhook events are configured.

To activate a webhook you need to activate the checkbox, specify the URL of the server GTM container and /path where the webhooks should be sent.

You can subscribe to webhooks when a new order is created or when a refund is made on an order.

There can be two scenarios:

6.1.1 Add your server container URL to Google Tag settings. In the configuration settings, add the configuration parameter server_container_url and add your tagging server URL as a value. 

6.1.2 Create Google Analytics 4 client in server GTM container. To do so, open the clients’ section → Create New client → Select client type Google Analytics: GA4 (Web) → Add client name and click Save. 

You can also read more on region-specific parameters in our blog.

6.1.3 In the server GTM container create a new tag with the tag type Google Analytics: GA4

6.1.4 Add Measurement ID and Event Name.

Measurement ID -  follow this guide to find GA4 ID. You can add it as variable or if the event came from a GA4 web tag, you can leave this field blank to inherit the measurement ID of the event.

Event Name - the event name to send to Google. See the recommended events for more information. If this field is blank, the value of the event_name parameter will be sent.

6.1.5 Click Triggering and configure a trigger with the trigger type Custom that will fire every time when client name equals GA4 (or the name of the GA4 client that you’ve specified on the step 2.b) → Click Save. 

6.2.1  Inside the Web container, create a new tag of the tag Type Google Tag. Add your Google Tag ID.

Add trigger to GA4 tag. It usually should trigger on all page views. 

You can also create a Google Tag: Configuration Settings variable that will predefine Google Tag settings if you need to use multiple Google Tags on your website and do not want to add settings for each tag manually.

These parameters can, for example, define whether you want to send a page view event every time a Google Tag triggers, set UTM parameters, set client ID, etc. There is a list of standard Google Tags configuration parameters.    

6.2.2 To set up the GA4 event tracking, go to the tags section and create a new tag with the tag type Google Analytics: GA4 Event. Add your GA4 ID and the event name; there is a list of standard event names. 

6.2.3 Go to your Google Tag Manager Server container. Click Clients and New.

6.2.4 Choose Google Analytics: GA4 (web) and click Save.

6.2.5 Go to Tags and click New.

6.2.6 Choose Google Analytics: GA4.

6.2.7 Add Measurement ID and Event Name.

Measurement ID -  follow this guide to find GA4 ID. You can add it as a variable or if the event came from a GA4 web tag, you can leave this field blank to inherit the measurement ID of the event.

Event Name - the event name to send to Google. See the recommended events for more information. If this field is blank, the value of the event_name parameter will be sent.

6.2.8 Click Triggering. 

6.2.9 Create triggers for the tag. Client name should equal GA4. Example:

Click +

Choose Custom type → click Some events → choose Client Name in built-in variables →  set Equals GA4 (the name of your GA4 client) → click Save. 

6.2.10 Open web and server GTM debuggers and test the setup. 

Open the Server container preview mode and check that you see GA4 requests. Publish updated inside server and web Google Tag Manager containers. 

To compare revenue with actual margin, POAS Data Feed can add profit-based values to the purchase data you send to GA4.

Add the following record inside your Google Tag in the web Google Tag Manager container. 

Configuration parameter: server_container_url

Value is your domain name in Stape admin

We suggest starting with the Tag Manager preview and debug mode to ensure that your tags are triggering when they should. GTM debug tool will show you which tags and events were added to the site and whether they fired or not on particular pages/triggers.

Tag manager server container debug mode works similarly to web debugger. Just click the preview button on the top right corner. Then, navigate to the different pages and click on the button or perform events set up in the server container.

Return to the Tag Manager debugger and check which tags and events were triggered and if all required parameters were sent to the dataLayer. If everything works correctly, we can move to the next step.

GA4 has it's debug view that will show you all events, event parameters and user data that we processed by GA4. To find GA4 debugger click Configure → Debug view. 

To ensure that requests are sent from a custom tagging URL, you’ll need to dive deeper into the developer’s zone. We’ll need Chrome or Safari developer tools here (you can use other browsers as well).

On Mac, you can access the developer tool by clicking command+option+I or click the right mouse button, then Inspect.

Once you’ve opened the developer tools, go to the Network tab and refresh the page. Use the filter and type collect to find GA4 requests. Click on a GA4 request and check the Request URL and parameters on the right to confirm that hits are being sent to your server-side tagging domain (the same URL configured in the server container and GA4 tag/variable).

Keep in mind that you may not see collect requests if GA4 ad block bypass is enabled. In that case, it’s recommended to look for requests directly via your server-side subdomain (for example, sst.testdns.io) instead of relying on the default collect filter.

Note: cookies will be extended only if you are using a custom subdomain inside the tagging URL. For instance, your website URL is example.com. Then, the custom domain for tagging URL should look like gtm.example.com.

Go to the application tab inside the developer tool that you’ve used in step two. Click Storage → Cookies. On the right side, you will find cookies named FPID; check the date in the column “expires”. This way, cookies should be extended up to 2 years. I am writing this post in February 2021, and my cookie will expire in February 2023. If you are not using server-side tracking and a custom tagging URL located under your main domain, Safari will decrease your cookie lifetime to 1 or 7 days. If you see that cookies were not extended, go to the GA4 client inside the server container, click more settings and check what Server Cookie Settings look like on the screenshot below. Or make sure that you are using a custom tagging URL that looks like gtm.yourdomain.com.