Shopify, GA4 & Custom Pixels: Taking Back Control of Your Tracking

1. Introduction

Shopify has radically changed how tracking works.
Gone are the days when you could drop a script into theme.liquid and call it a day.
Since 2023, Shopify Checkout Extensibility has replaced checkout.liquid,
eliminating the ability to freely inject JavaScript inside the checkout.

This shift has huge implications:
– Native integrations (Google, Meta, TikTok, etc.) became opaque.
– Custom scripts stopped executing.
– Traditional e-commerce tracking (GA4, Ads, remarketing) broke completely.

2. How Tracking Used to Work

Previously, everything lived inside the theme.
You could embed a Google Tag Manager container, a gtag.js, a Meta pixel, or even a Criteo script —
all directly within theme.liquid or checkout.liquid.
Ecommerce events like add_to_cart or purchase were tracked through DOM listeners or JS snippets.
It was flexible… and dangerously open (XSS, data leaks, non-GDPR compliance, etc.).

3. What Changed

With Checkout Extensibility, Shopify introduced a sandboxed model.
Every tracking script now runs in its own isolated environment,
without access to the DOM or checkout code.

This sandbox receives a stream of standardized Customer Events
(such as page_viewed, add_to_cart, purchase, etc.),
which you can listen to inside Custom Pixels.

That’s the same model powering Shopify’s native integrations (Google & YouTube, Meta Ads, TikTok, etc.).
But those integrations are closed — you can’t customize the event payloads, the triggers, or attribution logic.

4. Timeline of the Shift

• February 2023 – Early rollout of Checkout Extensibility to Shopify Plus merchants.
  Source: tokenoftrust.com – Checkout Liquid Change Shopify
  URL: https://tokenoftrust.com/blog/checkout-liquid-change-shopify
• August 13, 2024 – checkout.liquid officially deprecated for “Information”, “Shipping” and “Payment” pages.
  Source: shopify.dev – Checkout.liquid will no longer work for in-checkout pages starting August 13, 2024
  URL: https://shopify.dev/changelog/checkout-liquid-will-no-longer-work-for-in-checkout-pages-starting-august-13-2024
• August 28, 2025 – Full removal for “Thank You” and “Order Status” pages.
  Source: digitalposition.com – Shopify Checkout Extensibility Deadline August 28, 2025 is coming — Here’s how to not screw it up
  URL: https://www.digitalposition.com/resources/blog/ppc/shopify-checkout-extensibility-deadline-august-28-2025-is-coming-heres-how-to-not-screw-it-up
• 2023–2024 – Rollout of Customer Events and Custom Pixels in the Shopify SDK.
  Sources:
  – shopify.dev – Customer Events API Reference
  URL: https://shopify.dev/docs/api/customer-events
  – shopify.dev – Custom Pixels documentation
  URL: https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels
  – analyticsmania.com – Install Google Tag Manager and GA4 on Shopify (with Custom Pixel)
  URL: https://www.analyticsmania.com/post/install-google-tag-manager-and-ga4-on-shopify/

5. Native Integrations: Convenient but Opaque

Shopify offers “native” integrations for:
🎯 Google & YouTube
📱 Meta (Facebook / Instagram)
🎵 TikTok, 📌 Pinterest, 👻 Snapchat, 💼 LinkedIn Ads, 🧠 Reddit

The issue: they’re black boxes.
You can’t inspect what data is sent, when, or how conversions are matched.
Shopify and the platform owner decide everything.

The result:
– duplicate hits across GA4 and Google Ads
– inconsistent attribution
– zero control for server-side setups

6. The Solution: Build Your Own Custom Pixel

Custom Pixels let you rebuild your tracking stack from scratch —
listening to Shopify Customer Events and sending data wherever you want: GTM, your own endpoint, or a partner API.

Your script runs inside a sandbox (no DOM access)
but receives structured event data directly from Shopify’s event stream using analytics.subscribe().

7. Example 1 – page_viewed → Google Analytics 4

Shopify emits a native page_viewed event on every page load.
You can intercept it and push it into the dataLayer.

analytics.subscribe("page_viewed", (event) => {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: "page_view",
    page_location: event.data.context.document.location,
    page_title: event.data.context.document.title
  });
});

This push triggers your GA4 tag inside GTM,
or a server call (/collect?v=2) if you’re running a server-side container.

Sources:
– shopify.dev – Custom Pixels documentation
URL: https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels
– analyticsmania.com – Install Google Tag Manager and GA4 on Shopify (with Custom Pixel)
URL: https://www.analyticsmania.com/post/install-google-tag-manager-and-ga4-on-shopify/
– developers.google.com – GA4 Measurement Protocol
URL: https://developers.google.com/analytics/devguides/collection/protocol/ga4

8. Example 2 – Google Ads Conversion Event

To track conversions in Google Ads, you can use the checkout_completed event from Shopify.
Here’s a minimal example sending a conversion via gtag().

analytics.subscribe("checkout_completed", (event) => {
  const conversionData = {
    send_to: "AW-XXXXXXX/AbCdEfGhIjkLmNo",
    value: event.data?.totalPrice?.amount,
    currency: event.data?.totalPrice?.currencyCode,
    transaction_id: event.data?.order?.id
  };

  gtag("event", "conversion", conversionData);
});

If you’re running server-side tagging,
this same event can trigger a call through the Google Ads Conversion API.

Sources:
– shopify.dev – Customer Events API Reference
URL: https://shopify.dev/docs/api/customer-events
– developers.google.com – Google Ads Conversion Tracking Tag
URL: https://developers.google.com/google-ads/api/docs/conversions/tracking

9. Example 3 – Meta Ads Purchase (Conversions API)

Likewise, you can send a Purchase event to Meta via the Conversions API.

analytics.subscribe("checkout_completed", async (event) => {
  const payload = {
    event_name: "Purchase",
    event_time: Math.floor(Date.now() / 1000),
    event_source_url: event.data.context.document.location,
    user_data: {
      em: event.data.customer?.email,
    },
    custom_data: {
      currency: event.data.totalPrice.currencyCode,
      value: event.data.totalPrice.amount,
      transaction_id: event.data.order.id
    }
  };

  await fetch("https://graph.facebook.com/v18.0/1234567890/events?access_token=EAAX...", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ data: [payload] })
  });
});

You can also route this through your own endpoint for privacy-safe hashing and log handling.

Sources:
– developers.facebook.com – Conversions API
URL: https://developers.facebook.com/docs/marketing-api/conversions-api
– shopify.dev – Custom Pixels documentation
URL: https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels

10. Testing and Validation

Because the GTM Preview Mode doesn’t work in the sandbox, testing must be done differently:
– use Network → collect?v=2 for GA4 requests
– install DataLayer Checker Plus (Chrome extension compatible with Shopify Custom Pixels)
– or use GA4 DebugView

Every time you update your GTM container or pixel code,
you must republish it and verify the payloads via browser dev tools or server logs.

11. Conclusion

Shopify tightened its ecosystem — for good reasons:
security, privacy, and maintainability.
But that same sandbox means you now need to take control again
if you want reliable, granular, and interoperable data.

Custom Pixels and Customer Events are now the only clean way
to integrate GTM, GA4, Meta, or Google Ads in a modern Shopify environment.

No more copy-paste snippets.
Today, your Shopify tracking needs to be coded, tested, and orchestrated.