Overview

You can now load GTM inside Shopify’s Web Pixel (for Plus and non-Plus stores), but the Web Pixel runs in its own iframe/context, which creates important limitations (cookies/URL, duplication risk). Elevar integrates with Web Pixel and recommends a hybrid approach for 99%+ tracking accuracy.

What Changed:

Shopify’s article on GTM in Web Pixel documents how GTM can be loaded and used within the Web Pixel context—an event bus Shopify introduced alongside Checkout Extensibility to replace tracking once handled in checkout.liquid.

Previously, non-Plus stores couldn’t track checkout events (e.g., begin checkout, add payment info, add shipping info) due to lack of checkout.liquid access.

Now, Google Tag Manager can be used in Web Pixel for Plus and non-Plus stores.

📘

Learn More:Shopify’s GTM Web Pixel

Read this guide to learn more about Shopify’s GTM in Web Pixel.

🚧

NOTE: Web Pixel Loads Site-Wide

The Web Pixel is not limited to checkout pages; it runs across the entire site.

Why the Web Pixel Is Different:

The Web Pixel operates in a separate web context (iframe), detached from the main browser window. This means some “obvious” tracking patterns won’t work out of the box without extra plumbing to move data into the Web Pixel context.

Practical Implications

GCLID / Cookies:

• Google Ads click IDs (gclid) are stored as cookies in the main page context.
• In the Web Pixel context, these cookies are not present. You must pull the values via the Web Pixel API and map them per channel so tags can fire accurately.

URL Detection:

• Some tags auto-read the current URL wherever they run.
• Inside Web Pixel, the detected URL can be an iframe URL, which may break channel logic unless you explicitly pass the real page URL into the Web Pixel context.

Duplication Risk:

If you load GTM both via Web Pixel and elsewhere on your site, you can unintentionally double-fire tags depending on triggers. Audit triggers carefully.

Elevar + Shopify Web Pixel:

Elevar integrates with the Web Pixel to maximize data coverage while minimizing the pitfalls above.

Recommended Approach:

Use Custom Pixel code for checkout-funnel tracking and combine webhook + Web Pixel events to achieve 99%+ tracking accuracy.

Upgrade Path:

Follow this guide to learn how to update to the Shopify Source and Theme App Embed.

Customizing Elevar’s Data Layer Events (from Web Pixel)

You can tailor what data is passed in Elevar’s checkout-funnel data layer events—or fire custom events—using either method below:

Option 1: Transform existing events

• Follow this guide to learn how to set up the transform function.

Option 2: Build your own events

• Follow this guide to learn how to build your own data layer events.

Important Implementation Rule

Same Iframe:

• Each Shopify Custom Pixel loads in its own iframe. So, to trigger GTM tags from a new data layer event, the custom event code must live in the same Custom Pixel as the GTM loader.
• To modify values in a specific data layer event, the custom code must also reside in the same iframe as the event itself.
  • Action: Add your custom code to the same Custom Pixel that contains your Elevar code (and/or GTM) so your events and listeners share the same context.