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.
Requirements
Anchor link to section titled "Requirements"- You've completed the Hydrogen Getting Started guide and have a working storefront.
Set up Shopify analytics
Anchor 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 working
Anchor 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 monorail-edge.shopifysvc.com
endpoint.
Requests to this endpoint return an HTTP response status code of 200 OK
or 207 Multi-Status
.
- A
200
status code means the data upload succeeded as expected. - A
207
status 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 View
Anchor 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
useShopifyCookies
hook. - 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
localhost
or an Oxygen preview environment URL ending inmyshopify.dev
. The
storefrontHeaders
prop forcreateStorefrontClient
must be defined:
Analytics across subdomains
Anchor 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:
my-shop.com
- Online Store checkout:
checkout.my-shop.com
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
_shopify_y
and_shopify_s
cookies. - Navigate to the checkout and make sure the cookie values for
_shopify_y
and_shopify_s
are 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: