The Shopify Checkout Tracking Problem (And the Custom JS Solution That Works)

What Is checkout.liquid and Why Did It Matter?

checkout.liquid was the Shopify template file that gave developers and marketers the ability to inject custom HTML, JavaScript, and tracking tags into the checkout flow. It was the standard mechanism for adding Google Tag Manager to checkout pages, firing GA4 ecommerce events at each checkout step, and placing Meta Pixel and conversion tags on the order confirmation page.

Without it, none of those standard deployments work on non-Plus plans.

Why Shopify Removed It

Shopify's stated reasoning was consistency, performance, and security. The checkout is now fully controlled by Shopify on standard plans, which means merchants benefit automatically from Shopify's checkout improvements, A/B tests, and security updates. The trade-off is that you lose the ability to customise or inject anything.

The alternative Shopify provides is the Customer Events API (formerly called Checkout Events via Web Pixels). This lets you subscribe to standard ecommerce events — page viewed, checkout started, payment info submitted, checkout completed — via a sandboxed JavaScript environment configured through the Shopify admin.

The problem, as we'll explain, is the sandbox.

Why This Matters More Than Most People Realise

Checkout is where the money is. It's the most conversion-critical part of your store, and it's the section that needs the most accurate tracking. Add-to-cart events are useful. Purchase confirmation events are essential. But the step-by-step funnel — checkout initiated, shipping entered, payment entered, purchase completed — is where you understand where customers drop off and which campaigns are actually converting.

Without accurate checkout tracking, you're missing the attribution data for your most valuable user actions.

The Sandbox Problem

Customer Events run in an isolated iframe. You don't have access to the parent window, you can't read the DOM of the checkout page, and a standard GTM container deployment won't function inside it. Many tracking approaches — injecting GTM's dataLayer, reading form fields, firing tags based on DOM events — simply don't work.

This catches out experienced developers who aren't familiar with Shopify's specific architecture. We've audited stores where the purchase event appears to fire correctly in GTM preview mode on earlier pages, but fails silently on the checkout — or fires without the full transaction data (revenue, product details, quantity) because the sandbox doesn't have access to what it needs.

The Solution We Implemented

The working approach uses Customer Events as the trigger mechanism, but replaces the standard GTM tag setup with custom JavaScript that functions within the sandbox constraints.

The key components:

1. Use Shopify's native event data objects. The Customer Events API provides built-in event data — order total, line items, customer information — that Shopify populates directly. We read from these rather than scraping the DOM, which means the data is reliable and sandbox-safe.
2. Custom pixel implementation. A custom pixel script reads the Shopify event data and transforms it into the format required by GA4, Meta CAPI, or whichever ad platforms are in use. This runs inside the sandbox but sends data out via the Fetch API to our server-side container.
3. Server-side deduplication for GA4. For GA4, we use the Measurement Protocol for checkout events, with server-side deduplication logic to prevent double-counting events that might also arrive via a browser tag on the confirmation page.
4. Meta CAPI as the primary purchase signal. For Meta, the Conversions API handles purchase events from the server-side container rather than the browser pixel. This keeps deduplication logic centralised and produces cleaner, more reliable purchase data.

The end result is complete checkout tracking — all standard ecommerce events, full revenue and product data — on any Shopify plan.

Common Signs Your Shopify Checkout Tracking Is Broken

• Your GA4 purchase event count is lower than your actual Shopify order count for the same period
• Meta reports a different purchase count to your Shopify dashboard
• GTM preview mode doesn't trigger inside the checkout flow
• You migrated from checkout.liquid-based tracking before August 2024 and haven't re-implemented since
• Your checkout step funnel in GA4 has significant gaps between steps

Frequently Asked Questions

Does this affect Shopify Plus merchants?

No. Shopify Plus merchants still have access to checkout extensibility and can deploy GTM and custom scripts through their checkout. The restriction on checkout.liquid applies to Basic, Shopify, and Advanced plan merchants. If you're on Plus and haven't migrated to the new checkout extensibility, you should — checkout.liquid is being deprecated for Plus too.

Can I just use Shopify's built-in Google and Meta integrations?

Shopify's native channel integrations are better than nothing but are limited. They don't support custom event parameters, don't give you control needed for Consent Mode v2, and don't support proper server-side deduplication. For accurate attribution and ad platform optimisation, a custom implementation is necessary.

How long does the fix take to implement?

For a clean setup with GA4 and Meta CAPI, typically 2–3 days. More complex setups — multiple ad platforms, server-side GTM, full CAPI implementation with consent signal passing — take 4–5 days. We audit the existing setup first and provide a clear scope before starting.