Event Tracking on Shopify After checkout.liquid: Web Pixels, GA4, and Consent

If your Shopify analytics advice still says "paste the script into checkout.liquid," throw it out. Shopify has sunset checkout.liquid in favor of Checkout Extensibility, and all storefront tracking now runs through the Web Pixels API — a sandboxed environment where your code can't touch the DOM directly. That's more secure and more reliable, but only if you understand the new event model.

Why the old approach is gone

Injecting raw gtag and pixel scripts into the theme and checkout was fragile: scripts fought each other, blocked rendering, and broke on every checkout update. The Web Pixels API replaces it with a governed pub/sub bus. Your pixel subscribes to a fixed catalog of standard events (page_viewed, product_viewed, product_added_to_cart, checkout_started, checkout_completed, and more) that Shopify emits consistently — including on the checkout you can no longer edit by hand.

A real custom pixel: purchase to GA4

You register a pixel in the admin (Settings → Customer events → Add custom pixel) or ship one as an app extension. Inside the sandbox you get an analytics object; subscribe and forward. Here is a working purchase event mapped to GA4's Measurement Protocol shape:

analytics.subscribe("checkout_completed", (event) => {
  const c = event.data.checkout;
  const payload = {
    event: "purchase",
    transaction_id: c.order.id,
    value: c.totalPrice.amount,
    currency: c.currencyCode,
    items: c.lineItems.map((li) => ({
      item_id: li.variant.sku,
      item_name: li.title,
      price: li.variant.price.amount,
      quantity: li.quantity,
    })),
  };
  // Sandbox has no DOM: send via fetch/Beacon to your endpoint or a
  // server-side GA4 relay — you cannot rely on a globally-loaded gtag here.
  navigator.sendBeacon("/collect/ga4", JSON.stringify(payload));
});

The critical constraint: the pixel sandbox is isolated, so window.gtag from your theme is not in scope. Either load an allowed analytics library inside the pixel, or (better) forward to a server endpoint that talks to GA4 — which also survives ad blockers and iOS tracking restrictions.

The double-counting trap

The most common broken report on Shopify is inflated purchases. It happens when a store runs Shopify's native GA4 integration and a custom pixel and a GA4 tag in the theme — three sources firing purchase on the same order. Pick one path. If you use a custom pixel, disable the theme-level purchase tag and the app's duplicate. Verify with GA4 DebugView on a real test order: exactly one purchase per order, correct value, correct currency.

Consent is not optional

Shopify's Customer Privacy API tells you whether the shopper has consented to analytics/marketing. In regions under GDPR or similar, you must gate tracking on it. Check consent inside the pixel before forwarding, and integrate Google Consent Mode so GA4 models conversions when consent is denied rather than dropping them silently:

analytics.subscribe("product_viewed", (event) => {
  if (!event.customerPrivacy?.analyticsProcessingAllowed) return;
  // ...forward the event only when consent is granted
});

Server-side is the durable answer

Browser tracking loses 20–40% of events to ad blockers, ITP, and consent gaps — the exact number depends on your audience, so measure it rather than trust a blog figure. Forwarding the Web Pixel event to your own server, then relaying to GA4 (and Meta's Conversions API) server-side, recovers most of that and gives you one authoritative event stream. It's more work, and for high-value stores it's the difference between a report you can trust and one you can't.

On modern Shopify, "set up tracking" is no longer a copy-paste — it's an architecture decision: one event source, consent-gated, ideally server-relayed. Get that wrong and every downstream number (ROAS, attribution, LTV) is wrong too.WS24 — how we scope analytics work

The platform moved tracking into a sandbox for good reasons. Work with the event model — subscribe to standard events, forward server-side, respect consent, and kill the duplicates — and your analytics finally match the numbers in Shopify admin.