Analytics event tracking with Hydrogen
Learn how to implement analytics events in your Hydrogen project and send tracked events to Shopify analytics and, optionally, third-party services.
Anchor to Update ,[object Object],[object Object]Update root.jsx
To start sending analytics events, you need to set up the Analytics component in your Hydrogen project's root route.
Import the Analytics component and the getShopAnalytics utility from Hydrogen.
The Analytics component automatically checks for consent before collecting any event data.
Update the root loader function to destructure the env object from the Hydrogen context.
Return the shop object by calling the getShopAnalytics utility. This function automatically collects the credentials required to send analytics events to Shopify.
Return the consent object with its required values. If you're using Shopify's cookie banner, then make sure withPrivacyBanner is set to true.
Update the root component to wrap your Hydrogen app with the Analytics provider component.
At this point, your app is set up to send analytics events to Shopify, but there aren't any events configured. In the next step, we'll add events to your storefront routes.
Anchor to Update routes with analytics subcomponentsUpdate routes with analytics subcomponents
To track page views, you need to add pageview components to each route you want to track.
In your product details page route, import the Analytics component from Hydrogen.
Add the Analytics.ProductView component to your nested route. This component sends a pageview event to Shopify when the route is loaded. The ProductView subcomponent takes a data prop with the product data to send to Shopify.
Repeat this pattern for each route you want to track. Different routes have different preset analytics subcomponents, and require different data payloads.
Follow the same pattern for collections routes...
...the search results route...
...and the cart route.
If your cart is a side panel, you can publish the cart_viewed event with useAnalytics.
If you get the following error message in your browser console, make sure your cart query includes theupdatedAt field.
[h2:error:CartAnalytics] Can't set up cart analytics events because the `cart.updatedAt` value is missing from your GraphQL cart query. In standard Hydrogen projects, the cart query is contained in `app/lib/fragments.js`. Make sure it includes `cart.updatedAt`.
Anchor to Optional: Implement custom analytics with third-party servicesOptional: Implement custom analytics with third-party services
Using the Analytics provider component, you can create your own subcomponents to send events to third-party analytics services, in addition to Shopify.
In your custom component file, import the useAnalytics hook from Hydrogen.
Export your custom component so it can be used in your Hydrogen routes.
The subscribe function provided by useAnalytics listens for standard analytics events from your routes, and provides a callback function with the corresponding data.
Register the analytics integration with <Analytics.Provider>. This will prevent any analytics events from being sent until this integration is ready.
For each event you want to track in your custom analytics component, use the subscribe function to listen for the event and send the analytics data to your third-party analytics platform.
This example just logs the event data to the console. It's up to you to replace this with your own custom analytics logic, depending on the platform you're using.
Notify <Analytics.Provider> that this analytics integration is ready to receive events.
Once you've created your custom analytics component, import it into your root route.
Add your custom component to your app's root layout. Your component needs to be a child of the Analytics.Provider component in order to subscribe to events and receive analytics data.
