Home › How-tos › The Secret Setups › Shopify

The Secret Setups · 19 of 20

How to send Shopify checkout events to Tag Manager with a custom pixel

Live guide · Checked 28 October 2026 · Updated 28 October 2026 · Checked every week against Shopify's own help pages

Use Shopify's Customer Events to load Tag Manager and push GA4-format ecommerce events, including purchase from the checkout, where theme code can't reach.

Time

30 minutes

You will need

• Shopify admin access
• A Google Tag Manager container (a separate one for Shopify is best)
• The GA4 ecommerce tags from the ecommerce Secret Setup

Stuck?

Troubleshooting or ask us a question

Step by step

1. Add a custom pixel

   In Shopify admin go to Settings > Customer events > Add custom pixel. Name it GTMCopy. Under Customer privacy, set Permission to Required and choose Marketing and Analytics.

2. Paste the code

   Paste this in the code box, with your container ID. It loads Tag Manager inside Shopify's pixel sandbox and turns Shopify's events into GA4 ones:

   JavaScriptCopy

   window.dataLayer = window.dataLayer || [];
   (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); j.async = true;
     j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i; f.parentNode.insertBefore(j, f);
   })(window, document, 'script', 'dataLayer', 'GTM-XXXXXXX');
   
   function items(lines) {
     return (lines || []).map(function (l) {
       var v = l.variant || l.merchandise || {};
       return { item_id: (v.sku || (v.product && v.product.id) || ''), item_name: (v.product && v.product.title) || l.title || '', item_variant: v.title || '', price: Number((v.price && v.price.amount) || 0), quantity: l.quantity || 1 };
     });
   }
   function push(name, eco) { window.dataLayer.push({ ecommerce: null }); window.dataLayer.push({ event: name, ecommerce: eco }); }
   
   analytics.subscribe('product_viewed', function (e) {
     var v = e.data.productVariant;
     push('view_item', { currency: v.price.currencyCode, value: Number(v.price.amount), items: items([{ variant: v, quantity: 1 }]) });
   });
   analytics.subscribe('product_added_to_cart', function (e) {
     var l = e.data.cartLine;
     push('add_to_cart', { currency: l.cost.totalAmount.currencyCode, value: Number(l.cost.totalAmount.amount), items: items([{ merchandise: l.merchandise, quantity: l.quantity }]) });
   });
   analytics.subscribe('checkout_started', function (e) {
     var c = e.data.checkout;
     push('begin_checkout', { currency: c.currencyCode, value: Number(c.totalPrice.amount), items: items(c.lineItems) });
   });
   analytics.subscribe('checkout_completed', function (e) {
     var c = e.data.checkout;
     push('purchase', {
       transaction_id: (c.order && c.order.id) || c.token,
       currency: c.currencyCode,
       value: Number(c.totalPrice.amount),
       tax: Number((c.totalTax && c.totalTax.amount) || 0),
       shipping: Number((c.shippingLine && c.shippingLine.price && c.shippingLine.price.amount) || 0),
       items: items(c.lineItems)
     });
   });

3. Save and connect

   Click Save, then Connect. The pixel runs in a sandbox, so Tag Manager's Preview can't attach to it: test as below instead.

4. Set up Tag Manager for the sandbox

   In the Shopify container, use the ecommerce trigger and GA4 tag from the ecommerce Secret Setup. In the GA4 Google tag, add the setting page_locationCopy set to {{Page URL}}Copy, because the sandbox address isn't your shop's.

5. Test with GA4 DebugView

   Open your shop, add something to the basket and place a test order (use Shopify's Bogus gateway or a 100% discount). In GA4 Admin > DebugView, look for begin_checkoutCopy and purchaseCopy. Shopify's Customer events page also shows the pixel as Connected.

6. Remove duplicate tracking

   If the Google & YouTube app already sends GA4 purchases, either use it or this pixel, not both, or purchases count twice.