Set up analytics instrumentation

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

Set up your Remix app to recieve page view events.

1. Use Remix's useLocation to attach the page view event.

2. From any loader, return an object with the desired analytics data. The following example uses analytics as the common data key:

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

4. Use the utility function to retrieve an object that contains any data from any loader with the data key analytics

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

1. From any action, return an object with the desired analytics data. The following example uses analytics as the common data key:

2. With a CartForm, you can add additional data as hidden form inputs under the same data key as long as it is JSON parseable.

3. Use the fetcher provided by CartForm to know when to send analytics after an interaction. For example, we want to send an add to cart analytics event after we obtained a successful response from the fetcher request. Create a wrapper component that handles add to cart analytics.

4. Add the AddToCartAnalytics wrapper component to the AddToCartButton

• Set up Shopify analytics.