Overview

A client wanted accurate purchase tracking within Google Analytics for a Shopify Hydrogen storefront. Product views, add to cart events and checkout interactions were already being tracked, but completed purchases weren't making it into GA4 - which was the most important metric!

I'll cover how I implemented purchase tracking using Shopify's Custom Pixel and validated the setup using GA4's DebugView.

The Problem

Tracking purchases on a headless Shopify storefront works differently to a traditional Shopify theme. Whilst the storefront itself can run Google Analytics and Google Tag Manager as normal, Shopify controls the checkout experience and doesn't load GTM scripts during checkout (unless you're on Shopify Plus).

This meant we could successfully track:

  • ✓ Product views
  • ✓ Add to cart events
  • ✓ Begin checkout events

But purchase events were missing entirely.

Why It Happens

Even on a headless Hydrogen site, Shopify still owns and manages the checkout process. Because Google Tag Manager isn't available during checkout, any purchase tracking configured solely within the storefront stops once the customer leaves the Hydrogen site.

To capture completed purchases, we needed to use Shopify's native event system instead.

The Solution

Shopify provides a feature called Custom Pixels which allows developers to subscribe to customer events and execute custom JavaScript when those events occur.

For this implementation I subscribed to Shopify's checkout_completed event and used the data provided by Shopify to send a GA4 purchase event directly via gtag.

Implementation

1) Create a Shopify Custom Pixel

Within Shopify Admin:

  • ✓ Settings
  • ✓ Customer Events
  • ✓ Add Custom Pixel

I created a dedicated pixel for GA4 purchase tracking.

2) Subscribe to checkout_completed

The pixel listens for Shopify's checkout completion event and extracts the order data needed by GA4.

3) Format the payload

Using Shopify's checkout object I mapped the required GA4 fields including transaction ID, currency, order value and line items.

4) Send the purchase event

Once the payload had been prepared, the event was sent directly to Google Analytics using gtag.

Testing & Validation

Before considering the implementation complete, I validated everything using GA4's DebugView.

  • ✓ Enabled Google Analytics Debug Mode
  • ✓ Completed a test purchase
  • ✓ Verified transaction values
  • ✓ Confirmed transaction IDs were present
  • ✓ Confirmed line items were included

Once visible in DebugView, I monitored GA4's Events reports to ensure data was flowing through correctly.

Gotchas

  • • GA4 reports can take several hours to update
  • • DebugView updates much faster than standard reports
  • • Ensure the Custom Pixel is published
  • • Double check the Measurement ID
  • • Purchase events may also need importing into Google Ads

If DebugView shows purchase events correctly but reports remain empty, it's often just a case of waiting for GA4 to process the data.

Results

  • ✓ Purchase events successfully captured
  • ✓ Revenue data flowing into GA4
  • ✓ Transaction IDs recorded correctly
  • ✓ Product level purchase data available
  • ✓ Foundation established for Google Ads conversion tracking

Final Thoughts

Purchase tracking on Shopify Hydrogen requires a slightly different approach compared to traditional storefronts, but Shopify's Custom Pixels feature provides a reliable way to bridge the gap between checkout and Google Analytics.

Once implemented and validated, the result is accurate revenue tracking and a much clearer picture of ecommerce performance.