# getShopAnalytics A function that queries for shop required analytics data to be used in the [`Analytics.Provider`](https://shopify.dev/docs/api/hydrogen/components/Analytics-provider) component. ```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({ 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 ( ); } ``` ```ts import {Analytics, getShopAnalytics} from '@shopify/hydrogen'; import {type LoaderFunctionArgs} from '@shopify/remix-oxygen'; 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(); return ( ); } ``` ## Props ### GetShopAnalyticsGeneratedType #### Returns: Promise #### Params: - input1: ShopAnalyticsProps export async function getShopAnalytics({ storefront, publicStorefrontId = '0', }: ShopAnalyticsProps): Promise { return storefront .query(SHOP_QUERY, { cache: storefront.CacheLong(), }) .then(({shop, localization}: {shop: Shop; localization: Localization}) => { return { shopId: shop.id, acceptedLanguage: localization.language.isoCode, currency: localization.country.currency.isoCode, hydrogenSubchannelId: publicStorefrontId, }; }); } ### ShopAnalyticsProps ### publicStorefrontId value: `string` The `PUBLIC_STOREFRONT_ID` generated by Oxygen in the environment variable. ### storefront value: `Storefront` - Storefront: { query: < OverrideReturnType extends any = never, RawGqlString extends string = string, >( query: RawGqlString, ...options: ClientVariablesInRestParams< StorefrontQueries, RawGqlString, StorefrontCommonExtraParams & Pick, AutoAddedVariableNames > ) => Promise< ClientReturn & StorefrontError >; mutate: < OverrideReturnType extends any = never, RawGqlString extends string = string, >( mutation: RawGqlString, ...options: ClientVariablesInRestParams< StorefrontMutations, RawGqlString, StorefrontCommonExtraParams, AutoAddedVariableNames > ) => Promise< ClientReturn & StorefrontError >; cache?: Cache; CacheNone: typeof CacheNone; CacheLong: typeof CacheLong; CacheShort: typeof CacheShort; CacheCustom: typeof CacheCustom; generateCacheControlHeader: typeof generateCacheControlHeader; getPublicTokenHeaders: ReturnType< typeof createStorefrontUtilities >['getPublicTokenHeaders']; getPrivateTokenHeaders: ReturnType< typeof createStorefrontUtilities >['getPrivateTokenHeaders']; getShopifyDomain: ReturnType< typeof createStorefrontUtilities >['getShopifyDomain']; getApiUrl: ReturnType< typeof createStorefrontUtilities >['getStorefrontApiUrl']; i18n: TI18n; } The storefront client instance created by [`createStorefrontClient`](docs/api/hydrogen/utilities/createstorefrontclient). ### Storefront Interface to interact with the Storefront API. ### cache value: `Cache` ### CacheCustom value: `(overrideOptions: AllCacheOptions) => AllCacheOptions` - AllCacheOptions: export interface AllCacheOptions { /** * The caching mode, generally `public`, `private`, or `no-store`. */ mode?: string; /** * The maximum amount of time in seconds that a resource will be considered fresh. See `max-age` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#:~:text=Response%20Directives-,max%2Dage,-The%20max%2Dage). */ maxAge?: number; /** * Indicate that the cache should serve the stale response in the background while revalidating the cache. See `stale-while-revalidate` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-while-revalidate). */ staleWhileRevalidate?: number; /** * Similar to `maxAge` but specific to shared caches. See `s-maxage` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#s-maxage). */ sMaxAge?: number; /** * Indicate that the cache should serve the stale response if an error occurs while revalidating the cache. See `stale-if-error` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-if-error). */ staleIfError?: number; } ### CacheLong value: `(overrideOptions?: AllCacheOptions) => AllCacheOptions` - AllCacheOptions: export interface AllCacheOptions { /** * The caching mode, generally `public`, `private`, or `no-store`. */ mode?: string; /** * The maximum amount of time in seconds that a resource will be considered fresh. See `max-age` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#:~:text=Response%20Directives-,max%2Dage,-The%20max%2Dage). */ maxAge?: number; /** * Indicate that the cache should serve the stale response in the background while revalidating the cache. See `stale-while-revalidate` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-while-revalidate). */ staleWhileRevalidate?: number; /** * Similar to `maxAge` but specific to shared caches. See `s-maxage` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#s-maxage). */ sMaxAge?: number; /** * Indicate that the cache should serve the stale response if an error occurs while revalidating the cache. See `stale-if-error` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-if-error). */ staleIfError?: number; } ### CacheNone value: `() => NoStoreStrategy` - NoStoreStrategy: { mode: string; } ### CacheShort value: `(overrideOptions?: AllCacheOptions) => AllCacheOptions` - AllCacheOptions: export interface AllCacheOptions { /** * The caching mode, generally `public`, `private`, or `no-store`. */ mode?: string; /** * The maximum amount of time in seconds that a resource will be considered fresh. See `max-age` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#:~:text=Response%20Directives-,max%2Dage,-The%20max%2Dage). */ maxAge?: number; /** * Indicate that the cache should serve the stale response in the background while revalidating the cache. See `stale-while-revalidate` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-while-revalidate). */ staleWhileRevalidate?: number; /** * Similar to `maxAge` but specific to shared caches. See `s-maxage` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#s-maxage). */ sMaxAge?: number; /** * Indicate that the cache should serve the stale response if an error occurs while revalidating the cache. See `stale-if-error` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-if-error). */ staleIfError?: number; } ### generateCacheControlHeader value: `(cacheOptions: AllCacheOptions) => string` - AllCacheOptions: export interface AllCacheOptions { /** * The caching mode, generally `public`, `private`, or `no-store`. */ mode?: string; /** * The maximum amount of time in seconds that a resource will be considered fresh. See `max-age` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#:~:text=Response%20Directives-,max%2Dage,-The%20max%2Dage). */ maxAge?: number; /** * Indicate that the cache should serve the stale response in the background while revalidating the cache. See `stale-while-revalidate` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-while-revalidate). */ staleWhileRevalidate?: number; /** * Similar to `maxAge` but specific to shared caches. See `s-maxage` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#s-maxage). */ sMaxAge?: number; /** * Indicate that the cache should serve the stale response if an error occurs while revalidating the cache. See `stale-if-error` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-if-error). */ staleIfError?: number; } ### getApiUrl value: `(props?: Partial>) => string` - Storefront: { query: < OverrideReturnType extends any = never, RawGqlString extends string = string, >( query: RawGqlString, ...options: ClientVariablesInRestParams< StorefrontQueries, RawGqlString, StorefrontCommonExtraParams & Pick, AutoAddedVariableNames > ) => Promise< ClientReturn & StorefrontError >; mutate: < OverrideReturnType extends any = never, RawGqlString extends string = string, >( mutation: RawGqlString, ...options: ClientVariablesInRestParams< StorefrontMutations, RawGqlString, StorefrontCommonExtraParams, AutoAddedVariableNames > ) => Promise< ClientReturn & StorefrontError >; cache?: Cache; CacheNone: typeof CacheNone; CacheLong: typeof CacheLong; CacheShort: typeof CacheShort; CacheCustom: typeof CacheCustom; generateCacheControlHeader: typeof generateCacheControlHeader; getPublicTokenHeaders: ReturnType< typeof createStorefrontUtilities >['getPublicTokenHeaders']; getPrivateTokenHeaders: ReturnType< typeof createStorefrontUtilities >['getPrivateTokenHeaders']; getShopifyDomain: ReturnType< typeof createStorefrontUtilities >['getShopifyDomain']; getApiUrl: ReturnType< typeof createStorefrontUtilities >['getStorefrontApiUrl']; i18n: TI18n; } ### getPrivateTokenHeaders value: `(props?: Partial> & Pick & { buyerIp?: string; }) => Record` - Storefront: { query: < OverrideReturnType extends any = never, RawGqlString extends string = string, >( query: RawGqlString, ...options: ClientVariablesInRestParams< StorefrontQueries, RawGqlString, StorefrontCommonExtraParams & Pick, AutoAddedVariableNames > ) => Promise< ClientReturn & StorefrontError >; mutate: < OverrideReturnType extends any = never, RawGqlString extends string = string, >( mutation: RawGqlString, ...options: ClientVariablesInRestParams< StorefrontMutations, RawGqlString, StorefrontCommonExtraParams, AutoAddedVariableNames > ) => Promise< ClientReturn & StorefrontError >; cache?: Cache; CacheNone: typeof CacheNone; CacheLong: typeof CacheLong; CacheShort: typeof CacheShort; CacheCustom: typeof CacheCustom; generateCacheControlHeader: typeof generateCacheControlHeader; getPublicTokenHeaders: ReturnType< typeof createStorefrontUtilities >['getPublicTokenHeaders']; getPrivateTokenHeaders: ReturnType< typeof createStorefrontUtilities >['getPrivateTokenHeaders']; getShopifyDomain: ReturnType< typeof createStorefrontUtilities >['getShopifyDomain']; getApiUrl: ReturnType< typeof createStorefrontUtilities >['getStorefrontApiUrl']; i18n: TI18n; } ### getPublicTokenHeaders value: `(props?: Partial> & Pick) => Record` - Storefront: { query: < OverrideReturnType extends any = never, RawGqlString extends string = string, >( query: RawGqlString, ...options: ClientVariablesInRestParams< StorefrontQueries, RawGqlString, StorefrontCommonExtraParams & Pick, AutoAddedVariableNames > ) => Promise< ClientReturn & StorefrontError >; mutate: < OverrideReturnType extends any = never, RawGqlString extends string = string, >( mutation: RawGqlString, ...options: ClientVariablesInRestParams< StorefrontMutations, RawGqlString, StorefrontCommonExtraParams, AutoAddedVariableNames > ) => Promise< ClientReturn & StorefrontError >; cache?: Cache; CacheNone: typeof CacheNone; CacheLong: typeof CacheLong; CacheShort: typeof CacheShort; CacheCustom: typeof CacheCustom; generateCacheControlHeader: typeof generateCacheControlHeader; getPublicTokenHeaders: ReturnType< typeof createStorefrontUtilities >['getPublicTokenHeaders']; getPrivateTokenHeaders: ReturnType< typeof createStorefrontUtilities >['getPrivateTokenHeaders']; getShopifyDomain: ReturnType< typeof createStorefrontUtilities >['getShopifyDomain']; getApiUrl: ReturnType< typeof createStorefrontUtilities >['getStorefrontApiUrl']; i18n: TI18n; } ### getShopifyDomain value: `(props?: Partial>) => string` - Storefront: { query: < OverrideReturnType extends any = never, RawGqlString extends string = string, >( query: RawGqlString, ...options: ClientVariablesInRestParams< StorefrontQueries, RawGqlString, StorefrontCommonExtraParams & Pick, AutoAddedVariableNames > ) => Promise< ClientReturn & StorefrontError >; mutate: < OverrideReturnType extends any = never, RawGqlString extends string = string, >( mutation: RawGqlString, ...options: ClientVariablesInRestParams< StorefrontMutations, RawGqlString, StorefrontCommonExtraParams, AutoAddedVariableNames > ) => Promise< ClientReturn & StorefrontError >; cache?: Cache; CacheNone: typeof CacheNone; CacheLong: typeof CacheLong; CacheShort: typeof CacheShort; CacheCustom: typeof CacheCustom; generateCacheControlHeader: typeof generateCacheControlHeader; getPublicTokenHeaders: ReturnType< typeof createStorefrontUtilities >['getPublicTokenHeaders']; getPrivateTokenHeaders: ReturnType< typeof createStorefrontUtilities >['getPrivateTokenHeaders']; getShopifyDomain: ReturnType< typeof createStorefrontUtilities >['getShopifyDomain']; getApiUrl: ReturnType< typeof createStorefrontUtilities >['getStorefrontApiUrl']; i18n: TI18n; } ### i18n value: `TI18n` ### mutate value: `(mutation: RawGqlString, ...options: IsOptionalVariables> extends true ? [(StorefrontCommonExtraParams & ClientVariables> : { readonly [variable: string]: unknown; }, Record<"variables", RawGqlString extends never ? SetOptional> : { readonly [variable: string]: unknown; }>>)?] : [StorefrontCommonExtraParams & ClientVariables> : { readonly [variable: string]: unknown; }, Record<"variables", RawGqlString extends never ? SetOptional> : { readonly [variable: string]: unknown; }>>]) => Promise & StorefrontError>` - Storefront: { query: < OverrideReturnType extends any = never, RawGqlString extends string = string, >( query: RawGqlString, ...options: ClientVariablesInRestParams< StorefrontQueries, RawGqlString, StorefrontCommonExtraParams & Pick, AutoAddedVariableNames > ) => Promise< ClientReturn & StorefrontError >; mutate: < OverrideReturnType extends any = never, RawGqlString extends string = string, >( mutation: RawGqlString, ...options: ClientVariablesInRestParams< StorefrontMutations, RawGqlString, StorefrontCommonExtraParams, AutoAddedVariableNames > ) => Promise< ClientReturn & StorefrontError >; cache?: Cache; CacheNone: typeof CacheNone; CacheLong: typeof CacheLong; CacheShort: typeof CacheShort; CacheCustom: typeof CacheCustom; generateCacheControlHeader: typeof generateCacheControlHeader; getPublicTokenHeaders: ReturnType< typeof createStorefrontUtilities >['getPublicTokenHeaders']; getPrivateTokenHeaders: ReturnType< typeof createStorefrontUtilities >['getPrivateTokenHeaders']; getShopifyDomain: ReturnType< typeof createStorefrontUtilities >['getShopifyDomain']; getApiUrl: ReturnType< typeof createStorefrontUtilities >['getStorefrontApiUrl']; i18n: TI18n; } - StorefrontMutations: export interface StorefrontMutations { // Example of how a generated mutation type looks like: // '#graphql mutation m1 {...}': {return: M1Mutation; variables: M1MutationVariables}; } - AutoAddedVariableNames: 'country' | 'language' - StorefrontCommonExtraParams: { headers?: HeadersInit; storefrontApiVersion?: string; displayName?: string; } - StorefrontError: { errors?: StorefrontApiErrors; } ### query value: `(query: RawGqlString, ...options: IsOptionalVariables> extends true ? [(StorefrontCommonExtraParams & Pick & ClientVariables> : { readonly [variable: string]: unknown; }, Record<"variables", RawGqlString extends never ? SetOptional> : { readonly [variable: string]: unknown; }>>)?] : [StorefrontCommonExtraParams & Pick & ClientVariables> : { readonly [variable: string]: unknown; }, Record<"variables", RawGqlString extends never ? SetOptional> : { readonly [variable: string]: unknown; }>>]) => Promise & StorefrontError>` - Storefront: { query: < OverrideReturnType extends any = never, RawGqlString extends string = string, >( query: RawGqlString, ...options: ClientVariablesInRestParams< StorefrontQueries, RawGqlString, StorefrontCommonExtraParams & Pick, AutoAddedVariableNames > ) => Promise< ClientReturn & StorefrontError >; mutate: < OverrideReturnType extends any = never, RawGqlString extends string = string, >( mutation: RawGqlString, ...options: ClientVariablesInRestParams< StorefrontMutations, RawGqlString, StorefrontCommonExtraParams, AutoAddedVariableNames > ) => Promise< ClientReturn & StorefrontError >; cache?: Cache; CacheNone: typeof CacheNone; CacheLong: typeof CacheLong; CacheShort: typeof CacheShort; CacheCustom: typeof CacheCustom; generateCacheControlHeader: typeof generateCacheControlHeader; getPublicTokenHeaders: ReturnType< typeof createStorefrontUtilities >['getPublicTokenHeaders']; getPrivateTokenHeaders: ReturnType< typeof createStorefrontUtilities >['getPrivateTokenHeaders']; getShopifyDomain: ReturnType< typeof createStorefrontUtilities >['getShopifyDomain']; getApiUrl: ReturnType< typeof createStorefrontUtilities >['getStorefrontApiUrl']; i18n: TI18n; } - AutoAddedVariableNames: 'country' | 'language' - StorefrontCommonExtraParams: { headers?: HeadersInit; storefrontApiVersion?: string; displayName?: string; } - StorefrontError: { errors?: StorefrontApiErrors; } - StorefrontQueries: export interface StorefrontQueries { // Example of how a generated query type looks like: // '#graphql query q1 {...}': {return: Q1Query; variables: Q1QueryVariables}; } - StorefrontQueryOptions: StorefrontCommonExtraParams & { query: string; mutation?: never; cache?: CachingStrategy; } ### AllCacheOptions Override options for a cache strategy. ### maxAge value: `number` The maximum amount of time in seconds that a resource will be considered fresh. See `max-age` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#:~:text=Response%20Directives-,max%2Dage,-The%20max%2Dage). ### mode value: `string` The caching mode, generally `public`, `private`, or `no-store`. ### sMaxAge value: `number` Similar to `maxAge` but specific to shared caches. See `s-maxage` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#s-maxage). ### staleIfError value: `number` Indicate that the cache should serve the stale response if an error occurs while revalidating the cache. See `stale-if-error` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-if-error). ### staleWhileRevalidate value: `number` Indicate that the cache should serve the stale response in the background while revalidating the cache. See `stale-while-revalidate` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-while-revalidate). ### NoStoreStrategy ### mode value: `string` ### StorefrontCommonExtraParams ### displayName value: `string` ### headers value: `HeadersInit` ### storefrontApiVersion value: `string` ### StorefrontError ### errors value: `StorefrontApiErrors` - Storefront: { query: < OverrideReturnType extends any = never, RawGqlString extends string = string, >( query: RawGqlString, ...options: ClientVariablesInRestParams< StorefrontQueries, RawGqlString, StorefrontCommonExtraParams & Pick, AutoAddedVariableNames > ) => Promise< ClientReturn & StorefrontError >; mutate: < OverrideReturnType extends any = never, RawGqlString extends string = string, >( mutation: RawGqlString, ...options: ClientVariablesInRestParams< StorefrontMutations, RawGqlString, StorefrontCommonExtraParams, AutoAddedVariableNames > ) => Promise< ClientReturn & StorefrontError >; cache?: Cache; CacheNone: typeof CacheNone; CacheLong: typeof CacheLong; CacheShort: typeof CacheShort; CacheCustom: typeof CacheCustom; generateCacheControlHeader: typeof generateCacheControlHeader; getPublicTokenHeaders: ReturnType< typeof createStorefrontUtilities >['getPublicTokenHeaders']; getPrivateTokenHeaders: ReturnType< typeof createStorefrontUtilities >['getPrivateTokenHeaders']; getShopifyDomain: ReturnType< typeof createStorefrontUtilities >['getShopifyDomain']; getApiUrl: ReturnType< typeof createStorefrontUtilities >['getStorefrontApiUrl']; i18n: TI18n; } - StorefrontApiErrors: JsonGraphQLError[] | undefined ### CachingStrategy Use the `CachingStrategy` to define a custom caching mechanism for your data. Or use one of the pre-defined caching strategies: CacheNone, CacheShort, CacheLong. ### maxAge value: `number` The maximum amount of time in seconds that a resource will be considered fresh. See `max-age` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#:~:text=Response%20Directives-,max%2Dage,-The%20max%2Dage). ### mode value: `string` The caching mode, generally `public`, `private`, or `no-store`. ### sMaxAge value: `number` Similar to `maxAge` but specific to shared caches. See `s-maxage` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#s-maxage). ### staleIfError value: `number` Indicate that the cache should serve the stale response if an error occurs while revalidating the cache. See `stale-if-error` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-if-error). ### staleWhileRevalidate value: `number` Indicate that the cache should serve the stale response in the background while revalidating the cache. See `stale-while-revalidate` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-while-revalidate). ### 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.