Choose a version:

sendShopifyAnalytics

Sends analytics to Shopify.

Anchor to sendShopifyAnalytics
sendShopifyAnalytics(
event
,
shopDomain
)

Set user and session cookies and refresh the expiry time. 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
```

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

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-10, but Storefront API doesn't support USDC in 2025-10). 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
```

ShopifySalesChannels

keyof typeof ShopifySalesChannel

ShopifySalesChannel

Analytics sales channel values accepted by Shopify analytics.

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

ShopifyAddToCart

eventName
Use `AnalyticsEventName.ADD_TO_CART` constant.
```
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
```
currency
Currency code.
```
CurrencyCode
```
customerId
Shopify customer id in the form of `gid://shopify/Customer/<id>`.
```
string
```
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
```

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

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

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

Examples

import {

sendShopifyAnalytics,

getClientBrowserParameters,

AnalyticsEventName,

useShopifyCookies,

} from '@shopify/hydrogen-react';

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-react';
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-react';
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} />;
}