Shopify GTM Custom Pixel Generator

// Pushes a clean GA4-style data layer from Shopify's Web Pixels API, for Google Tag Manager.
// Paste into Settings > Customer events > Add custom pixel, save, then click Connect.
window.dataLayer = window.dataLayer || [];

const plainId = (id) => (id == null ? undefined : String(id).split('/').pop());
const money = (m) => (m && m.amount != null ? Number(m.amount) : 0);
const round = (x) => Math.round(x * 100) / 100;
function itemOf(variant, quantity) {
  variant = variant || {};
  const product = variant.product || {};
  const variantTitle = variant.untranslatedTitle || variant.title;
  return {
    id: variant.sku || plainId(variant.id),
    name: product.untranslatedTitle || product.title || variant.title,
    variant: variantTitle && variantTitle !== 'Default Title' ? variantTitle : undefined,
    price: money(variant.price),
    quantity: quantity || 1,
  };
}
function checkoutItems(checkout) {
  return (checkout.lineItems || []).map((line) => {
    const quantity = line.quantity || 1;
    const unit = money(line.variant && line.variant.price);
    const allocated = (line.discountAllocations || []).reduce((sum, d) => sum + money(d.amount), 0);
    const price = round(Math.max(0, unit * quantity - allocated) / quantity);
    return Object.assign(itemOf(line.variant, quantity), { price });
  });
}
const itemsValue = (items) => round(items.reduce((sum, item) => sum + item.price * item.quantity, 0));

/* ---------- Events ---------- */
analytics.subscribe('product_viewed', (event) => {
  const variant = event.data.productVariant;
  const payload = { event: 'view_item', ecommerce: { currency: variant.price.currencyCode, value: money(variant.price), items: [itemOf(variant, 1)] } };
  window.dataLayer.push({ ecommerce: null });
  window.dataLayer.push(payload);
});

analytics.subscribe('product_added_to_cart', (event) => {
  const line = event.data.cartLine;
  if (!line) return;
  const payload = { event: 'add_to_cart', ecommerce: { currency: line.cost.totalAmount.currencyCode, value: money(line.cost.totalAmount), items: [itemOf(line.merchandise, line.quantity)] } };
  window.dataLayer.push({ ecommerce: null });
  window.dataLayer.push(payload);
});

analytics.subscribe('checkout_started', (event) => {
  const checkout = event.data.checkout;
  const items = checkoutItems(checkout);
  const payload = { event: 'begin_checkout', ecommerce: { currency: checkout.currencyCode, value: itemsValue(items), items } };
  window.dataLayer.push({ ecommerce: null });
  window.dataLayer.push(payload);
});

analytics.subscribe('checkout_completed', (event) => {
  const checkout = event.data.checkout;
  const order = checkout.order || {};
  const items = checkoutItems(checkout);
  const payload = {
    event: 'purchase',
    ecommerce: {
      transaction_id: plainId(order.id) || checkout.token,
      currency: checkout.currencyCode,
      value: itemsValue(items),
      tax: money(checkout.totalTax),
      shipping: money(checkout.shippingLine && checkout.shippingLine.price),
      coupon: (checkout.discountApplications || []).map((d) => d.title).filter(Boolean).join(',') || undefined,
      items,
    },
  };
  window.dataLayer.push({ ecommerce: null });
  window.dataLayer.push(payload);
});