---
title: getShopAnalytics
description: >-
  A function that queries for shop required analytics data to be used in the
  [`Analytics.Provider`](/docs/api/hydrogen/components/Analytics-provider)
  component.
api_version: 2026-01
api_name: hydrogen
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen/latest/utilities/getshopanalytics'
  md: 'https://shopify.dev/docs/api/hydrogen/latest/utilities/getshopanalytics.md'
---

# get​Shop​Analytics

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.

## get​Shop​Analytics(**[input1](#props-propertydetail-input1)**​)

### Parameters

* **input1**

  **ShopAnalyticsProps**

  **required**

### Returns

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

### ShopAnalyticsProps

* publicStorefrontId

  The \`PUBLIC\_STOREFRONT\_ID\` generated by Oxygen in the environment variable.

  ```ts
  string
  ```

* storefront

  The storefront client instance created by \[\`createStorefrontClient\`]\(docs/api/hydrogen/utilities/createstorefrontclient).

  ```ts
  Storefront
  ```

### Storefront

Interface to interact with the Storefront API.

* cache

  ```ts
  Cache
  ```

* CacheCustom

  ```ts
  (overrideOptions: AllCacheOptions) => AllCacheOptions
  ```

* CacheLong

  ```ts
  (overrideOptions?: AllCacheOptions) => AllCacheOptions
  ```

* CacheNone

  ```ts
  () => NoStoreStrategy
  ```

* CacheShort

  ```ts
  (overrideOptions?: AllCacheOptions) => AllCacheOptions
  ```

* forward

  Forwards the request to the Storefront API. It reads the API version from the request URL.

  ```ts
  (request: Request, options?: Pick<StorefrontCommonExtraParams, "storefrontApiVersion">) => Promise<Response>
  ```

* generateCacheControlHeader

  ```ts
  (cacheOptions: AllCacheOptions) => string
  ```

* getApiUrl

  ```ts
  any
  ```

* getHeaders

  ```ts
  () => Record<string, string>
  ```

* getPrivateTokenHeaders

  ```ts
  any
  ```

* getPublicTokenHeaders

  ```ts
  any
  ```

* getShopifyDomain

  ```ts
  any
  ```

* i18n

  ```ts
  TI18n
  ```

* isStorefrontApiUrl

  Checks if the request URL matches the Storefront API GraphQL endpoint.

  ```ts
  (request: { url?: string; }) => boolean
  ```

* mutate

  ```ts
  <OverrideReturnType extends unknown = never, RawGqlString extends string = string>(mutation: RawGqlString, ...options: ClientVariablesInRestParams<StorefrontMutations, RawGqlString, StorefrontCommonExtraParams, AutoAddedVariableNames>) => Promise<any>
  ```

* query

  ```ts
  <OverrideReturnType extends unknown = never, RawGqlString extends string = string>(query: RawGqlString, ...options: ClientVariablesInRestParams<StorefrontQueries, RawGqlString, StorefrontCommonExtraParams & Pick<StorefrontQueryOptions, "cache">, AutoAddedVariableNames>) => Promise<any>
  ```

* setCollectedSubrequestHeaders

  Sets the collected subrequest headers in the response. Useful to forward the cookies and server-timing headers from server subrequests to the browser.

  ```ts
  (response: { headers: Headers; }) => void
  ```

### AllCacheOptions

Override options for a cache strategy.

* maxAge

  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).

  ```ts
  number
  ```

* mode

  The caching mode, generally \`public\`, \`private\`, or \`no-store\`.

  ```ts
  string
  ```

* sMaxAge

  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).

  ```ts
  number
  ```

* staleIfError

  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).

  ```ts
  number
  ```

* staleWhileRevalidate

  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).

  ```ts
  number
  ```

### NoStoreStrategy

* mode

  ```ts
  string
  ```

### StorefrontCommonExtraParams

* displayName

  ```ts
  string
  ```

* headers

  ```ts
  HeadersInit
  ```

* storefrontApiVersion

  ```ts
  string
  ```

### StorefrontMutations

Maps all the mutations found in the project to variables and return types.



### AutoAddedVariableNames

```ts
'country' | 'language'
```

### StorefrontQueries

Maps all the queries found in the project to variables and return types.



### StorefrontQueryOptions

```ts
StorefrontCommonExtraParams & {
  query: string;
  mutation?: never;
  cache?: CachingStrategy;
}
```

### 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

  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).

  ```ts
  number
  ```

* mode

  The caching mode, generally \`public\`, \`private\`, or \`no-store\`.

  ```ts
  string
  ```

* sMaxAge

  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).

  ```ts
  number
  ```

* staleIfError

  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).

  ```ts
  number
  ```

* staleWhileRevalidate

  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).

  ```ts
  number
  ```

### Headers



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

Examples

### Examples

* #### example

  ##### Description

  This is the default 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({
        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 (
      <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>
    );
  }
  ```