# 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.
```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 (
);
}
```
```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();
return (
);
}
```
## Props
### AnalyticsProviderProps
### children
value: `ReactNode`
React children to render.
### cart
value: `CartReturn | Promise`
- 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.
### canTrack
value: `() => boolean`
An optional function to set wether the user can be tracked. Defaults to Customer Privacy API's `window.Shopify.customerPrivacy.analyticsProcessingAllowed()`.
### customData
value: `Record`
An optional custom payload to pass to all events. e.g language/locale/currency.
### shop
value: `ShopAnalytics | Promise`
- 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-04/utilities/getshopanalytics).
### consent
value: `Partial<
Pick<
CustomerPrivacyApiProps,
'checkoutDomain' | 'storefrontAccessToken' | 'withPrivacyBanner'
>
>`
- CustomerPrivacyApiProps: {
/** 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;
}
- PrivacyBanner: {
loadBanner: (options: CustomerPrivacyConsentConfig) => void;
}
The customer privacy consent configuration and options.
### disableThrowOnError
value: `boolean`
Disable throwing errors when required props are missing.
### cookieDomain
value: `string`
The domain scope of the cookie set with `useShopifyCookies`. *
### ShopAnalytics
### shopId
value: `string`
The shop ID.
### 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`
The Hydrogen subchannel ID generated by Oxygen in the environment variable.
### CustomerPrivacyApiProps
### checkoutDomain
value: `string`
The production shop checkout domain url.
### 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.
### onVisitorConsentCollected
value: `(consent: VisitorConsentCollected) => void`
- VisitorConsentCollected: {
analyticsAllowed: boolean;
firstPartyMarketingAllowed: boolean;
marketingAllowed: boolean;
preferencesAllowed: boolean;
saleOfDataAllowed: boolean;
thirdPartyMarketingAllowed: boolean;
}
Callback to be called when visitor consent is collected.
### onReady
value: `() => void`
Callback to be call when customer privacy api is ready.
### VisitorConsentCollected
### analyticsAllowed
value: `boolean`
### firstPartyMarketingAllowed
value: `boolean`
### marketingAllowed
value: `boolean`
### preferencesAllowed
value: `boolean`
### saleOfDataAllowed
value: `boolean`
### thirdPartyMarketingAllowed
value: `boolean`
### PrivacyBanner
### loadBanner
value: `(options: CustomerPrivacyConsentConfig) => void`
- CustomerPrivacyConsentConfig: {
checkoutRootDomain?: string;
storefrontRootDomain?: string;
storefrontAccessToken?: string;
}
### CustomerPrivacyConsentConfig
### checkoutRootDomain
value: `string`
### storefrontRootDomain
value: `string`
### storefrontAccessToken
value: `string`