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.

🚧

Note: Web pixel loads site-wide!

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. However, since the Web Pixel operates in its own web context, detached from the main page, some tracking that appears feasible may not be achievable without substantial effort to extract data from the main browser window and integrate it into the Web Pixel context.

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.

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 where your Elevar checkout script resides. Why? Each Shopify Custom Pixel loads in its own iframe. Therefore, for your GTM tags to be triggered by your new Datalayer event, the code for the new Datalayer event must reside in the same iframe as the code that loads GTM. Similarly, for your custom code to modify the values in a specific datalayer event, it must also reside 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: