Analytics with Hydrogen and Oxygen

• You've completed the Hydrogen Getting Started guide and have a working storefront.

The two most common metrics for tracking online commerce performance are page views and cart events.

Track page views with Hydrogen

Set up your Hydrogen app to collect page view analytics and send the data to Shopify.

Track cart events with Hydrogen

Set up your Hydrogen app to collect events like add-to-cart actions and send the data to Shopify.

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.

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 in myshopify.dev.

• The storefrontHeaders prop for createStorefrontClient must be defined:

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:

1. Clear the cookies for the page.
2. Navigate to a page on Hydrogen app and note the cookie values and cookie domain for the _shopify_y and _shopify_s cookies.
3. 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: