How to set up server-side tagging on your Shopify store

Note: Stape has pre-built Google Tag Manager templates for Shopify that make setting up eCommerce tracking super easy. The templates come ready to track product views, add-to-cart actions, and purchases. Plus, we have a simple guide to walk you through installing and configuring everything, so you don’t need to be a tech expert to get accurate tracking set up on your store.

The standard configuration of server-side tagging is straightforward with the Stape Server GTM app for Shopify. The app will help you implement a modified gtm.js script to the Shopify store, send data to sGTM using webhooks, and transmit data layer pushes to the web container. 

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

2. Add and configure 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. 

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

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

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.

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:

• What are webhooks and their use in server-side tracking
• Debug incoming webhooks in Google Tag Manager server preview
• Server-to-server tracking in server Google Tag Manager

3. Send data to the server Google Tag Manager container. There are two most popular ways to do that:

• Google Analytics 4
• Stape Data Client

4. Configure tracking inside the server Google Tag Manager container. Most popular marketing and analytics tools already support server-side tagging and have tags for sGTM. You can find guides on our site to implement those, for example, Facebook CAPI, TikTok events API, SnapChat Conversion API, Google Ads server-side tracking, etc.

Besides, you can use sGTM to enrich sGTM data using Firestore write data or Google Sheets. Another helpful feature of sGTM is sending offline conversions to Facebook Offline Conversion tracking and Adwords Offline Conversions API. 

Debugging a GTM download

After activation or any changes, it is recommended to check if your container is actually uploaded to the site.

To do this, go to any page on your site, open your browser console and in the network tab filter by your subdomain/tagging server URL. You should see a request like on the following screenshot with a response status 200:

Debugging data layer checkout events

With events that happen before the checkout page everything works like on any other platform - you can launch a preview of your GTM web container and find there all the events you do:

The only option in Shopify to track events on checkout pages is to use the Shopify Pixel API so data layer events and GTM installation are implemented through this in our application. 

But because of the way it's technically implemented (all code from pixel api is rendered as a separate iframe) - you can't run GTM previews on those pages, although technically your GTM container will load there.

So unfortunately at the moment you can't debug your checkout events in preview mode. This restriction also applies to purchase events if you use Checkout Extensibility for order status page.

The only option for debugging checkout events in Shopify is to publish your configuration or changes on your containers and check network requests in the browser console.

This way you can check if all the events you have configured go away and if they contain all the payload you have configured for them.

To make it easier to find GTM requests, you can specify the url or part of url of your server container in the filter.