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: Create a hook to get analytics from loaders
Anchor link to section titled "Step 2: Create a hook to get analytics from loaders"Create a utility function that collects the analytics
events from all loaders triggered by the current route navigation.
By default, Remix's built-in useLoaderData
hook, which fires on every route navigation, only returns data from the current route's associated loader. Creating the utility function enables you to aggregate the Store ID from the app root loader function with product data from the $productHandle
loader function.
The following utility function collects all data with an analytics
data key from all loaders using Remix's built-in useMatches
hook.
Step 3: Send page view events to Shopify
Anchor link to section titled "Step 3: 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 4: Send add to cart events to Shopify
Anchor link to section titled "Step 4: Send add to cart events to Shopify"Modify the add to cart button to send add to cart analytics when a successful response from an add to cart action is recieved.
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 public storefront api token must be created by the Hydrogen sales channel. A token created by the Headless channel will not work.
The
storefrontHeaders
prop forcreateStorefrontClient
must be defined.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.