Google Tag Manager Shopify Custom Pixel

gtm-shopify-custom-pixel.js

// Step 1. Add and initialize your third-party JavaScript pixel (make sure to exclude HTML)
// Make sure you update you GTM- Tag id
(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');

window.dataLayer = window.dataLayer || [];

// // Step 2. Subscribe to customer events using the analytics.subscribe() API
analytics.subscribe('page_viewed', (event) => {
  window.dataLayer.push({
   'event': 'page_viewed',
   'page_location': event.context.window.location.href,
   'page_title': event.context.document.title,
  });
});

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_id': event.data.productVariant.product.id,
   'product_title': event.data.productVariant.product.title,
  });
});

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
   'event': 'checkout_completed',
   'order_id': event.data.checkout.order.id,
   'currency': event.data.checkout.currencyCode,
  });
});