PixelRelay sets up differently for Hydrogen (headless) stores vs standard Liquid Online Store themes.
| Online Store (Liquid) | Hydrogen | |
|---|---|---|
| Checkout pixel (checkout started, payment, completed) | Automatic | Automatic, same Shopify checkout |
| Server-side order capture (authoritative purchase) | Automatic | Automatic |
| Storefront events (page view, product view, cart) | Automatic, theme app embed | Manual, @pixelrelay/hydrogen + provider |
| SPA page-view tracking | Full page loads (MPA) | Automatic via analytics bus or useLocation fallback |
| Cart attribution (click IDs on cart) | Automatic via theme JS | Automatic via Storefront API on mount |
| Ad-block resilience (storefront) | First-party theme script | First-party /api/relay proxy |
| Content-Security-Policy | Nothing to change | Required, pixelRelayCspDirectives() in entry.server.tsx |
| Setup time | Install app + enable theme embed | About 10 minutes, npm + provider + proxy + CSP |
| Code changes in storefront | No | Yes, see Hydrogen quickstart |
Checkout and purchase — Shopify-hosted checkout is the same. The Web Pixel registered by PixelRelay fires checkout events identically. Server-side order capture fires for every purchase.
Relay destinations — GA4, Meta CAPI, TikTok, Google Ads, Bing, Reddit, LinkedIn, Snapchat, Pinterest, Segment, and Klaviyo (Growth+) work the same once events reach the relay.
Server-side order attribution — The relay reads _relay_* cart attributes (durable ID, fbp, fbc, click IDs) written client-side. Works the same for Hydrogen shops.
Liquid stores get storefront events via the theme app extension. Hydrogen merchants own their Remix codebase, so you install @pixelrelay/hydrogen, add the /api/relay proxy route, allow the vendor tags in your CSP, add <PixelRelayProvider>, and drop Hydrogen <Analytics.*> components on the pages that need them.
Hydrogen can expose better storefront coverage in some cases: product_removed_from_cart fires on Hydrogen but not on the native Web Pixel, and each browser adapter reports whether its own dispatch was sent, blocked, or refused by consent.
| Liquid | Hydrogen | |
|---|---|---|
| Storefront events | First-party theme script | First-party proxy route |
| Checkout events | Third-party (checkout.shopify.com) | Same |
| Purchase fallback | Server-side order (immune) | Server-side order (immune) |
Both storefront paths are equally resilient. Checkout pixels remain third-party; server-side order capture is the unblockable purchase spine for both.