Once you've set up analytics tracking consent and started collecting data, you can test that it's being delivered to Shopify analytics. ## Check for consent with the Customer Privacy API Hydrogen’s built-in Analytics components automatically check Shopify's [Customer Privacy API](/docs/api/customer-privacy) 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](/docs/storefronts/headless/hydrogen/analytics/consent) or [with a third-party service](/docs/storefronts/headless/hydrogen/analytics/consent-3p). ## Check your content security policy If you don't have a [content security policy](/docs/storefronts/headless/hydrogen/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](/docs/storefronts/headless/hydrogen/analytics/consent#add-your-domains-to-your-content-security-policy) for your storefront and checkout domains. ## Check 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. 1. Open your browser developer tools to the **Network** tab. 1. Navigate within your Hydrogen storefront to gather network data. 1. 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. ## Shopify Live View To ensure your Hydrogen analytics are compatible with [Shopify Live View](https://help.shopify.com/manual/reports-and-analytics/shopify-reports/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 [``](/docs/api/hydrogen/current/components/analytics/analytics-provider), the cookies are set up for you. Otherwise, you should use `hydrogen-react` package’s [`useShopifyCookies`](/docs/api/hydrogen-react/latest/hooks/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](/docs/storefronts/headless/hydrogen/environments) URL ending in `myshopify.dev`. - The `storefrontHeaders` prop for `createStorefrontClient` must be defined: ```jsx?filename: '/server.jsx', title: 'JavaScript' 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 Remix adapter: storefrontHeaders: getStorefrontHeaders(request), }); ``` ```tsx?filename: '/server.tsx', title: 'TypeScript' 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 Remix adapter: storefrontHeaders: getStorefrontHeaders(request), }); ``` ## 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: `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. 1. Navigate to a page on Hydrogen app and note the cookie values and cookie domain for the `_shopify_y` and `_shopify_s` cookies. 1. 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 [``](/docs/api/hydrogen/current/components/analytics/analytics-provider) to your Hydrogen app domain: ```jsx?filename: '/app/root.jsx', title: 'JavaScript' import {Analytics} from '@shopify/hydrogen'; export default function App() { return { ... ... ... } } ``` ```tsx?filename: '/app/root.tsx', title: 'TypeScript' import {Analytics} from '@shopify/hydrogen'; export default function App() { return { ... ... ... } } ``` If you are using [`useShopifyCookies`](/docs/api/hydrogen-react/latest/hooks/useshopifycookies), follow this example to set the cookie domain to your Hydrogen app domain: ```jsx?filename: '/app/root.jsx', title: 'JavaScript' import {useShopifyCookies} from '@shopify/hydrogen'; export default function App() { useShopifyCookies({hasUserConsent: true, domain: 'my-shop.com'}); ``` ```tsx?filename: '/app/root.tsx', title: 'TypeScript' 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. ```jsx?filename: '/app/root.jsx', title: 'JavaScript' import {useShopifyCookies} from '@shopify/hydrogen'; export default function App() { useShopifyCookies({hasUserConsent: true, domain: '.my-shop.com'}); ``` ```tsx?filename: '/app/root.tsx', title: 'TypeScript' import {useShopifyCookies} from '@shopify/hydrogen'; export default function App() { useShopifyCookies({hasUserConsent: true, domain: '.my-shop.com'}); ```