Choose a version:

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.

Anchor to propsProps

Anchor to cart cart | Promise<> 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 shop shop | Promise<> required: The shop configuration required to publish analytics events to Shopify. Use getShopAnalytics.
Anchor to consent consent Partial< Pick< , 'checkoutDomain' | 'storefrontAccessToken' | 'withPrivacyBanner' > > required: The customer privacy consent configuration and options.
Anchor to children children ReactNode: React children to render.
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 customData customData Record<string, unknown>: An optional custom payload to pass to all events. e.g language/locale/currency.
Anchor to disableThrowOnError disableThrowOnError boolean: Disable throwing errors when required props are missing.
Anchor to cookieDomain cookieDomain string: The domain scope of the cookie set with useShopifyCookies. *

AnalyticsProviderProps

children
React children to render.
```
ReactNode
```
cart
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.
```
CartReturn | Promise<CartReturn>
```
canTrack
An optional function to set wether the user can be tracked. Defaults to Customer Privacy API's `window.Shopify.customerPrivacy.analyticsProcessingAllowed()`.
```
() => boolean
```
customData
An optional custom payload to pass to all events. e.g language/locale/currency.
```
Record<string, unknown>
```
shop
The shop configuration required to publish analytics events to Shopify. Use [`getShopAnalytics`](/docs/api/hydrogen/2024-04/utilities/getshopanalytics).
```
ShopAnalytics | Promise<ShopAnalytics>
```

consent

The customer privacy consent configuration and options.

Partial<
    Pick<
      CustomerPrivacyApiProps,
      'checkoutDomain' | 'storefrontAccessToken' | 'withPrivacyBanner'
    >
  >

disableThrowOnError
Disable throwing errors when required props are missing.
```
boolean
```
cookieDomain
The domain scope of the cookie set with `useShopifyCookies`. *
```
string
```

{
  /** React children to render. */
  children?: ReactNode;
  /** 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. */
  cart: Promise<CartReturn | null> | CartReturn | null;
  /** An optional function to set wether the user can be tracked. Defaults to Customer Privacy API's `window.Shopify.customerPrivacy.analyticsProcessingAllowed()`. */
  canTrack?: () => boolean;
  /** An optional custom payload to pass to all events. e.g language/locale/currency. */
  customData?: Record<string, unknown>;
  /** The shop configuration required to publish analytics events to Shopify. Use [`getShopAnalytics`](/docs/api/hydrogen/2024-04/utilities/getshopanalytics). */
  shop: Promise<ShopAnalytics | null> | ShopAnalytics | null;
  /** The customer privacy consent configuration and options. */
  consent: Partial<
    Pick<
      CustomerPrivacyApiProps,
      'checkoutDomain' | 'storefrontAccessToken' | 'withPrivacyBanner'
    >
  >;
  /** Disable throwing errors when required props are missing. */
  disableThrowOnError?: boolean;
  /** The domain scope of the cookie set with `useShopifyCookies`. **/
  cookieDomain?: string;
}

CartReturn

Cart & {
  errors?: StorefrontApiErrors;
}

Cart

Cart

StorefrontApiErrors

JsonGraphQLError[] | undefined

ShopAnalytics

shopId
The shop ID.
```
string
```
acceptedLanguage
The language code that is being displayed to user.
```
LanguageCode
```
currency
The currency code that is being displayed to user.
```
CurrencyCode
```
hydrogenSubchannelId
The Hydrogen subchannel ID generated by Oxygen in the environment variable.
```
string
```

{
  /** The shop ID. */
  shopId: string;
  /** The language code that is being displayed to user. */
  acceptedLanguage: LanguageCode;
  /** The currency code that is being displayed to user. */
  currency: CurrencyCode;
  /** The Hydrogen subchannel ID generated by Oxygen in the environment variable. */
  hydrogenSubchannelId: string | '0';
}

CustomerPrivacyApiProps

checkoutDomain
The production shop checkout domain url.
```
string
```
storefrontAccessToken
The storefront access token for the shop.
```
string
```
withPrivacyBanner
Whether to load the Shopify privacy banner as configured in Shopify admin. Defaults to true.
```
boolean
```
onVisitorConsentCollected
Callback to be called when visitor consent is collected.
```
(consent: VisitorConsentCollected) => void
```
onReady
Callback to be call when customer privacy api is ready.
```
() => void
```

{
  /** The production shop checkout domain url.  */
  checkoutDomain: string;
  /** The storefront access token for the shop. */
  storefrontAccessToken: string;
  /** Whether to load the Shopify privacy banner as configured in Shopify admin. Defaults to true. */
  withPrivacyBanner?: boolean;
  /** Callback to be called when visitor consent is collected. */
  onVisitorConsentCollected?: (consent: VisitorConsentCollected) => void;
  /** Callback to be call when customer privacy api is ready. */
  onReady?: () => void;
}

VisitorConsentCollected

analyticsAllowed
```
boolean
```
firstPartyMarketingAllowed
```
boolean
```
marketingAllowed
```
boolean
```
preferencesAllowed
```
boolean
```
saleOfDataAllowed
```
boolean
```
thirdPartyMarketingAllowed
```
boolean
```

{
  analyticsAllowed: boolean;
  firstPartyMarketingAllowed: boolean;
  marketingAllowed: boolean;
  preferencesAllowed: boolean;
  saleOfDataAllowed: boolean;
  thirdPartyMarketingAllowed: boolean;
}

PrivacyBanner

loadBanner

(options: CustomerPrivacyConsentConfig) => void

{
  loadBanner: (options: CustomerPrivacyConsentConfig) => void;
}

CustomerPrivacyConsentConfig

checkoutRootDomain
```
string
```
storefrontRootDomain
```
string
```
storefrontAccessToken
```
string
```

{
  checkoutRootDomain?: string;
  storefrontRootDomain?: string;
  storefrontAccessToken?: string;
}

Was this section helpful?

Example

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

import {defer} from '@shopify/remix-oxygen';

import {Outlet, useLoaderData} from '@remix-run/react';

export async function loader({context}) {

const {cart, env} = context;

const cartPromise = cart.get();

return defer({

cart: cartPromise,

shop: getShopAnalytics(context),

consent: {

checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,

storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,

});

}

export default function App() {

const data = useLoaderData();

return (

<head>

</head>

<body>

<Analytics.Provider

cart={data.cart}

shop={data.shop}

consent={data.consent}

</Analytics.Provider>

</body>

</html>

);

}

examples

example

description

This is the default example

JavaScript

import {Analytics, getShopAnalytics} from '@shopify/hydrogen';
import {defer} from '@shopify/remix-oxygen';
import {Outlet, useLoaderData} from '@remix-run/react';

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

  return defer({
    cart: cartPromise,
    shop: getShopAnalytics(context),
    consent: {
      checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
      storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
    },
  });
}

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>
  );
}

TypeScript

import {Analytics, getShopAnalytics} from '@shopify/hydrogen';
import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
import {Outlet, useLoaderData} from '@remix-run/react';

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

  return defer({
    cart: cartPromise,
    shop: getShopAnalytics({
      storefront: context.storefront,
      publicStorefrontId: env.PUBLIC_STOREFRONT_ID,
    }),
    consent: {
      checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN,
      storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN,
    },
  });
}

export default function App() {
  const data = useLoaderData<typeof loader>();

  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>
  );
}

Analytics.Providercomponent