Set up analytics instrumentation

Analytics is important in commerce to allow for measuring results and drive business decisions. In this tutorial, you'll learn how to instrument analytics on page view and cart-related interaction events. You can report these events to Shopify and to third party analytics tools like Google Analytics.

Requirements

Anchor link to section titled "Requirements"

You've completed the quickstart guide.
You can add an item to cart.

Step 1: Set up the page view event

Anchor link to section titled "Step 1: Set up the page view event"

Set up your Remix app to recieve page view events.

Use Remix's useLocation to attach the page view event.
From any loader, return an object with the desired analytics data. The following example uses analytics as the common data key:
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 the utility function to retrieve object that contains any data from any loader with the data key analytics

Step 2: Set up a cart interaction event

Anchor link to section titled "Step 2: Set up a cart interaction event"

Interaction events that expects a response from an API endpoint are often implemented with Remix's actions. If you followed the tutorial for adding an item to cart, your add to cart button makes a request to the cart action. Collecting analytics data from actions is slightly different from loaders.

From any action, return an object with the desired analytics data. The following example uses analytics as the common data key:
With a fetcher.form, you can add additional data as hidden form inputs under the same data key as long as it is JSON parseable.
Capture all action events using Remix's built-in useFetchers.

This step prevents you from having to individually manage the action event where the buttons are defined, because it's common to have add-to-cart button appearing on every page of a storefront.

The following utility function collects all data with an analytics data key from all inflight fetchers. This includes data from an action response and data from form inputs:
Use the utility function to retrieve an object that contains any data from any fetcher with the analytics data key.

Next steps

Anchor link to section titled "Next steps"

Set up Shopify analytics.