Shopify analytics
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.
Requirements
Anchor link to section titled "Requirements"- 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.
Step 1: Set up Shopify cookies
Anchor 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
.
Without hasUserConsent
set to true
, Shopify cookies are removed.
Step 2: Send page view events to Shopify
Anchor link to section titled "Step 2: Send page view events to Shopify"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.
Identify the page type
Anchor 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 Shopify
Anchor link to section titled "Step 3: Send add to cart events to Shopify"
Troubleshooting
Anchor 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 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.
I don't see Shopify Live View working
Anchor 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
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 withmyshopify.dev
).
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:
my-shop.com
- Online Store checkout:
checkout.my-shop.com
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
_shopify_y
and_shopify_s
. - 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.