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.

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.

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:

Modify the add to cart button to send add to cart analytics when a successful response from an add to cart action is recieved.

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 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 for createStorefrontClient must be defined.

• 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.