---
title: Analytics.Provider
description: >-
  Provides a context for tracking page views and cart events to send as
  analytics data to Shopify.
api_version: 2026-04
api_name: hydrogen
source_url:
  html: >-
    https://shopify.dev/docs/api/hydrogen/latest/components/analytics/analytics-provider
  md: >-
    https://shopify.dev/docs/api/hydrogen/latest/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/2026-04/hooks/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.

#### Props

* **cart**

  **Promise\<CartReturn | null> | CartReturn | 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.

* **consent**

  **Consent**

  **required**

  The customer privacy consent configuration and options.

* **shop**

  **Promise\<ShopAnalytics | null> | ShopAnalytics | null**

  **required**

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

* **canTrack**

  **() => boolean**

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

* **children**

  **ReactNode**

  React children to render.

* **cookieDomain**

  **string**

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

* **customData**

  **Record\<string, unknown>**

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

* **disableThrowOnError**

  **boolean**

  **deprecated**

  **Deprecated:**

  Disable throwing errors when required props are missing.

### CartReturn

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

### Cart

* attributes

  The cart's attributes.

  ```ts
  { __typename?: "Attribute"; key?: string; value?: string; }[]
  ```

* buyerIdentity

  The cart's buyer identity.

  ```ts
  CartType['buyerIdentity']
  ```

* checkoutUrl

  The checkout URL for the cart, if the cart has been created in the Storefront API.

  ```ts
  string
  ```

* cost

  The cost for the cart, including the subtotal, total, taxes, and duties.

  ```ts
  CartType['cost']
  ```

* discountCodes

  The discount codes applied to the cart.

  ```ts
  { __typename?: "CartDiscountCode"; applicable?: boolean; code?: string; }[]
  ```

* id

  The cart's ID if it has been created through the Storefront API.

  ```ts
  string
  ```

* lines

  The cart lines.

  ```ts
  Array<CartLine | ComponentizableCartLine>
  ```

* note

  The cart's note.

  ```ts
  string
  ```

* totalQuantity

  The total number of items in the cart, across all lines. If there are no lines, then the value is 0.

  ```ts
  number
  ```

### StorefrontApiErrors

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

### JsonGraphQLError

* extensions

  Reserved for implementors to extend the protocol however they see fit, and hence there are no additional restrictions on its contents.

  ```ts
  { [key: string]: unknown; }
  ```

* locations

  If an error can be associated to a particular point in the requested GraphQL document, it should contain a list of locations.

  ```ts
  { line: number; column: number; }[]
  ```

* message

  ```ts
  string
  ```

* name

  ```ts
  string
  ```

* path

  If an error can be associated to a particular field in the GraphQL result, it \_must\_ contain an entry with the key \`path\` that details the path of the response field which experienced the error. This allows clients to identify whether a null result is intentional or caused by a runtime error.

  ```ts
  (string | number)[]
  ```

* stack

  ```ts
  string
  ```

### Consent

```ts
Partial<
  Pick<
    CustomerPrivacyApiProps,
    | 'checkoutDomain'
    | 'sameDomainForStorefrontApi'
    | 'storefrontAccessToken'
    | 'withPrivacyBanner'
    | 'country'
  >
> & {language?: LanguageCode}
```

### CustomerPrivacyApiProps

* checkoutDomain

  The production shop checkout domain url.

  ```ts
  string
  ```

* country

  Country code for the shop.

  ```ts
  CountryCode
  ```

* locale

  Language code for the shop.

  ```ts
  LanguageCode
  ```

* onReady

  Callback to be call when customer privacy api is ready.

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

* onVisitorConsentCollected

  Callback to be called when visitor consent is collected.

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

* sameDomainForStorefrontApi

  Whether consent libraries can use same-domain requests to the Storefront API. Defaults to true if the standard route proxy is enabled in Hydrogen server.

  ```ts
  boolean
  ```

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

### VisitorConsentCollected

* analyticsAllowed

  ```ts
  boolean
  ```

* firstPartyMarketingAllowed

  ```ts
  boolean
  ```

* marketingAllowed

  ```ts
  boolean
  ```

* preferencesAllowed

  ```ts
  boolean
  ```

* saleOfDataAllowed

  ```ts
  boolean
  ```

* thirdPartyMarketingAllowed

  ```ts
  boolean
  ```

### ShopAnalytics

* 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 | '0'
  ```

* shopId

  The shop ID.

  ```ts
  string
  ```

### CurrencyCode

Supports CurrencyCode from both Storefront API and Customer Account API. The APIs may have different CurrencyCode enums (e.g., Customer Account API added USDC in 2025-10, but Storefront API doesn't support USDC in 2025-10). This union type ensures useMoney works with data from either API.

```ts
StorefrontApiCurrencyCode | CustomerAccountApiCurrencyCode
```

Examples

### Examples

* #### Example

  ##### JavaScript

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

  ##### TypeScript

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

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

    return {
      cart: cartPromise,
      shop: getShopAnalytics({
        storefront: context.storefront,
        publicStorefrontId: env.PUBLIC_STOREFRONT_ID,
      }),
      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<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>
    );
  }
  ```

***