In this tutorial, you'll learn how to send analytics to Shopify so that the Shopify admin's console's analytics dashboards and Live View will work.
RequirementsAnchor link to section titled "Requirements"
- You've completed the Hydrogen Getting Started with a
Hello Worldexample project.
- You can add an item to cart.
- You've set up page view and add to cart analytics events with client-side analytics.
Step 1: Set up Shopify cookiesAnchor link to section titled "Step 1: Set up Shopify cookies"
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 set to
true, Shopify cookies are removed.
Step 2: Send page view events to ShopifyAnchor link to section titled "Step 2: Send page view events to Shopify"
sendShopifyAnalytics to send page view event to Shopify. Refer to the
sendShopifyAnalytics documentation for payload requirements.
hasUserConsent is part of the payload for
hasUserConsent is set to false, no analytics are sent to Shopify.
Identify the page typeAnchor link to section titled "Identify the page type"
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:
Step 3: Send add to cart events to ShopifyAnchor link to section titled "Step 3: Send add to cart events to Shopify"
TroubleshootingAnchor link to section titled "Troubleshooting"
How do I know Shopify analytics is working?Anchor link to section titled "How do I know Shopify analytics is working?"
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
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.
I don't see Shopify Live View workingAnchor link to section titled "I don't see Shopify Live View working"
There are several requirements to see Shopify's Live View working:
- Shopify cookies must be set up properly with
- 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
localhostor an Oxygen preview link (domains ending with
How do I ensure Shopify analytics are working cross sub domains?Anchor link to section titled "How do I ensure Shopify analytics are working cross sub domains?"
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:
- Online Store checkout:
To ensure that Shopify analytics are working properly across sub domains, do the following:
- Start from a clean state by clearing out all cookies on page.
- Navigate to a page on Hydrogen app and keep note of the cookie values and cookie domain for
- Navigate to checkout and make sure the cookies values for
_shopify_sis 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.