Add tracker to one page checkout with custom pixels

To install Google Tag Manager and track checkout correctly on Shopify's new one page checkout, you must add custom pixels.

In your Shopify admin, navigate to "Settings" > "Custom events." Add the code below and update all GTM-XXXXX with your GTM Container ID.

Read our blog post on using custom pixels here.

function formatLineItems(lineItems) {
  return lineItems.map((lineItem) => {
    const {
      variant: {
        id: item_id,
        product: { id: item_product_id, title: item_name, vendor: item_brand },
        price: { amount: price, currencyCode: currency },
        sku: sku,
      },
      quantity,
    } = lineItem;

    return {
      item_id: parseInt(item_id),
      item_name,
      affiliation: "Shopify Store",
      currency,
      item_brand,
      item_product_id: parseInt(item_product_id),
      price,
      quantity,
      sku,
    };
  });
}

function pushEcommerceEvent(eventName, checkout) {
  const data = {
    event: eventName,
    fired_from: "SlideRule Analytics",
    fired_via: "Custom Pixels",
    ecommerce_event: true,
    ecommerce: {
      currency: checkout.currencyCode,
      value: checkout.totalPrice.amount,
      items: formatLineItems(checkout.lineItems),
    },
  };
  window.dataLayer.push(data);
  window.dataLayer.push({
    fired_from: undefined,
    ecommerce_event: undefined,
    fired_via: undefined,
    ecommerce: undefined,
  });
}

// eslint-disable-next-line no-undef
analytics.subscribe("checkout_started", (event) => {
  (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-KB5SGCR");

window.dataLayer = window.dataLayer || [];
  const checkout = event.data.checkout;
  pushEcommerceEvent("begin_checkout", checkout);
});

// eslint-disable-next-line no-undef
analytics.subscribe("checkout_shipping_info_submitted", (event) => {
  (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-KB5SGCR");

window.dataLayer = window.dataLayer || [];
  const checkout = event.data.checkout;
  pushEcommerceEvent("add_shipping_info", checkout);
});

// eslint-disable-next-line no-undef
analytics.subscribe("payment_info_submitted", (event) => {
  (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-KB5SGCR");

window.dataLayer = window.dataLayer || [];
  const checkout = event.data.checkout;
  pushEcommerceEvent("add_shippingadd_payment_info_info", checkout);
});