Analytics with Hydrogen and Oxygen
Hydrogen provides recommended patterns for collecting and transmitting website metrics to Shopify analytics, which enables you to view metrics in real time, directly in the Shopify admin.
RequirementsAnchor link to section titled "Requirements"
- You've completed the Hydrogen Getting Started guide and have a working storefront.
Set up Shopify analyticsAnchor link to section titled "Set up Shopify analytics"
The two most common metrics for tracking online commerce performance are page views and cart events.
Validate that analytics are workingAnchor link to section titled "Validate that analytics are working"
To check that analytics data is being sent to Shopify analytics as expected, inspect your Hydrogen app's requests in your browser's developer tools network tab, and filter for the
Requests to this endpoint return an HTTP response status code of
200 OK or
200status code means the data upload succeeded as expected.
207status code means there are errors in the request payload. Any related error messages are returned as part of the response. When running your app in development mode, error messages output to the browser console.
Shopify Live ViewAnchor link to section titled "Shopify Live View"
To ensure your Hydrogen storefront analytics are compatible with Shopify Live View, make your app meets the following requirements:
- Shopify cookies need be set up properly, using Hydrogen’s
- Your app's Storefront API token must be created and managed through the Hydrogen sales channel. Tokens created with other channels won't work.
- For add-to-cart analytics events, the referring URL can't be
localhostor an Oxygen preview environment URL ending in
createStorefrontClientmust be defined:
Analytics across subdomainsAnchor link to section titled "Analytics across subdomains"
Depending how you've set up your Hydrogen app, it's possible that the Hydrogen app is hosted on a different subdomain than the checkout. For example:
- Hydrogen app:
- Online Store checkout:
To ensure that Shopify analytics are working properly across subdomains, do the following:
- Clear the cookies for the page.
- Navigate to a page on Hydrogen app and note the cookie values and cookie domain for the
- Navigate to the checkout and make sure the cookie values for
_shopify_sare exactly the same. You might see multiple cookies with the same name. This isn't a problem as long as the cookies contain the same value.
If the cookie value changes when crossing subdomains, then try setting the domain value on
useShopifyCookies to your Hydrogen app domain: