How to set up Shopify app

The standard configuration of server-side tagging for Shopify is straightforward with Stape's Conversion Tracking app. 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. 

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

Expand the collapse element below for the detailed guide on how to do it. 

Step 2. Add and configure Stape's Conversion Tracking app for Shopify 

2.1 Install the Stape Conversion Tracking app in the store

The Stape's Conversion Tracking app for Shopify can be installed for free from the Shopify marketplace

2.2 Configure General tab

In the Generate tab are all the settings related to adding the GTM snippet on all pages of your Shopify shop in a way that makes it resistant to ad blockers / ITP / cookie lifetime limitations before installing it on all pages of your Shopify shop.

• Use Shopify Markets

Check the box if you have multiple Shopify markets. Using the feature, you can configure GTM injection separately for each Shopify market. If the feature is disabled, all markets use the default setup.

When enabled, you will see the fields required to configure for each market:

• Insert GTM - if checked, the GTM snippet is added to each website page.

• GTM container ID - the ID from your web GTM container.

• Customer privacy API - if enabled, the app holds GTM loading until the visitor accepts cookies through Shopify's Customer Privacy banner. By default, the option isn't recommended.

• Custom domain, Stape container ID, and Cookie Keeper - the fields are associated with server-side tracking; you need to configure them if you use/going to use the server-side setup. Below, we explain where to find values for each field.

• 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 follow the guide on custom domains to add it.

• Custom Loader

Its use is highly recommended to increase protection against ad blockers.

Click on the corresponding check box and specify your Stape container identifier. To find it, log in to your Stape account, select the sGTM container, and find the container identifier in the Settings section.

• Cookie Keeper

The power-up allows you to minimize the impact of the latest ITP restrictions. Before activating this feature via the app, make sure you have it enabled in Stape in your container. To configure Cookie Keeper, click on the collapse element below and follow the instructions:

• 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 Set up Data Layer tab

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:

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

In the Customer privacy section, under Permission spoiler, please make sure to select Not required. The code snippet only generates the Data Layer; it does not set any cookies or report any data to third parties.

In the Data Layer tab of the app, there is also an option Log events to console (Dev), which is a debugging option for developers and store admins. When enabled, it logs eCommerce events in the browser console, shows event payloads sent to the GTM/Stape server container for verification, and helps debug Data Layers.

This option is for development only and should be disabled in production to avoid unnecessary console logging.

2.4 Configure Webhooks tab

Webhook events are configured in the Webhook tab.

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, webhook servers, and how to use them
• Debug incoming webhooks in Google Tag Manager server preview
• Server-to-server tracking in server Google Tag Manager

2.5 The Customer Match tab

It allows you to automatically populate and update the Customer Match lists in Google Ads.

Skip the configuration in this tab if you don't run Google Ads campaigns or don't use Customer Match lists.

Step 3. Send data to the server Google Tag Manager container 

The server container has no direct access to browser-side data – such as the data layer, cookies, or page context – so this data must be explicitly sent from the web container. Two methods are available for this: 

• Data Tag, paired with Data Client in the server container to receive and parse its requests, sends data layer variables and other parameters independently of any specific platform; 
• Google Analytics 4, which sends data via a Google Tag configured with the server container's URL. Both methods are covered below.

Send data from web to server container via Data tag

Step 1. Install the Data Tag template:

1. Click on the Tags menu.
2. Click New.
3. Open your web Google Tag Manager container's Templates section → add Data Tag from the template gallery.
4. Click on the Tag Configuration tab.
5. Click Discover more tag types in the Community Template Gallery → search for Data Tag → click Add to workspace → click Add.

Step 2. Next, we’ll configure Data Tag for the pageview event:

1. Under Event Name, you can select a standard event name, add a custom event name, or add a dynamic event name using {{Event}} variable. 
2. Enter your GTM Server Side URL (you can find your GTM server-side URL inside the stape.io account by opening the sGTM container and checking the Domain section.)
3. Tick how you would like the data to be sent:
   1. Send all from the DataLayer - will send all the information you have in the web GTM data layer to server GTM events data.
   2. Send common data - adds to the request page_location, page_path, page_hostname, page_referrer, page_title, page_encoding, screen_resolution, viewport_size.
   3. Add consent state - adds consent_state object to the request. Including following properties: ad_storage, analytics_storage, functionality_storage, personalization_storage, security_storage.
   4. Add Common Cookie - the tag will send common cookies in eventData to avoid some e-commerce platform’s limitations. For example, this is required for events that work on Shopify checkout pages.
4. Under Event Data, you can add any manual data to the request. You can also apply transformation (like hashing, trimming, etc) or store data.
5. Under User Data, you can send user parameters and apply transformation or store data.
6. Under Settings and Advanced Settings, you will find exactly that - advanced configuration options. Unless you know what you’re doing, it’s best not to modify these settings.
7. Give your tag a descriptive name and click Save.

Step 3. Next, you can configure the Data Tag for other events. The example below shows how to configure e-commerce events when Data Layer is available. 

This tag triggers each e-commerce event in the Data Layer. In this example, all e-commerce events end with _stape, so we’re using a regex that includes all events that contain _stape. 

Example of the variable that extracts user data from the Data Layer. 

Step 4. Next, download Data Client from the GitHub:

1. Follow this link.
2. Click Code → Download ZIP.

Step 5. Now to import the Data Client:

1. Open your server Google Tag Manager container.
2. Click Templates.
3. Under Clients, click New.
4. Click three dots in the top right corner.
5. Click Import and select the Data Client you downloaded from GitHub (you may have to unzip the archive first.)
6. Once the import is done, click Save.

Step 6. Open the Clients tab and click New → choose Data Client → click Save. 

Step 7. Open web and server GTM preview screens and test the setup. You should see Data Tag triggered in the web GTM container and Data Client parsed Data Tag requests in the sGTM.

How to send data from web to server container via Google Analytics 4

Step 1. Create a configuration variable for the server container URL. To do that:

1. Click on the Variables menu.
2. Click New under the User-Defined Variable bar. 
3. Click on the Variable Configuration bar.
4. Select the type Google tag: Configuration settings.
5. Click Add parameter.
6. Enter the following parameters:
   1. Config Parameter: server_container_url.
   2. Value: the URL of your Tag Manager server container.
7. Give your variable a descriptive name and click Save.

Step 2. Create a Google Analytics 4 tag:

1. Click on the Tags menu.
2. Click New.
3. Click on the Tag Configuration tab.
4. Select Google Analytics → Google Tag.
5. Under Tag ID, enter the ID from your GA4 account (to find it, go to your GA4 → click Admin → Data streams → select the stream → see Measurement ID.)
6. Under Configuration settings, select the server container variable you created earlier.
7. Under Triggering, make sure the option Initialization - All pages trigger is selected.
8. Give your tag a descriptive name and click Save.
9. Click Publish for the container to go live.

Step 3. Next, let’s see how to create a GA4 event, using the All Clicks event as an example:

1. Click on the Tags menu.
2. Click New.
3. Click on the Tag Configuration tab.
4. Select Google Analytics → Google Analytics: GA4 Event.
5. Enter your Measurement ID (from the GA4 Data streams menu.)
6. Give your event a descriptive name.
7. Click Triggering → All Clicks.
8. Give the tag a descriptive name.
9. Click Save.

Setting up conversion tracking with various platforms

Next, you'll need to configure sending your event data to your marketing / analytics platform. Exact steps will depend on your choice of platform. Check out our guides on the popular platforms for more information:

• How to set up Meta Conversions API
• How to set up Google Analytics 4 (GA4) tracking
• How to set up Google Ads conversion tracking
• Other platforms

Step 4. Test the app configuration

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 in 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 all the events you do:

The checkout events won't be displayed in GTM Preview due to the isolated environment on these pages that blocks unrestricted DOM manipulation or script injection, including the GTM snippet.

But you can manually insert the snippet on the checkout page using the Stape GTM Helper Chrome extension:

• After running Preview Mode in GTM, turn on the toggle Shopify Sandbox dataLayer in the Settings tab of the extension.
• In the tab Inject GTM, click Enable injection, add your domain name, and GTM ID. Save changes.

Now, the events on the checkout page will display in GTM Preview.