Hydrogen removes the Liquid theme, and with it every theme-based tracking snippet. Server-side tracking puts the events back: storefront activity goes through a route on your own domain, and the purchase comes straight from Shopify’s order webhook.
Server-side tracking on Hydrogen means your shopping events reach Meta, Google Ads, GA4, TikTok and other platforms from a server instead of only from tags in the shopper’s browser. Storefront events post to a route on your own domain, your Hydrogen server forwards them, and the purchase is sent from the Shopify order itself.
Browser tags still have a job — they set the cookies platforms use to match a visitor — but a blocked or failed tag no longer means a missing event.
Standard Shopify tracking lives in the theme: app embeds, theme scripts and the online store’s pixel setup. A Hydrogen storefront is your own React app, so none of that loads. Checkout still runs on Shopify, but product views, add to cart and search happen in code your team owns, and nothing reports them until you instrument them.
Hydrogen’s built-in analytics bus helps, but it runs in the browser. An ad blocker that stalls the bus silently drops the events that depend on it.
A Hydrogen store is tracked in three layers. Only the first needs code from your team; checkout and purchase are picked up automatically once PixelRelay is installed on the store.
| What sends it | Setup | |
|---|---|---|
| Storefront events — page, product, collection and cart views, search, add to cart | @pixelrelay/hydrogen in your app, through your own /api/relay route | About 10 minutes: npm package, provider, proxy route, CSP |
| Checkout events — checkout started, payment info submitted | PixelRelay’s Web Pixel inside Shopify checkout | Automatic |
| Purchase | Shopify’s order webhook, server to server | Automatic |
The browser posts events to /api/relay on your own domain. Your Hydrogen server adds a per-store secret and forwards them to PixelRelay, so there is no third-party tracking request in the browser for a filter list to match, and no PixelRelay script to blocklist — the client is compiled into your bundle as a normal npm import.
The secret is read from your server environment and never sent to the browser. The same route hands the provider your connected platform IDs, so you don’t paste pixel IDs into code. See the proxy route guide for exactly what it does.
Once events reach the relay, Hydrogen stores send to the same destinations as any PixelRelay store: GA4, Meta Conversions API, Google Ads, TikTok Events API, Microsoft Ads, Pinterest, Snapchat, Reddit, LinkedIn, Segment and Klaviyo. Which event goes where is in the Hydrogen event tracking guide.
Where a platform gets both a browser and a server copy of an event, the two share an event ID so the platform counts it once. PixelRelay never sends the same order twice, but it can’t merge with a copy another tool sends — turn old tracking off when you switch.
Run npx pixelrelay-hydrogen-verify against your dev server: it calls your proxy route with your token and checks the shop binding and that your plan includes Hydrogen. Then click around with the Network tab open and look for POST /api/relay returning 204. Turn on an ad blocker and try again — the requests still go through because they go to your own domain.
After launch, the PixelRelay event log shows each event’s delivery outcome by destination, so you can check again after every release.
PIXEL_RELAY_SECRET in your Oxygen environment as well as locally.useTrackCheckout() before sending the shopper to checkout so attribution is written onto the cart; Shopify takes it from there.Each guide covers one platform or layer of a Hydrogen setup. The Hydrogen quickstart has the full install, step by step.