Integrating and Debugging Google Tag Manager with Shopify's Custom Pixels

How to use custom pixels to integrate Google Tag Manager with Shopify's checkout and workaround the missing preview

Shopify's custom pixels allow merchants to track specific events during the customer journey, such as when a user begins the checkout process. Integrating these custom pixels with Google Tag Manager enables enhanced tracking capabilities and simplifies the management of various tracking codes on your Shopify store.

However, the integration comes with certain limitations, particularly when dealing with sandboxed JavaScript. This means that the custom pixels' JavaScript functionality is restricted within the Shopify environment. Consequently, traditional methods of debugging using Google Tag Manager's preview mode won't work.

Adding Google Tag Manager to Shopify Checkout with Custom Pixels

In your Shopify admin, navigate to "Settings" > "Custom events." Add the example custom pixels and update GTM-XXXXX with your GTM Container ID.

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXX');

window.dataLayer = window.dataLayer || [];

analytics.subscribe('checkout_started', (event) => {
  console.log('custom event', event)
  window.dataLayer.push({
   'event': 'begin_checkout',
    'currency': event.data.checkout.currencyCode,
    'email':event.data.checkout.email,
    'value': event.data.checkout.totalPrice.amount,
    'lineItems': event.data.checkout.lineItems,
    'fired_from': 'custom_pixel'
  });
});

analytics.subscribe('checkout_address_info_submitted', (event) => {
  console.log('custom event', event)
  window.dataLayer.push({
   'event': 'add_shipping_info',
    'currency': event.data.checkout.currencyCode,
    'email':event.data.checkout.email,
    'value': event.data.checkout.totalPrice.amount,
    'lineItems': event.data.checkout.lineItems,
    'shippingAddress': event.data.checkout.shippingAddress,
    'shippingLine': event.data.checkout.shippingLine,
    'fired_from': 'custom_pixel'
  });
});

Read more about Shopify standard events here.

The Sandbox JavaScript Challenge

Because Shopify's uses sandboxed JavaScript for custom pixels, Google Tag Manager’s preview mode won’t work. Instead, GTM will tell you that your container was not found on the page when you try to use Preview Mode.

Your container is actually installed. It’s just preview mode that doesn’t work.

Debugging Workaround: Logging Data to the Console

To overcome the limitations posed by sandboxed JavaScript and debug the integration effectively, our workaround logs data to the browser's console. This approach helps you gain insights into the data being transmitted and lets you set up tags and variables.

Here's how to implement the workaround:

Creating Log Entries: Modify your Google Tag Manager container to log data to the console. This can be achieved by creating a trigger that logs the data layer content every time a custom pixel fires like so:

And firing a custom html tag on that trigger like so:

Tag Code

<script>
	console.log("datalayer", {"event": {{Event}}, "dataLayer": {{Latest Datalayer}}})
</script>

Latest Datalayer Variable Code

function() {
  return {{Full dataLayer}}[{{Full dataLayer}}.length-1];
}

Full Datalayer Variable

Or, you can import the Tag Manager recipe located here.

Publish Changes: Unlike traditional Google Tag Manager practices, where you can test changes in preview mode, changes related to custom pixels need to be published directly to your live environment for debugging.

Review the Console: With the changes live, open your browser's developer console (usually by right-clicking and selecting "Inspect" or "Inspect Element" and navigating to the "Console" tab). You'll be able to observe the logged data as the custom pixel events fire.

Logging Data for Debugging

As you navigate through the checkout process, you'll notice log entries appearing in the console that correspond to the custom pixel events you've configured. These log entries will provide detailed information about the event, including attributes like currency, email, line items, and more. Use that to construct your Google Tag Manager tags and variables accurately.