Skip to main content

Validating and troubleshooting analytics with Hydrogen

Once you've set up analytics tracking consent and started collecting data, you can test that it's being delivered to Shopify analytics.

Anchor to Check for consent with the Customer Privacy APICheck for consent with the Customer Privacy API

Hydrogen's built-in Analytics components automatically check Shopify's Customer Privacy API for tracking consent before sending any analytics data to Shopify. If you run into problems receiving analytics data, make sure your Hydrogen project is set up for consent, either with Shopify's built in cookie banner or with a third-party service.

Anchor to Check your content security policyCheck your content security policy

If you don't have a content security policy set up for your Hydrogen app, then the Customer Privacy API might have connection errors, which interferes with collecting analytics data. Make sure you've set up CSP for your storefront and checkout domains.

Anchor to Check network traffic for analytics requestsCheck network traffic for analytics requests

To check that analytics data is being delivered, inspect your Hydrogen app's network requests:

  1. Open your Hydrogen storefront in your web browser.
  2. Open your browser developer tools to the Network tab.
  3. Navigate within your Hydrogen storefront to gather network data.
  4. Filter the list of network requests 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.

Anchor to Shopify Live ViewShopify Live View

To ensure your Hydrogen analytics are compatible with Shopify Live View, make sure your app meets the following requirements:

  • Shopify cookies need to be set up properly. If you're using Hydrogen's built-in <Analytics.Provider>, the cookies are set up for you. Otherwise, you should use hydrogen-react package'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:

File

/server.jsx

import {getStorefrontHeaders} from '@shopify/remix-oxygen';
//...
const {storefront} = createStorefrontClient({
cache,
waitUntil,
i18n: getLocaleFromRequest(request),
publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
storeDomain: env.PUBLIC_STORE_DOMAIN,
storefrontId: env.PUBLIC_STOREFRONT_ID,
// Use the header utility built into Hydrogen's React Router adapter:
storefrontHeaders: getStorefrontHeaders(request),
});
import {getStorefrontHeaders} from '@shopify/remix-oxygen';
//...
const {storefront} = createStorefrontClient({
cache,
waitUntil,
i18n: getLocaleFromRequest(request),
publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
storeDomain: env.PUBLIC_STORE_DOMAIN,
storefrontId: env.PUBLIC_STOREFRONT_ID,
// Use the header utility built into Hydrogen's React Router adapter:
storefrontHeaders: getStorefrontHeaders(request),
});

Anchor to Analytics across subdomainsAnalytics 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: https://hydrogen.shop
  • Online Store checkout: https://checkout.hydrogen.shop

You can check that Shopify analytics are working properly across subdomains:

  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 cookieDomain value on <Analytics.Provider> to your Hydrogen app domain:

File

/app/root.jsx

import {Analytics} from '@shopify/hydrogen';

export default function App() {
return {
<html lang="en">
...
<Analytics.Provider
cart={data.cart}
shop={data.shop}
consent={data.consent}
cookieDomain='my-shop.com'
>
...
</Analytics.Provider>
...
</html>
}
}
import {Analytics} from '@shopify/hydrogen';

export default function App() {
return {
<html lang="en">
...
<Analytics.Provider
cart={data.cart}
shop={data.shop}
consent={data.consent}
cookieDomain='my-shop.com'
>
...
</Analytics.Provider>
...
</html>
}
}

If you are using useShopifyCookies, follow this example to set the cookie domain to your Hydrogen app domain:

File

/app/root.jsx

import {useShopifyCookies} from '@shopify/hydrogen';

export default function App() {
useShopifyCookies({hasUserConsent: true, domain: 'my-shop.com'});
import {useShopifyCookies} from '@shopify/hydrogen';

export default function App() {
useShopifyCookies({hasUserConsent: true, domain: 'my-shop.com'});

If the cookie values are still changing when the cookie domain are set, try setting the cookie domain with a leading dot.

File

/app/root.jsx

import {useShopifyCookies} from '@shopify/hydrogen';

export default function App() {
useShopifyCookies({hasUserConsent: true, domain: '.my-shop.com'});
import {useShopifyCookies} from '@shopify/hydrogen';

export default function App() {
useShopifyCookies({hasUserConsent: true, domain: '.my-shop.com'});
Was this page helpful?