A Hydrogen store can track page views, product views, collection views, cart views, searches, add to cart and remove from cart on the storefront, plus checkout started and payment info submitted in Shopify checkout, and the purchase from the Shopify order. Custom events, like a lead or quiz completion, can be sent too.
Most storefront events come from Hydrogen’s own <Analytics.*> components. Two are better sent from a PixelRelay hook, because Hydrogen’s analytics bus stops when an ad blocker stalls it.
| How it fires | Survives a stalled analytics bus? | |
|---|---|---|
page_viewed | Every client-side route change, once the provider is mounted | Yes — falls back to useLocation |
product_viewed | <Analytics.ProductView>, or useTrackEvent('product_viewed') | Only with the hook |
product_added_to_cart | useTrackAddToCart() on your button | Yes |
product_removed_from_cart | Analytics bus, when a line is reduced or removed | No |
cart_viewed | <Analytics.CartView> | No |
collection_viewed | <Analytics.CollectionView> | No |
search_submitted | <Analytics.SearchView>, or useTrackEvent('search_submitted') | Only with the hook |
Server-side names for the main storefront events. Page views go server-side only when Track page views server-side is on; Google Ads browse uploads are off by default, and its browser tag sends those instead. The event reference has the full matrix, including Pinterest, Snapchat, Reddit, Microsoft Ads and Segment.
| Product view | Add to cart | |
|---|---|---|
| GA4 | view_item | add_to_cart |
| Meta | ViewContent | AddToCart |
| TikTok | ViewContent | AddToCart |
| Google Ads | view_item | add_to_cart |
| Klaviyo | Viewed Product | Added to Cart |
Your Hydrogen app doesn’t send checkout or purchase conversions. Call useTrackCheckout(cart) before following the checkout URL: it writes attribution and a short-lived signed token onto the cart. PixelRelay’s Web Pixel inside Shopify checkout then sends checkout_started and payment_info_submitted, and Shopify’s order webhook sends the purchase. The order is the source of truth, so purchase-class custom events without an order ID are dropped.
Each event carries the ad-click identifiers each platform needs to credit the sale, when they are present. They’re also written onto the cart, so the purchase from the order webhook is attributed the same way.
| Captured | From | |
|---|---|---|
| Meta | fbp, fbc | Meta cookies, or fbclid in the URL |
| Google Ads | gclid, gbraid, wbraid | Landing URL, including iOS click IDs |
| TikTok | ttclid, ttp | Landing URL and TikTok cookie |
| Microsoft Ads | msclkid | Landing URL |
| Snapchat | scid, sccid | Snapchat cookie and ScCid click ID |
Yes. useTrackEvent() sends any named event, such as a lead or a quiz completion. Custom events go to GA4 and Segment only: GA4 receives the event name and ID, Segment receives your properties. An email is never sent raw — it is only used to build Segment’s hashed user ID.
PRODUCT_ADD_TO_CART while its analytics bus is alive, and ad blockers can stall the bus. Call useTrackAddToCart() from the button’s click handler so the event fires either way; the hook suppresses the matching bus event so unblocked visitors aren’t counted twice.<PixelRelayProvider> is mounted in root.tsx. Product, collection, cart and search views need the matching Hydrogen <Analytics.*> component on those routes.Each guide covers one platform or layer of a Hydrogen setup. The Hydrogen quickstart has the full install, step by step.