Meta CAPI for Shopify via server GTM

1.1. Open your WEB Google Tag Manager container.

Click Admin. Under the container column, click +

1.2. Type the container name, choose Server, and click Create.

1.3. Choose Manually provision tagging server, copy your container config and paste it in any text editor. We will need it for the next steps.

1.4. Create a stape.io account or log in to your existing one.

1.5. In Stape’s admin dashboard click Create container on the top right. 

1.6. Enter your container details:

Then click Create Container.

1.7. Choose a plan for your container. You can start with a Free plan. 

1.8. You will see the status of your container, container config, and plan name. 

It takes around 5 minutes to deploy a server container. Please reload the page to update the status. If the Google Tag Manager server-side setup was done correctly, you should see the status “Running”. 

2.1. Find and copy your WEB GTM ID in GTM. 

To find GTM ID log in to your Google Tag Manager account and open a Web GTM container. In the top right corner (next to the Submit and Preview buttons) you’ll see some short text that starts with "GTM-" and then contains some letters/numbers.

2.2. Open your sGTM container on Stape →  Click Power-Ups.

Find Custom Loader and click Configure.

2.3. Add the following settings:

Domain - from the list of domains connected to your container, select the necessary ones. 

Web GTM ID - add web Google Tag Manager ID. Check out how to find web GTM ID in our guide.

GA4 ad block bypass - enables bypassing adblockers' impact on the GA4 tracking code. Note that this setting will affect all container domains. Be sure to debug both the web and server GTM containers after enabling this toggle.

Same Origin Path - if you are using same origin approach for configuring custom domain, please specify the proxy path for requests. Learn more.

Platform - the custom loader code differs for each platform. Select Shopify, click generate and follow the steps on the right.

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

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

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.

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:

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

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.

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:

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

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:

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.

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:

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.

There are two most popular ways to do that:

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 Conversions API, Google Ads server-side tracking, etc.

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:

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

4.1. Download GTM templates for Shopify on our GitHub.

4.2. You should import the templates in both your web and server container on GTM (process is the same across the two). You need to go Admin → Import Container:

4.3. Select your template file (make sure the template matches the container type - web/server).

4.4. Pick a workspace for this import (you can create a new one for this specific purpose).

4.5. Select Overwrite or Merge.

5.1. Templates are fully built, so triggers, payloads, and event names are all taken care of for you. 

You just need to input your specific destinations, ids, API keys etc. We’ve tried to make it as comfortable as possible, so in both containers (web and server), you will find a folder called “[Stape] _Settings”.

Web

Server

All these variables are already referenced in tags that use them; you just need to give them proper values, for example:

5.2. Pixel ID and API token can found in your pixel settings:

5.3. Once you’ve changed all these variables and saved them, your last step (assuming this a new container) is to add a preview URL in your server container by going to Admin → Container Settings. If the container is not new, just skip this step.

Facebook provides the ability to test Browser and Server events. That is very useful if you set up Facebook pixel using GTM Server for the first time and wish to check that all data tracked correctly. When working on a Shopify store, this process is often referred to as setting up the Facebook CAPI Shopify, since events are sent server-side instead of relying only on the browser.

6.1. First, you need to obtain test_event_code. For this, you need to log into your Facebook manager, choose the data source that you liked to test, and open the tab “Test events”. There you will find the test event code. It can look like this: TEST2120

Note: TEST id will change once in a couple of hours, if your debug sessions are spread in time make sure to check the value you’re using is still valid.

6.2. Fill the LT - Map | Debug Mode → FB Test ID variable, in your server container, with the test event code that you get from the previous step.

This variable is already referenced in all Facebook tags. Variable will also only populate the tag in preview mode, so you don’t necessarily need to remove it before going live.

6.3. Launch preview mode on both your containers (web & server) If done right, you will see both web and server test events on the Facebook Test Event page.