# 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-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. ```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, 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 ( ); } ``` ```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, 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 ( ); } ``` ## Props ### AnalyticsProviderProps ### canTrack value: `() => boolean` An optional function to set wether the user can be tracked. Defaults to Customer Privacy API's `window.Shopify.customerPrivacy.analyticsProcessingAllowed()`. ### cart value: `Promise | CartReturn | null` - CartReturn: Cart & { errors?: StorefrontApiErrors; } - Cart: 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 value: `ReactNode` React children to render. ### consent value: `Consent` - Consent: Partial< Pick< CustomerPrivacyApiProps, 'checkoutDomain' | 'storefrontAccessToken' | 'withPrivacyBanner' | 'country' > > & {language?: LanguageCode} The customer privacy consent configuration and options. ### cookieDomain value: `string` The domain scope of the cookie set with `useShopifyCookies`. * ### customData value: `Record` An optional custom payload to pass to all events. e.g language/locale/currency. ### disableThrowOnError value: `boolean` ### shop value: `Promise | ShopAnalytics | null` - ShopAnalytics: { /** 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'; } The shop configuration required to publish analytics events to Shopify. Use [`getShopAnalytics`](https://shopify.dev/docs/api/hydrogen/2024-10/utilities/getshopanalytics). ### CustomerPrivacyApiProps ### checkoutDomain value: `string` The production shop checkout domain url. ### country value: `CountryCode` Country code for the shop. ### locale value: `LanguageCode` Language code for the shop. ### onReady value: `() => void` Callback to be call when customer privacy api is ready. ### onVisitorConsentCollected value: `(consent: VisitorConsentCollected) => void` - Consent: Partial< Pick< CustomerPrivacyApiProps, 'checkoutDomain' | 'storefrontAccessToken' | 'withPrivacyBanner' | 'country' > > & {language?: LanguageCode} - VisitorConsentCollected: { analyticsAllowed: boolean; firstPartyMarketingAllowed: boolean; marketingAllowed: boolean; preferencesAllowed: boolean; saleOfDataAllowed: boolean; thirdPartyMarketingAllowed: boolean; } Callback to be called when visitor consent is collected. ### storefrontAccessToken value: `string` The storefront access token for the shop. ### withPrivacyBanner value: `boolean` Whether to load the Shopify privacy banner as configured in Shopify admin. Defaults to true. ### VisitorConsentCollected ### analyticsAllowed value: `boolean` ### firstPartyMarketingAllowed value: `boolean` ### marketingAllowed value: `boolean` ### preferencesAllowed value: `boolean` ### saleOfDataAllowed value: `boolean` ### thirdPartyMarketingAllowed value: `boolean` ### PrivacyBanner ### loadBanner value: `(options?: Partial) => void` - Consent: Partial< Pick< CustomerPrivacyApiProps, 'checkoutDomain' | 'storefrontAccessToken' | 'withPrivacyBanner' | 'country' > > & {language?: LanguageCode} - CustomerPrivacyConsentConfig: { checkoutRootDomain: string; storefrontRootDomain?: string; storefrontAccessToken: string; country?: CountryCode; /** The privacyBanner refers to `language` as `locale` */ locale?: LanguageCode; } ### showPreferences value: `(options?: Partial) => void` - Consent: Partial< Pick< CustomerPrivacyApiProps, 'checkoutDomain' | 'storefrontAccessToken' | 'withPrivacyBanner' | 'country' > > & {language?: LanguageCode} - CustomerPrivacyConsentConfig: { checkoutRootDomain: string; storefrontRootDomain?: string; storefrontAccessToken: string; country?: CountryCode; /** The privacyBanner refers to `language` as `locale` */ locale?: LanguageCode; } ### CustomerPrivacyConsentConfig ### checkoutRootDomain value: `string` ### country value: `CountryCode` ### locale value: `LanguageCode` The privacyBanner refers to `language` as `locale` ### storefrontAccessToken value: `string` ### storefrontRootDomain value: `string` ### ShopAnalytics ### acceptedLanguage value: `LanguageCode` The language code that is being displayed to user. ### currency value: `CurrencyCode` The currency code that is being displayed to user. ### hydrogenSubchannelId value: `string | '0'` The Hydrogen subchannel ID generated by Oxygen in the environment variable. ### shopId value: `string` The shop ID.