Server-side Google Analytics 4 for Shopify

Google Analytics 4 will be an industry standard for web analytics within the next few months since Google is sunsetting Universal Analytics. 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 4Copy link to this section

Google will stop supporting Universal Analytics from 1 July 2023. As a result, all users will be forced to switch to a newer version - Google Analytics 4.

Google has already started automatically converting GA3 (or Universal Analytics) properties to GA4, forcing their clients to begin adapting GA4. 

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 ShopifyCopy link to this section

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).
• Send event data to the web GTM data layer.
• Send user data to the web GTM data layer.
• Send purchase and refund webhooks to the GTM server.

1. Add Stape Server GTM App. 

2. Enable the checkbox Insert GTM snippet. When enabled, the app will add a web Google Tag Manager script to every website page. 

Proceed with further configuration:

• Add WEB Google Tag manager ID.
• Add a custom domain you are using for the server GTM container. For stape users, it can be a subdomain under the stape.io domain or a subdomain within your site domain. We recommend using a custom domain in the same hierarchy as your site since you will be able to set first-party cookies in this case. Follow this guide to find or set up a custom domain on stape.

Once done, you will have a web GTM script added to all pages of the Shopify store, server GTM container set up, and use a custom domain and custom loader if you’ve configured those. 

3. On the second tab of the Stape Server GTM App, you can configure it to send e-commerce events and user data to the Data Layer. Unfortunately, the app can not send e-commerce events on the checkout since Shopify does not allow access to the checkout. 

The list of e-commerce events:

• Collection View
• View Item
• Add to cart
• Begin Checkout
• Add payment info
• Purchase

User data:

• Email
• First name
• Last name
• Customer ID

4. On the third tab, you can configure the app to send purchase and refund webhooks to the server GTM container. Using webhooks is an excellent way of configuring pure server-side tracking without relying on web scripts, data layers, etc. For example, you can track purchases server-side vs. web in parallel. Check this guide for more detailed information on configuring webhooks in sGTM. 

That’s it with configuring the stape app for Shopify and cloud servers for sGTM. Next, let’s move to configure Google Analytics 4 for Shopify.

Server-side Google Analytics 4 for ShopifyCopy link to this section

1. The key feature of server-side tagging is setting first-party cookies. You need to use a custom tagging server URL to enable this feature. Custom tagging server URL or custom domain should share the same domain as your website. For example, if your website domain is example.com, then the tagging server URL should look like ss.example.com. 

If you want to add a custom domain, open the sGTM container on stape, scroll to the domains section, type the domain name, and click Add domain. Once done, you will see DNS records that you should add.

 Below is an example of DNS setup for CloudFlare.

 1.2. Go back to the Google Tag Manager Server container -> Choose your server container -> Admin -> container settings -> paste tagging server URL.

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

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

In the section Configuration settings add the following parameters:

• Name: server_container_url
• Value: Enter the URL you've created

Add trigger to GA4 tag. Normally it 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 of the tags manually.

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

1.4. To set up the GA4 event, 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. 

You can create a Google Tag: Event Settings variable that will help to share event parameters across several GA4 event tags or Google Tags. It can be, for example, user or product properties, and there is also a list of standard parameters for event settings. 

1.5. Open Google Tag Manager Server container -> click Client -> create GA4 client and save it -> go to Tags and set up GA4 tag. Remember that GA4 automatically sends not only pageview but some other events. Inside Event Name choose variable {{Event Name}}. -> add trigger Client Name equals GA4.

2. Set up a pageview event. 

3. Set up e-commerce events. To ensure e-commerce events, product, and user data are set up correctly, open a web GTM container and check the data layer for each e-commerce event. For example, you might need to configure a data layer variable for an event or user data you must send to GA4. 

You must create custom triggers for each e-commerce event based on the data layer event.

Below is an example of the tag and trigger for the Add to cart event. The process of setting up all other e-commerce events is similar.

4. Open Server Google Tag Manager container. Add Google Analytics 4 client or ensure one is added. 

5. In the server GTM container create a GA4 tag. Add your GA4 ID, set the event name, and trigger. In my example, an event is variable, and GA4 server-side tag triggers whenever GA4 claims a request. 

That’s it with configuring server-side Google Analytics 4 for Shopify. Next, let’s move to testing and troubleshooting the setup. 

Verifying the setup is complete and correctCopy link to this section

1. Open the web and server GTM containers debugger and click through your site. Inside the web GTM container, you should see that GA4 tags trigger; in the server GTM container, 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 your 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. 

Conclusion:Copy link to this section

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.