Track Hydrogen page views with Shopify analytics
This tutorial shows you how to track page view events in Hydrogen and send the data to Shopify analytics.
Tracking page view events relies on collecting analytics from Remix loader functions. On each page load, Remix runs all of the loader functions required to render the page. Within those functions, you can return relevant analytics data about the rendered page.
Requirements
Anchor link to section titled "Requirements"- You’ve created a Hydrogen app and connected it to your Shopify store.
Step 1: Create a custom hook to collect analytics data
Anchor link to section titled "Step 1: Create a custom hook to collect analytics data"To collect analytics data from all the nested routes that make up a single rendered page view, you’ll first create a custom hook for your Hydrogen app. This hook can then be called on any route.
The following custom hook combines analytics objects returned by all of the loaders that run for each page navigation. It uses Remix's useMatches hook to aggregate the data.
You can keep this function anywhere you prefer, but in this example it's in a new /app/utils.jsx file.
The next step is to define analytics data to return from individual routes.
Step 2: Return analytics data from Remix loader functions
Anchor link to section titled "Step 2: Return analytics data from Remix loader functions"Using the usePageAnalytics hook you created in Step 1, you can now collect and aggregate analytics data from each route as it's rendered. By returning data from each nested route, you can build complete data about each page as it's rendered.
In the following simplified examples, two nested routes return two different analytics objects that get merged by the utility created in the previous step.
Each of these objects should have the same key name, analytics. Using a common key name allows data from multiple nested routes to be consolidated.
This loader function, from the root route, returns an analytics object containing the store's shop ID, since that remains constant across every page of your app:
Product route
Anchor link to section titled "Product route"This loader function, from the $productHandle.jsx route, returns an analytics object containing a pageType value and the product data:
You now have analytics data being returned by loader functions, as well as a way to consolidate that data. The last step is to send the data to Shopify on each page view event.
Step 3: Upload analytics data on each page view
Anchor link to section titled "Step 3: Upload analytics data on each page view"In your root file App() function, use React's useEffect hook to transmit the analytics data every time a page loads. Remix’s useLocation hook provides a way to tell when the user navigates to a new page.
In addition to the custom hook created above, this implementation uses several built-in Hydrogen utilities:
| Utility | Description |
|---|---|
AnalyticsEventName |
The list of event types accepted by Shopify analytics. |
getClientBrowserParameters |
A function that returns information about the user's browser. |
sendShopifyAnalytics |
A function that handles sending data to Shopify analytics. |
useShopifyCookies |
A hook to manage Shopify-related cookies. If its hasUserConsent value isn't true, then Shopify cookies are removed, and no analytics data is transmitted. It’s up to you to determine that the user has given their consent. You can also integrate the Customer Privacy API to pass consent to Shopify. |
Your app now collects analytics data on every page view and sends that data to Shopify analytics.