Choose a version:

sendShopifyAnalytics
utility

Sends analytics to Shopify.

Anchor to sendShopifyAnalytics
sendShopifyAnalytics(
event
,
shopDomain
)

If event.payload.hasUserConsent is false, no analytics event will happen.

Anchor to sendShopifyAnalytics-parametersParameters

Anchor to event event required: The analytics event.
Anchor to shopDomain shopDomain string: The Online Store domain to sent Shopify analytics under the same top level domain.

Anchor to sendShopifyAnalytics-returnsReturns

Promise<void>

ShopifyAnalytics

ShopifyPageView | ShopifyAddToCart

ShopifyPageView

eventName
Use `AnalyticsEventName.PAGE_VIEW` constant.
```
string
```
payload
```
ShopifyPageViewPayload
```

{
  /** Use `AnalyticsEventName.PAGE_VIEW` constant. */
  eventName: string;
  payload: ShopifyPageViewPayload;
}

ShopifyPageViewPayload

acceptedLanguage
Language displayed to buyer.
```
LanguageCode
```
analyticsAllowed
Result of `customerPrivacyApi.analyticsProcessingAllowed()`
```
boolean
```
assetVersionId
NPM package version of either hydrogen or hydrogen-react. Defaults to hydrogen-react package version.
```
string
```
canonicalUrl
Canonical url.
```
string
```
ccpaEnforced
Result of `!customerPrivacyApi.saleOfDataAllowed()`
```
boolean
```
collectionHandle
Shopify collection handle.
```
string
```
collectionId
Shopify collection id.
```
string
```
currency
Currency code.
```
CurrencyCode
```
customerId
Shopify customer id in the form of `gid://shopify/Customer/<id>`.
```
string
```
gdprEnforced
Result of `!(customerPrivacyApi.marketingAllowed() && customerPrivacy.analyticsProcessingAllowed())`
```
boolean
```
hasUserConsent
If we have consent from buyer for data collection
```
boolean
```
hydrogenSubchannelId
Alternative name for Shopify storefront id generated by Hydrogen sales channel. The value of env.PUBLIC_STOREFRONT_ID.
```
string
```
marketingAllowed
Result of `customerPrivacyApi.marketingAllowed()`
```
boolean
```
navigationApi
Navigation api: `'PerformanceNavigationTiming' | 'performance.navigation'`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
navigationType
Navigation type: `'navigate' | 'reload' | 'back_forward' | 'prerender' | 'unknown'`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
pageType
Shopify page type.
```
string
```
path
Value of `window.location.pathname`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
products
Product list.
```
ShopifyAnalyticsProduct[]
```
referrer
Value of `window.document.referrer`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
resourceId
Shopify resource id in the form of `gid://shopify/<type>/<id>`.
```
string
```
saleOfDataAllowed
Result of `customerPrivacyApi.saleOfDataAllowed()`
```
boolean
```
search
Value of `window.location.search`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
searchString
Search term used on a search results page.
```
string
```
shopId
Shopify shop id in the form of `gid://shopify/Shop/<id>`.
```
string
```
shopifySalesChannel
Shopify sales channel.
```
ShopifySalesChannels
```
storefrontId
Shopify storefront id generated by Hydrogen sales channel. The value of env.PUBLIC_STOREFRONT_ID.
```
string
```
title
Value of `document.title`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
totalValue
Total value of products.
```
number
```
uniqueToken
Shopify unique user token: Value of `_shopify_y` cookie. Use `getClientBrowserParameters()` to collect this value.
```
string
```
url
Value of `window.location.href`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
userAgent
Value of `navigator.userAgent`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
visitToken
Shopify session token: Value of `_shopify_s` cookie. Use `getClientBrowserParameters()` to collect this value.
```
string
```

export interface ShopifyPageViewPayload
  extends ShopifyAnalyticsBase,
    ClientBrowserParameters {
  /** Canonical url. */
  canonicalUrl?: string;
  /** Shopify page type. */
  pageType?: string;
  /** Shopify resource id in the form of `gid://shopify/<type>/<id>`. */
  resourceId?: string;
  /** Shopify collection handle. */
  collectionHandle?: string;
  /** Shopify collection id. */
  collectionId?: string;
  /** Search term used on a search results page. */
  searchString?: string;
}

CurrencyCode

Supports CurrencyCode from both Storefront API and Customer Account API. The APIs may have different CurrencyCode enums (e.g., Customer Account API added USDC in 2025-07, but Storefront API doesn't support USDC in 2025-07). This union type ensures useMoney works with data from either API.

StorefrontApiCurrencyCode | CustomerAccountApiCurrencyCode

ShopifyAnalyticsProduct

brand
Product brand or vendor.
```
string
```
category
Product category or type.
```
string
```
name
Product name.
```
string
```
price
Product price.
```
string
```
productGid
Product id in the form of `gid://shopify/Product/<id>`.
```
string
```
quantity
Quantity of the product in this event.
```
number
```
sku
Product sku.
```
string
```
variantGid
Variant id in the form of `gid://shopify/ProductVariant/<id>`.
```
string
```
variantName
Variant name.
```
string
```

{
  /** Product id in the form of `gid://shopify/Product/<id>`. */
  productGid: Product['id'];
  /** Variant id in the form of `gid://shopify/ProductVariant/<id>`. */
  variantGid?: ProductVariant['id'];
  /** Product name. */
  name: Product['title'];
  /** Variant name. */
  variantName?: ProductVariant['title'];
  /** Product brand or vendor. */
  brand: Product['vendor'];
  /** Product category or type. */
  category?: Product['productType'];
  /** Product price. */
  price: ProductVariant['price']['amount'];
  /** Product sku. */
  sku?: ProductVariant['sku'];
  /** Quantity of the product in this event. */
  quantity?: number;
}

ShopifySalesChannels

keyof typeof ShopifySalesChannel

ShopifySalesChannel

headless
Shopify Headless sales channel
```
"headless"
```
hydrogen
Shopify Hydrogen sales channel
```
"hydrogen"
```

export interface ShopifySalesChannel {
  /** Shopify Hydrogen sales channel */
  hydrogen: 'hydrogen';
  /** Shopify Headless sales channel */
  headless: 'headless';
}

ShopifyAddToCart

eventName
Use `AnalyticsEventName.ADD_TO_CART` constant.
```
string
```
payload
```
ShopifyAddToCartPayload
```

{
  /** Use `AnalyticsEventName.ADD_TO_CART` constant. */
  eventName: string;
  payload: ShopifyAddToCartPayload;
}

ShopifyAddToCartPayload

acceptedLanguage
Language displayed to buyer.
```
LanguageCode
```
analyticsAllowed
Result of `customerPrivacyApi.analyticsProcessingAllowed()`
```
boolean
```
assetVersionId
NPM package version of either hydrogen or hydrogen-react. Defaults to hydrogen-react package version.
```
string
```
cartId
Shopify cart id in the form of `gid://shopify/Cart/<id>`.
```
string
```
ccpaEnforced
Result of `!customerPrivacyApi.saleOfDataAllowed()`
```
boolean
```
currency
Currency code.
```
CurrencyCode
```
customerId
Shopify customer id in the form of `gid://shopify/Customer/<id>`.
```
string
```
gdprEnforced
Result of `!(customerPrivacyApi.marketingAllowed() && customerPrivacy.analyticsProcessingAllowed())`
```
boolean
```
hasUserConsent
If we have consent from buyer for data collection
```
boolean
```
hydrogenSubchannelId
Alternative name for Shopify storefront id generated by Hydrogen sales channel. The value of env.PUBLIC_STOREFRONT_ID.
```
string
```
marketingAllowed
Result of `customerPrivacyApi.marketingAllowed()`
```
boolean
```
navigationApi
Navigation api: `'PerformanceNavigationTiming' | 'performance.navigation'`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
navigationType
Navigation type: `'navigate' | 'reload' | 'back_forward' | 'prerender' | 'unknown'`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
path
Value of `window.location.pathname`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
products
Product list.
```
ShopifyAnalyticsProduct[]
```
referrer
Value of `window.document.referrer`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
saleOfDataAllowed
Result of `customerPrivacyApi.saleOfDataAllowed()`
```
boolean
```
search
Value of `window.location.search`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
shopId
Shopify shop id in the form of `gid://shopify/Shop/<id>`.
```
string
```
shopifySalesChannel
Shopify sales channel.
```
ShopifySalesChannels
```
storefrontId
Shopify storefront id generated by Hydrogen sales channel. The value of env.PUBLIC_STOREFRONT_ID.
```
string
```
title
Value of `document.title`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
totalValue
Total value of products.
```
number
```
uniqueToken
Shopify unique user token: Value of `_shopify_y` cookie. Use `getClientBrowserParameters()` to collect this value.
```
string
```
url
Value of `window.location.href`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
userAgent
Value of `navigator.userAgent`. Use `getClientBrowserParameters()` to collect this value.
```
string
```
visitToken
Shopify session token: Value of `_shopify_s` cookie. Use `getClientBrowserParameters()` to collect this value.
```
string
```

export interface ShopifyAddToCartPayload
  extends ShopifyAnalyticsBase,
    ClientBrowserParameters {
  /** Shopify cart id in the form of `gid://shopify/Cart/<id>`. */
  cartId: string;
}

Was this section helpful?

Anchor to analyticseventnameAnalyticsEventName

Analytics event names accepted by Shopify analytics.

Anchor to ADD_TO_CART ADD_TO_CART "ADD_TO_CART" required: Add to cart
Anchor to PAGE_VIEW PAGE_VIEW "PAGE_VIEW" required: Page view

Was this section helpful?

Anchor to analyticspagetypeAnalyticsPageType

Analytics page type values accepted by Shopify analytics.

Anchor to article article "article" required
Anchor to blog blog "blog" required
Anchor to captcha captcha "captcha" required
Anchor to cart cart "cart" required
Anchor to collection collection "collection" required
Anchor to customersAccount customersAccount "customers/account" required
Anchor to customersActivateAccount customersActivateAccount "customers/activate_account" required
Anchor to customersAddresses customersAddresses "customers/addresses" required
Anchor to customersLogin customersLogin "customers/login" required
Anchor to customersOrder customersOrder "customers/order" required
Anchor to customersRegister customersRegister "customers/register" required
Anchor to customersResetPassword customersResetPassword "customers/reset_password" required
Anchor to forbidden forbidden "403" required
Anchor to giftCard giftCard "gift_card" required
Anchor to home home "index" required
Anchor to listCollections listCollections "list-collections" required
Anchor to notFound notFound "404" required
Anchor to page page "page" required
Anchor to password password "password" required
Anchor to policy policy "policy" required
Anchor to product product "product" required
Anchor to search search "search" required

Was this section helpful?

Anchor to shopifysaleschannelShopifySalesChannel

Analytics sales channel values accepted by Shopify analytics.

Anchor to headless headless "headless" required: Shopify Headless sales channel
Anchor to hydrogen hydrogen "hydrogen" required: Shopify Hydrogen sales channel

Was this section helpful?

Example code

import {

sendShopifyAnalytics,

getClientBrowserParameters,

AnalyticsEventName,

useShopifyCookies,

} from '@shopify/hydrogen';

import {useRouter} from 'next/router';

import {useEffect} from 'react';

function sendPageView(analyticsPageData) {

const payload = {

...getClientBrowserParameters(),

...analyticsPageData,

};

sendShopifyAnalytics({

eventName: AnalyticsEventName.PAGE_VIEW,

payload,

});

}

// Hook into your router's page change events to fire this analytics event:

// for example, in NextJS:

const analyticsShopData = {

shopId: 'gid://shopify/Shop/{your-shop-id}',

currency: 'USD',

acceptedLanguage: 'en',

};

export default function App({Component, pageProps}) {

const router = useRouter();

// eslint-disable-next-line no-undef

const hasUserConsent = yourFunctionToDetermineIfUserHasConsent();

// eslint-disable-next-line react-hooks/exhaustive-deps

const analytics = {

hasUserConsent,

...analyticsShopData,

...pageProps.analytics,

};

const pagePropsWithAppAnalytics = {

...pageProps,

analytics,

};

useEffect(() => {

const handleRouteChange = () => {

sendPageView(analytics);

};

router.events.on('routeChangeComplete', handleRouteChange);

return () => {

router.events.off('routeChangeComplete', handleRouteChange);

};

}, [analytics, router.events]);

useShopifyCookies();

return <Component {...pagePropsWithAppAnalytics} />;

}

Examples

Example code

Description

I am the default example

JavaScript

import {
  sendShopifyAnalytics,
  getClientBrowserParameters,
  AnalyticsEventName,
  useShopifyCookies,
} from '@shopify/hydrogen';
import {useRouter} from 'next/router';
import {useEffect} from 'react';

function sendPageView(analyticsPageData) {
  const payload = {
    ...getClientBrowserParameters(),
    ...analyticsPageData,
  };
  sendShopifyAnalytics({
    eventName: AnalyticsEventName.PAGE_VIEW,
    payload,
  });
}

// Hook into your router's page change events to fire this analytics event:
// for example, in NextJS:

const analyticsShopData = {
  shopId: 'gid://shopify/Shop/{your-shop-id}',
  currency: 'USD',
  acceptedLanguage: 'en',
};

export default function App({Component, pageProps}) {
  const router = useRouter();

  // eslint-disable-next-line no-undef
  const hasUserConsent = yourFunctionToDetermineIfUserHasConsent();

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const analytics = {
    hasUserConsent,
    ...analyticsShopData,
    ...pageProps.analytics,
  };
  const pagePropsWithAppAnalytics = {
    ...pageProps,
    analytics,
  };

  useEffect(() => {
    const handleRouteChange = () => {
      sendPageView(analytics);
    };

    router.events.on('routeChangeComplete', handleRouteChange);

    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [analytics, router.events]);

  useShopifyCookies();

  return <Component {...pagePropsWithAppAnalytics} />;
}

TypeScript

import * as React from 'react';
import {useEffect} from 'react';
import {
  sendShopifyAnalytics,
  getClientBrowserParameters,
  AnalyticsEventName,
  useShopifyCookies,
} from '@shopify/hydrogen';
import {useRouter} from 'next/router';

function sendPageView(analyticsPageData) {
  const payload = {
    ...getClientBrowserParameters(),
    ...analyticsPageData,
  };
  sendShopifyAnalytics({
    eventName: AnalyticsEventName.PAGE_VIEW,
    payload,
  });
}

// Hook into your router's page change events to fire this analytics event:
// for example, in NextJS:

const analyticsShopData = {
  shopId: 'gid://shopify/Shop/{your-shop-id}',
  currency: 'USD',
  acceptedLanguage: 'en',
};

export default function App({Component, pageProps}) {
  const router = useRouter();

  // @ts-expect-error - this is an example, you should implement this function
  const hasUserConsent = yourFunctionToDetermineIfUserHasConsent();

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const analytics = {
    hasUserConsent,
    ...analyticsShopData,
    ...pageProps.analytics,
  };
  const pagePropsWithAppAnalytics = {
    ...pageProps,
    analytics,
  };

  useEffect(() => {
    const handleRouteChange = () => {
      sendPageView(analytics);
    };

    router.events.on('routeChangeComplete', handleRouteChange);

    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [analytics, router.events]);

  useShopifyCookies();

  return <Component {...pagePropsWithAppAnalytics} />;
}