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's approach is to rely on both the Web Pixel and the Shopify's checkout web-hooks for improved accuracy

This is the same approach we take for purchase events, that typically moves merchants from <95% tracking accuracy to 99%+ accuracy. As the transition to Checkout Extensibility becomes more popular, we are working closely with Shopify to improve our checkout tracking server side, and to incorporate the Web Pixel in our infrastructure. As of today (version 3.10), our best practice setup utilizes checkout web-hooks, and offers the same 99% + tracking accuracy we offer for purchase events for all checkout events to our server-side destinations.