How to Integrate Google Analytics with Shopify Hydrogen: A Step-by-Step Guide

In today's digital age, understanding user behavior is crucial for optimizing online stores. Google Analytics, a powerful tool for tracking website traffic and user interactions, can now be seamlessly integrated with Shopify Hydrogen stores.

This integration empowers you to gain valuable insights into your customers' journey and make data-driven decisions to enhance your store's performance.

Key Features of Google Analytics Integration with Hydrogen

• Built-in Support for Shopify's Customer Privacy API: Ensures compliance with privacy regulations.
• Works with Shopify Analytics Out of the Box: Provides a unified analytics solution.
• New useAnalytics Hook: Simplifies event tracking and data collection.
• Integration with Google Tag Manager: Enables advanced tracking and customization.

Step-by-Step Guide to Integrating Google Analytics

Step 1: Update root.jsx

This is the core file of your Hydrogen app. We'll make some changes to it to enable Google Analytics tracking.

Import Necessary Components: JavaScript Here, we're importing two components from the @shopify/hydrogen package. Analytics is the main component for setting up Google Analytics, and getShopAnalytics helps us fetch information about your Shopify store.

import { Analytics, getShopAnalytics } from '@shopify/hydrogen';

Destructure env Object: JavaScript This line extracts the env object from the Hydrogen context. This object contains environment variables, which we'll use later to configure Google Analytics.

const { env } = useHydrogen();

Fetch Shop Analytics: JavaScript This line calls the getShopAnalytics function to fetch information about your Shopify store, such as the store ID and API keys. This information is necessary for Google Analytics to track events and send data to Shopify.

const shop = await getShopAnalytics();

Set Consent Configuration: JavaScript This line sets up the consent configuration for Google Analytics. The withPrivacyBanner property is set to true, which indicates that you're using Shopify's built-in privacy banner to obtain user consent for tracking.

const consent = {
withPrivacyBanner: true, // Adjust based on your privacy banner setup
};

Wrap App with Analytics Provider: JavaScript Finally, we wrap our entire Hydrogen app with the Analytics provider component. This component provides the necessary context for tracking events and sending data to Google Analytics.

<Analytics shop={shop} consent={consent}>
<YourHydrogenApp />
</Analytics>

Step 2: Track Page Views with Analytics Subcomponents

To track page views, we'll use pre-built subcomponents provided by Hydrogen.

Import Analytics Component: JavaScript

import { Analytics } from '@shopify/hydrogen';

Add Subcomponent to Route: JavaScript Here, we're adding the Analytics.ProductView subcomponent to a product details page. This component automatically sends a page view event to Google Analytics when the page is loaded. It also sends additional product information to help you analyze user behavior. You can use similar subcomponents for other pages, such as:

<Analytics.ProductView data={product} />

• Analytics.CollectionView for collection pages
• Analytics.SearchView for search results pages
• Analytics.CartView for the cart page

Step 3: Implement Custom Analytics with Third-Party Services

Hydrogen also allows you to create custom analytics components to track specific events or send data to third-party analytics services.

Import useAnalytics Hook: JavaScript

import { useAnalytics } from '@shopify/hydrogen';

Subscribe to Events: JavaScript The useAnalytics hook provides a subscribe function that allows you to listen for specific events. In this example, we're subscribing to the product_viewed event. When this event is triggered, the callback function is executed, and you can send the product data to your third-party analytics service.

const { subscribe } = useAnalytics();

subscribe('product_viewed', (product) => {
// Send data to your third-party analytics service
});

Register Integration with Analytics.Provider: JavaScript You'll need to register your custom analytics component with the Analytics.Provider component. This ensures that your component can receive analytics events and send data to your third-party service.

<Analytics.Provider>
{/* ... */}
<YourCustomAnalyticsComponent />
</Analytics.Provider>

Custom Event Options

• cart_update
• cart_viewed
• collection_viewed
• product_viewed
• product_added_to_cart
• product_removed_from_cart
• search_viewed

By following these steps, you can effectively integrate Google Analytics with your Shopify Hydrogen store. This powerful combination will provide you with valuable insights into your customers' behavior, helping you make data-driven decisions to optimize your store's performance and drive sales.