Using Google Tag Manager (GTM) With Shopify's Web Pixel

Google Tag Manager can now be loaded in the Shopify Web Pixel, however, important restrictions still exist

Shopify has published an article documenting how Google Tag Manager can now be loaded and used in the the Web Pixel context. The Web Pixel context is an event bus made available by Shopify as an answer for removing tracking capabilities for their Checkout Extensibility checkout. The Web Pixel, in some ways, can be thought of as a replacement to checkout.liquid for tracking checkout events (begin checkout, add payment info, and add shipping info).

According to Shopify's documentation, it's now possible to load Google Tag Manager in the Web Pixel context, for both Plus and Non Plus stores. If you are familiar with the legacy checkout environment, these events were not possible to track for non-plus stores, because they did not have access to checkout.liquid.

🚧

It is important to note that web pixel loads site-wide and is not limited to just the checkout pages

With the new Web Pixel context it is possible to load Google Tag Manager. Unfortunately, because the Web Pixel runs in its own web context (detached from the main page) some tracking that seems like it should be possible, is not possible without significant work to pull data from the main browser window, into the context of the Web Pixel.

For example, Google Ads clicks typically are accompanied by a gclid in the url. The gclid will map a conversion to an add click in Google's system. This gclid value is saved as a cookie in the main browser context when the user lands on the store. When a Google Ads tag fires, it automatically looks for this value in a specified cookie. In the Web Pixel context, this cookie is not present, and needs to be pulled using the Web Pixel API. This needs to be done on a per channel basis for each channel to have the information it needs to fire accurately.

Other problems also exist, for example, some tags look for URLs automatically (wherever the tag is fired). In the Web Pixel context, the URL that is automatically detected is an unrelated iframe URL that may cause problems for some tracking channels. If you load GTM via the web pixel and another source for your website, there is potential for duplication on your tags depending on what the triggers may be.

Elevar integrates with Shopify Web Pixel

Elevar integrates with Shopify's Web Pixel to help merchants maximize data collection. Our best practice setup guides merchants to utilize our Custom Pixel code for checkout funnel tracking and a combination of webhook + web pixel events to ensure 99%+ tracking accuracy. Follow this guide to update your Shopify Source to our latest best practice.

Send Custom Events or Customizing Elevar's DataLayer Events Loaded from the Web Pixel

You can use either the Transform Function as noted here or build your own datalayer events to customize what data is passed in the Elevar checkout funnel DataLayer events or to fire your own custom datalayer events.

You'll need to make sure the custom code lives within the same Custom Pixel that your Elevar checkout script lives in. Why? Each Shopify Custom Pixel loads in it's own iframe. So in order for your GTM tags to fire off of your new datalayer event, your new datalayer event code must live in the same iframe as the code that loads GTM. Or in order for your custom code to change the values in a specific datalayer event, it must live in the same iframe as the code that loads that datalayer event.

So make sure you add your custom code into the same Custom Pixel that your Elevar code lives in as shown below: