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`](/docs/api/hydrogen/2024-10/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.

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

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

Props

AnalyticsProviderProps

canTrack

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

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.

children

React children to render.

consent

The customer privacy consent configuration and options.

cookieDomain

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

customData

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

disableThrowOnError

shop

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

CartReturn

Cart & { errors?: StorefrontApiErrors; }

Cart

Cart

StorefrontApiErrors

JsonGraphQLError[] | undefined

JsonGraphQLError

ReturnType<GraphQLError['toJSON']>

Consent

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

CustomerPrivacyApiProps

checkoutDomain

The production shop checkout domain url.

country

Country code for the shop.

locale

Language code for the shop.

onReady

Callback to be call when customer privacy api is ready.

onVisitorConsentCollected

Callback to be called when visitor consent is collected.

storefrontAccessToken

The storefront access token for the shop.

withPrivacyBanner

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

VisitorConsentCollected

analyticsAllowed

firstPartyMarketingAllowed

marketingAllowed

preferencesAllowed

saleOfDataAllowed

thirdPartyMarketingAllowed

PrivacyBanner

loadBanner

showPreferences

CustomerPrivacyConsentConfig

checkoutRootDomain

country

locale

The privacyBanner refers to `language` as `locale`

storefrontAccessToken

storefrontRootDomain

ShopAnalytics

acceptedLanguage

The language code that is being displayed to user.

currency

The currency code that is being displayed to user.

hydrogenSubchannelId

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

shopId

The shop ID.