Hydrogen storefronts have no Liquid theme, so every theme-app-extension pixel and script tag you relied on disappears. Tracking on Hydrogen works through three mechanisms: Shopify’s web pixel API (loaded via the Customer Events framework), your own server-side instrumentation in the Hydrogen app, and webhook-based relays that capture orders independently of the storefront. This guide covers all three and when to use each.
Why does Hydrogen break standard Shopify tracking?
Most Shopify tracking apps install via theme app extensions — Liquid snippets injected into your theme. Hydrogen has no Liquid layer; it’s a React framework that talks to the Storefront API. Anything that depended on theme injection silently stops firing. Orders still happen in Shopify admin, but the browser-side event pipeline your apps relied on is gone unless you rebuild it.
How do web pixels work on Hydrogen?
Shopify’s Customer Events API lets you load web pixels on any storefront — including Hydrogen — via the Shopify runtime. In Hydrogen you subscribe to analytics events through the useAnalytics hook and forward them to your pixel endpoints. This restores browser-side events (PageView, AddToCart) but remains subject to ad blocking, since the requests still originate in the visitor’s browser.
How do you track purchases reliably on Hydrogen?
The most robust path is server-side: Shopify’s orders/paid webhook fires for every Hydrogen order regardless of what happened in the browser. A relay like PixelRelay captures that webhook and delivers Purchase events to Meta, Google, TikTok, GA4, and Klaviyo with full order data and automatic deduplication. PixelRelay ships a dedicated @pixelrelay/hydrogen package that adds first-party attribution signals (click IDs, customer identity) from your Hydrogen app, giving you browser-event richness with webhook-guaranteed delivery.
What about checkout events?
Checkout behavior (checkout started, payment info submitted) flows through Shopify’s checkout extensions, which work identically for Hydrogen and Liquid stores — the checkout is still Shopify-hosted. Webhook-based capture covers the final purchase; checkout-stage events come from the Customer Events checkout lifecycle or from your own instrumentation if you use a custom checkout flow.
FAQ
Do Shopify’s native Meta and Google apps work on Hydrogen? Partially — their server-side legs (CAPI, offline conversions) still fire from Shopify’s infrastructure, but their browser pixels depend on theme injection and need web-pixel configuration on Hydrogen.
Can I use GTM on Hydrogen? Yes, via manual injection through the Customer Events API or your own script loading — but you’re maintaining custom wiring that a managed relay avoids.
Does @pixelrelay/hydrogen require theme changes? There is no theme. The package integrates at the Hydrogen app level: install it in your server entry point and it handles attribution capture alongside the webhook relay.
