Shopify analytics

• You've completed the Hydrogen Getting Started with a Hello World example project.
• You can add an item to cart.
• You've set up page view and add to cart analytics events with client-side analytics.

useShopifyCookies creates and refreshes required Shopify cookies when sending analytics to Shopify. It's up to you to decide how to obtain the value for hasUserConsent.

Without hasUserConsent set to true, Shopify cookies are removed.

Use sendShopifyAnalytics to send page view event to Shopify. Refer to the sendShopifyAnalytics documentation for payload requirements.

Make sure hasUserConsent is part of the payload for sendShopifyAnalytics. If hasUserConsent is set to false, no analytics are sent to Shopify.

On home, collection, and product page routes, pass in pageType to help Shopify categorize data. The following example demonstrates how to send route-specific analytics:

Inspect the network request and filter for the monorail-edge.shopifysvc.com endpoint. The request to this endpoint will always return an OK status (Status code 200 or 207). If the request returns a 207 status code, it means there are errors in the request payload. The error messages are returned as part of the response. In development mode, this error outputs to the inspector console.

There are several requirements to see Shopify's Live View working:

• Shopify cookies must be set up properly with useShopifyCookies.
• Only an add to cart mutation query to the Storefront API will trigger an add to cart session in Live View.
• The URL of the add to cart analytics event must not be from localhost or an Oxygen preview link (domains ending with myshopify.dev).

Depending how you've set up your Hydrogen app, it's possible that the Hydrogen app lives on a different subdomain than the checkout. The following is an example:

• Hydrogen app: my-shop.com
• Online Store checkout: checkout.my-shop.com

To ensure that Shopify analytics are working properly across sub domains, do the following:

1. Start from a clean state by clearing out all cookies on page.
2. Navigate to a page on Hydrogen app and keep note of the cookie values and cookie domain for _shopify_y and _shopify_s.
3. Navigate to checkout and make sure the cookies values for _shopify_y and _shopify_s is exactly the same. You might see multiple cookies of the same name, but as long they are the same value, it should be fine.

If you see that the cookie value changes when crossing subdomains, try setting the domain value on useShopifyCookies to your Hydrogen app domain.