---
title: Analytics.Provider
description: >-
  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`](/docs/api/hydrogen/2024-04/hooks/useanalytics) hook provides
  access to the analytics provider context.
api_version: 2024-04
api_name: hydrogen
source_url:
  html: >-
    https://shopify.dev/docs/api/hydrogen/2024-04/components/analytics/analytics-provider
  md: >-
    https://shopify.dev/docs/api/hydrogen/2024-04/components/analytics/analytics-provider.md
---

# Analytics.​Provider

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`](https://shopify.dev/docs/api/hydrogen/2024-04/hooks/useanalytics) hook provides access to the analytics provider context.

## Props

* cart

  CartReturn | Promise\<CartReturn>

  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.

* shop

  ShopAnalytics | Promise\<ShopAnalytics>

  required

  The shop configuration required to publish analytics events to Shopify. Use [`getShopAnalytics`](https://shopify.dev/docs/api/hydrogen/2024-04/utilities/getshopanalytics).

* consent

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

  required

  The customer privacy consent configuration and options.

* children

  ReactNode

  React children to render.

* canTrack

  () => boolean

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

* customData

  Record\<string, unknown>

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

* disableThrowOnError

  boolean

  Disable throwing errors when required props are missing.

* cookieDomain

  string

  The domain scope of the cookie set with `useShopifyCookies`. \*

### CartReturn

```ts
Cart & {
  errors?: StorefrontApiErrors;
}
```

### Cart



```ts
Cart
```

### StorefrontApiErrors

```ts
JsonGraphQLError[] | undefined
```

### ShopAnalytics

* shopId

  The shop ID.

  ```ts
  string
  ```

* acceptedLanguage

  The language code that is being displayed to user.

  ```ts
  LanguageCode
  ```

* currency

  The currency code that is being displayed to user.

  ```ts
  CurrencyCode
  ```

* hydrogenSubchannelId

  The Hydrogen subchannel ID generated by Oxygen in the environment variable.

  ```ts
  string
  ```

```ts
{
  /** 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.

  ```ts
  string
  ```

* storefrontAccessToken

  The storefront access token for the shop.

  ```ts
  string
  ```

* withPrivacyBanner

  Whether to load the Shopify privacy banner as configured in Shopify admin. Defaults to true.

  ```ts
  boolean
  ```

* onVisitorConsentCollected

  Callback to be called when visitor consent is collected.

  ```ts
  (consent: VisitorConsentCollected) => void
  ```

* onReady

  Callback to be call when customer privacy api is ready.

  ```ts
  () => void
  ```

```ts
{
  /** 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

  ```ts
  boolean
  ```

* firstPartyMarketingAllowed

  ```ts
  boolean
  ```

* marketingAllowed

  ```ts
  boolean
  ```

* preferencesAllowed

  ```ts
  boolean
  ```

* saleOfDataAllowed

  ```ts
  boolean
  ```

* thirdPartyMarketingAllowed

  ```ts
  boolean
  ```

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

Examples

### Examples

* #### example

  ##### Description

  This is the default example

  ##### JavaScript

  ```js
  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

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