Lesson 4 of 8

Connecting GTM — The Custom Pixel

To use Google Tag Manager on Shopify checkout you run GTM inside the custom pixel and feed it a dataLayer you build yourself from Customer Events. Shopify documents this exact pattern. The steps:

1Copy GTM install code→2Strip the <script> tags→3Paste into a custom pixel→4Subscribe → dataLayer.push

Load the container in the sandbox

From GTM, open Admin → Install Google Tag Manager and copy the <head> snippet. Remove the surrounding <script> tags (you're pasting JavaScript, not HTML) and add it to the pixel. Because the sandbox has no shared dataLayer, you define your own first.

// Define your own dataLayer inside the sandbox
window.dataLayer = window.dataLayer || [];
function gtag(){ dataLayer.push(arguments); }

// GTM loader (the install snippet, with <script> tags removed)
(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');

Push each event you care about

Then subscribe to the events you want and push a clean object into that dataLayer. The event key is what your GTM trigger will match on.

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    value: event.data?.checkout?.totalPrice?.amount,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

One important rule from Shopify: a tag and trigger must exist in GTM for data to actually flow — an empty container loaded in the pixel transfers nothing. There are app-based alternatives (the Google & YouTube channel installs a managed pixel for you), but the custom-pixel route is the one that gives you full GTM control.

Key takeaway

Run GTM inside the pixel: paste the install code with the script tags stripped, define your ownwindow.dataLayer, then subscribe to events and push clean objects whose event key your GTM triggers match. At least one tag + trigger must exist for data to flow.