Stape
Search
Try for free

Server-side Google Analytics 4 for Shopify

Updated
Jun 13, 2024
Published
Mar 15, 2023
Also available in

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

Understanding the benefits of using server-side Google Analytics 4

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:

  1. Improved data accuracy: Server-side tracking ensures data is collected and processed. It eliminates discrepancies caused by ad blockers, client-side scripts, and other monitoring issues.
  2. Better user privacy: Server-side tracking allows you to maintain user anonymity, protecting users' personally identifiable information (PII) and adhering to privacy regulations like GDPR and CCPA.
  3. With server-side tracking, you have greater control over the data you collect and how you use it. For example, custom data streams can track specific events, user behavior, and other data points.
  4. Integration with other data sources: Server-side tracking can be integrated with other data sources, such as customer relationship management (CRM) systems, to create a complete view of user behavior and improve analytics insights.

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.

Configure Stape server GTM app for Shopify

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:

  • Add web Google Tag Manager script to all pages of the website.
  • Add a custom domain to the GTM script.
  • Set up a custom loader (for stape users only).
  • Create data layer on standard ecommerce events
  • Send purchase and refund webhooks to the GTM server.

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.

install Stape Server GTM App in store. 

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

In the Generate tab are all the settings related to installing the GTM snippet on all pages of your Shopify shop
  • GTM web container id

Here you need to specify your GTM WEB container ID.

  • Custom domain

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.

  • Custom loader

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.

  • Cookie Keeper

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.

  • GTM snippet block

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.

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

Data layer activation:

  • Activate the 'Add ecommerce Data Layer events' checkbox.
  • Save changes.
  • Copy the code for custom pixel in the box below on data layer tab and follow the instructions to add and activate it.

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.

Webhook events are configured in the Webhook tab

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:

3. Send data to Google Analytics 4 with the server Google Tag Manager container.

There can be two scenarios:

1. If you already have GA4 events configured in your web GTM container and you just want to switch them to work through the server side.

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. 

Add your server container URL to Google Tag settings

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. 

Create Google Analytics 4 client in server GTM container

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.

Event Name - the event name to send to Google. 

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. 

Click Triggering and configure a trigger with the trigger type Custom

2. If you do not have GA4 configured, follow the steps bellow:

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. 

create a new tag of the tag Type Google Tag

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.

create new trigger with type ‘Custom Event’

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:

  • value
  • currency
  • items

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:

  • Measurement ID: your GA4 measurement id
  • Event name: add_to_cart (or other if you are setting up another event)
  • On GA4 event tag ‘Event parameters’ section add three parameter: value, currency and items. Use the variables you created in the previous step as the value for them.
  • Add to the tag the add_to_cart_stape trigger we created earlier.
Google Analytics: GA4 Event

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

3.1. Configuration in the server GTM container.

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

GA4 client

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

GA4 client

3.2. Create GA4 tag on server GTM container.

Go to Tags and click New.

Create GA4 tag on server GTM container

Choose Google Analytics: GA4.

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. 

adding trigger to GA4 tag

Create triggers for the tag.

Client name should equal GA4. Click +

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. 

Equals GA4 (the name of your GA4 client)

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

Verifying the setup is complete and correct

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.

Verifying the setup is complete and correct

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. 

Verifying the setup is complete and correct

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

Verifying the setup is complete and correct

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

Conclusion:

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.

Tagged with:Shopify

Host your GTM server at Staperight now!