Skip to main content

Analytics.Provider
component

Provides a context for tracking page views and cart events to send as analytics data to Shopify. This component is integrated with the Customer Privacy API for consent management. The provider can also be used to connect third-party analytics services through its subscribe and publish system. The useAnalytics hook provides access to the analytics provider context.

You can also listen to a document event for shopifyCustomerPrivacyApiLoaded. It will be emitted when the Customer Privacy API is loaded.

Anchor to propsProps

Anchor to cart
cart
Promise< | null> | | null
required

The cart or cart promise to track for cart analytics. When there is a difference between the state of the cart, AnalyticsProvider will trigger a cart_updated event. It will also produce product_added_to_cart and product_removed_from_cart based on cart line quantity and cart line id changes.

Anchor to consent
consent
required

The customer privacy consent configuration and options.

Anchor to shop
shop
Promise< | null> | | null
required

The shop configuration required to publish analytics events to Shopify. Use getShopAnalytics.

Anchor to canTrack
canTrack
() => boolean

An optional function to set wether the user can be tracked. Defaults to Customer Privacy API's window.Shopify.customerPrivacy.analyticsProcessingAllowed().

Anchor to children
children
ReactNode

React children to render.

Anchor to cookieDomain
cookieDomain
string

The domain scope of the cookie set with useShopifyCookies. *

Anchor to customData
customData
Record<string, unknown>

An optional custom payload to pass to all events. e.g language/locale/currency.

Anchor to disableThrowOnError
disableThrowOnError
boolean
Deprecated

Disable throwing errors when required props are missing.

Was this section helpful?

Example

import {Analytics, getShopAnalytics} from '@shopify/hydrogen';
import {Outlet, useLoaderData} from 'react-router';

export async function loader({context}) {
const {cart, env} = context;
const cartPromise = cart.get();

return {
cart: cartPromise,
shop: getShopAnalytics(context),
consent: {
checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
withPrivacyBanner: true, // false stops the privacy banner from being displayed
// localize the privacy banner
country: context.storefront.i18n.country,
language: context.storefront.i18n.language,
},
};
}

export default function App() {
const data = useLoaderData();

return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
<Analytics.Provider
cart={data.cart}
shop={data.shop}
consent={data.consent}
>
<Outlet />
</Analytics.Provider>
</body>
</html>
);
}