Server-side Google Analytics 4 for Shopify

Google Analytics 4 (GA4)  became the most popular web analytics tool after Universal Analytics was switched off in the summer of 2023 for most users. So if you had planned on implementing GA4 on your Shopify store, setting up server-side Google Analytics 4 might be an excellent choice since server-side tracking is more adapted to modern tracking restrictions.

Server-side Google Analytics 4 will help trace user behavior more accurately and, in turn, make better decisions geared toward improved customer experience and eCommerce success. 

This blog post will walk you through setting up server-side Google Analytics 4 using the Stape server GTM app. 

The difference between new and old versions of Google Analytics is huge since Universal Analytics is sessions based, while Google Analytics is event-based. And underway the feedback of users who started implementing GA4 could be better since the product is relatively new, which means it needs some features and has some bugs. 

Together with the new version of Google Analytics, another main change in the world of tracking is server-side tracking. Server-side Google Analytics 4 (GA4) has several benefits over traditional client-side tracking. 

Here are some of the key benefits of server-side tracking:

Overall, server-side Google Analytics 4 provides more accurate, secure, and customizable tracking options that can help you improve your analytics insights and make better business decisions.

The first step when setting up Google Analytics 4 for Shopify is setting up the server Google Tag Manager container and installing Stape Server GTM App. Our app helps to:

1. Set up server Google Tag Manager container on Stape.

2. Add and configure the Stape Server GTM app for Shopify.

The purpose of the Stape Server GTM app  is to simplify the process of setting up the server Google Tag Manager and delivering data to server GTM. Our app can work either with stape.io hosting for server Google Tag Manager or with any other, but the plugin's custom loader and cookie keeper features only work when using stape.io hosting. 

2.1. Install Stape Server GTM App in store. 

Activate the app in Sales channels → Online Store → your active theme → Customize button → App embeds tab → activate Stape server GTM app and click Save.

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

2.3. In the Data Layer tab you can find the data layer events to activate and configure.

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.

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

Here are some useful blog posts we have about using and debugging webhooks:

There can be two scenarios:

If you already configured Google Analytics 4 inside your web GTM container, all you need to do is:

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

b. Create Google Analytics 4 client in server GTM container. In most cases, it already exists straight away. But if not you can create it.

To do so, open the clients’ section → Create New client → Select client type Google Analytics: GA4 (Web) → Add client name and click save. 

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

d. 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. You can leave this field blank and the same event_name will be used as in your GA4 tag on the web container.

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

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 standard ‘Initialization - All Pages’ trigger. 

Google tag itself will generate standard GA4 events like page_view, session_start, user_engagement, etc.

2.2. Setting up additional ecommerce events. 

Each event you want to configure must be configured with a separate GA4 event tag, use its own trigger and have its own payload.

Below is an example of configuring the tag for the add_to_cart event with standard parameters. You can repeat this for any other events you want to configure.

You can also use any custom events if you want to track them in your GA4.

Stape Shopify app generates a data layer with standard ecommerce events (if you have activated this option in the app). You can view each event in the GTM preview mode of the web container to see if it is working correctly and its payload, but also here is the documentation for each event: https://help.stape.io/hc/en-us/articles/13693436542877-Shopify-App-dataLayer

2.2.1. Set up trigger.

Go to triggers section in your web container → create new trigger with type ‘Custom Event’ → specify trigger name ‘add_to_cart_stape’ according to the Stape Shopify App dataLayer doc.

2.2.2 Setup variables for GA4 events payload.

You can find the standard and mandatory payload ecommerce GA4 events in the official documentation: https://developers.google.com/tag-platform/gtagjs/reference/events

A minimum of three parameters need to be sent with each ecommerce event:

All of them are available in the data layer that generates the Stape Shopify app.

To add these parameters to an event, you must first create variables for them.

To do this, go to 'Variables' section in your web container → create a new one → select 'Data Layer Variable' type → specify the path to the required value as per how they are in the data layer. 

for value path: ecommerce.value

for currency: ecommerce.currency

for items: ecommerce.items

Сreate these three variables:

2.2.3 Set up GA4 event tag.

Go to the tags section in your web GTM container  and create a new tag with the tag type Google Analytics: GA4 Event. 

In the tag, specify:

Similarly, configure any other events you want to track in your GA4.

In the 'Clients' section, check if you have a GA4 client there. If not, create new one:

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

3.2. Create GA4 tag on server GTM container.

Go to Tags and click New.

Choose Google Analytics: GA4.

Standard tag settings:

Measurement ID - Leave blank, the same measurement id that is in your web events will be used

Event Name - leave blank, the same event name you use in web tags will be used.

3.3. Add trigger.

Click Triggering. 

Create triggers for the tag.

Client name should equal GA4. 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. 

Done, now all your GA4 events will come from your web container to the server container and further sent to GA4.

1. Open the web and server GTM containers preview and click through your site, trigger your events. Inside the web GTM container preview, you should see that GA4 tags trigger; in the server GTM container preview, you should see GA4 requests claimed by GA4 tags.

If you do not see GA4 requests inside the sGTM, check that you’ve correctly added tagging server URL inside the GA4 configuration tag in the web GTM container. 

You can also open the website console and check GA4 requests. The correct scenario is when GA4 sends requests to you tagging the server URL. You can check it by filtering requests by GA4 ID in the network tab and ensuring the request URL contains your tagging server URL. 

2. Another way is to open the GA4 debugger and check what event and user data GA4 sees. 

If web + server GTM and Google Analytics 4 debuggers show correct data, publish the configuration. 

Implementing server-side Google Analytics 4 for Shopify is an effective method to enhance your business’s online presence. It offers many exciting features that allow you to understand and track user behavior more accurately. 

With this blog post, setting up the connection between Google Analytics 4 and Shopify via the server GTM app can be quickly achieved. The few simple steps outlined here make this process both easy and efficient.  

Doing so will allow you to take careful advantage of all its benefits with minimal effort. So why wait? Start optimizing your store today - feel free to reach out if you need help understanding or implementing how to set up server-side Google Analytics 4 for Shopify using the server GTM app.