Cannot use window.dataLayer inside Shopify Web Pixel Extensions

Extensions
1

I’m working on a Shopify Web Pixel Extension and encountered an issue when trying to integrate Google Tag Manager (GTM). I got an error window is not defined.

(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-XXXXXXX');

I realized that Shopify Web Pixel Extensions run in a sandboxed environment, where global objects like window, document, and dataLayer are not accessible.

Web Pixel Extensions are great for capturing events and sending them to a server — all without needing to manually install code.

if I want to integrate with GTM or other tools that require client-side access (e.g., using window.dataLayer), should I be using a Custom Pixel instead?

Is that the only supported option for browser-based integrations, or is there any other recommended approach?

2

Shopify recommend using a custom pixel for Google tag manager :blush:

https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial

And a real example implementation Google Tag Manager Shopify Custom Pixel · GitHub

1 Like