--- title: sendShopifyAnalytics description: Sends analytics to Shopify. api_version: 2025-04 api_name: hydrogen-react source_url: html: https://shopify.dev/docs/api/hydrogen-react/latest/utilities/sendshopifyanalytics md: https://shopify.dev/docs/api/hydrogen-react/latest/utilities/sendshopifyanalytics.md --- # send​Shopify​Analyticsutility Sends analytics to Shopify. ## send​Shopify​Analytics([event](#sendshopifyanalytics-propertydetail-event)​,[shopDomain](#sendshopifyanalytics-propertydetail-shopdomain)​) If `event.payload.hasUserConsent` is false, no analytics event will happen. ### Parameters * event ShopifyAnalytics required The analytics event. * shopDomain string The Online Store domain to sent Shopify analytics under the same top level domain. ### Returns * Promise\ ### ShopifyAnalytics ```ts ShopifyPageView | ShopifyAddToCart ``` ### ShopifyPageView * eventName Use \`AnalyticsEventName.PAGE\_VIEW\` constant. ```ts string ``` * payload ```ts ShopifyPageViewPayload ``` ```ts { /** Use `AnalyticsEventName.PAGE_VIEW` constant. */ eventName: string; payload: ShopifyPageViewPayload; } ``` ### ShopifyPageViewPayload * acceptedLanguage Language displayed to buyer. ```ts LanguageCode ``` * analyticsAllowed Result of \`customerPrivacyApi.analyticsProcessingAllowed()\` ```ts boolean ``` * assetVersionId NPM package version of either hydrogen or hydrogen-react. Defaults to hydrogen-react package version. ```ts string ``` * canonicalUrl Canonical url. ```ts string ``` * ccpaEnforced Result of \`!customerPrivacyApi.saleOfDataAllowed()\` ```ts boolean ``` * collectionHandle Shopify collection handle. ```ts string ``` * collectionId Shopify collection id. ```ts string ``` * currency Currency code. ```ts CurrencyCode ``` * customerId Shopify customer id in the form of \`gid://shopify/Customer/\\`. ```ts string ``` * gdprEnforced Result of \`!(customerPrivacyApi.marketingAllowed() && customerPrivacy.analyticsProcessingAllowed())\` ```ts boolean ``` * hasUserConsent If we have consent from buyer for data collection ```ts boolean ``` * hydrogenSubchannelId Alternative name for Shopify storefront id generated by Hydrogen sales channel. The value of env.PUBLIC\_STOREFRONT\_ID. ```ts string ``` * marketingAllowed Result of \`customerPrivacyApi.marketingAllowed()\` ```ts boolean ``` * navigationApi Navigation api: \`'PerformanceNavigationTiming' | 'performance.navigation'\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * navigationType Navigation type: \`'navigate' | 'reload' | 'back\_forward' | 'prerender' | 'unknown'\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * pageType Shopify page type. ```ts string ``` * path Value of \`window\.location.pathname\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * products Product list. ```ts ShopifyAnalyticsProduct[] ``` * referrer Value of \`window\.document.referrer\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * resourceId Shopify resource id in the form of \`gid://shopify/\/\\`. ```ts string ``` * saleOfDataAllowed Result of \`customerPrivacyApi.saleOfDataAllowed()\` ```ts boolean ``` * search Value of \`window\.location.search\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * searchString Search term used on a search results page. ```ts string ``` * shopId Shopify shop id in the form of \`gid://shopify/Shop/\\`. ```ts string ``` * shopifySalesChannel Shopify sales channel. ```ts ShopifySalesChannels ``` * storefrontId Shopify storefront id generated by Hydrogen sales channel. The value of env.PUBLIC\_STOREFRONT\_ID. ```ts string ``` * title Value of \`document.title\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * totalValue Total value of products. ```ts number ``` * uniqueToken Shopify unique user token: Value of \`\_shopify\_y\` cookie. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * url Value of \`window\.location.href\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * userAgent Value of \`navigator.userAgent\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * visitToken Shopify session token: Value of \`\_shopify\_s\` cookie. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` ```ts export interface ShopifyPageViewPayload extends ShopifyAnalyticsBase, ClientBrowserParameters { /** Canonical url. */ canonicalUrl?: string; /** Shopify page type. */ pageType?: string; /** Shopify resource id in the form of `gid://shopify//`. */ resourceId?: string; /** Shopify collection handle. */ collectionHandle?: string; /** Shopify collection id. */ collectionId?: string; /** Search term used on a search results page. */ searchString?: string; } ``` ### ShopifyAnalyticsProduct * brand Product brand or vendor. ```ts string ``` * category Product category or type. ```ts string ``` * name Product name. ```ts string ``` * price Product price. ```ts string ``` * productGid Product id in the form of \`gid://shopify/Product/\\`. ```ts string ``` * quantity Quantity of the product in this event. ```ts number ``` * sku Product sku. ```ts string ``` * variantGid Variant id in the form of \`gid://shopify/ProductVariant/\\`. ```ts string ``` * variantName Variant name. ```ts string ``` ```ts { /** Product id in the form of `gid://shopify/Product/`. */ productGid: Product['id']; /** Variant id in the form of `gid://shopify/ProductVariant/`. */ 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 ```ts keyof typeof ShopifySalesChannel ``` ### ShopifySalesChannel * headless Shopify Headless sales channel ```ts "headless" ``` * hydrogen Shopify Hydrogen sales channel ```ts "hydrogen" ``` ```ts export interface ShopifySalesChannel { /** Shopify Hydrogen sales channel */ hydrogen: 'hydrogen'; /** Shopify Headless sales channel */ headless: 'headless'; } ``` ### ShopifyAddToCart * eventName Use \`AnalyticsEventName.ADD\_TO\_CART\` constant. ```ts string ``` * payload ```ts ShopifyAddToCartPayload ``` ```ts { /** Use `AnalyticsEventName.ADD_TO_CART` constant. */ eventName: string; payload: ShopifyAddToCartPayload; } ``` ### ShopifyAddToCartPayload * acceptedLanguage Language displayed to buyer. ```ts LanguageCode ``` * analyticsAllowed Result of \`customerPrivacyApi.analyticsProcessingAllowed()\` ```ts boolean ``` * assetVersionId NPM package version of either hydrogen or hydrogen-react. Defaults to hydrogen-react package version. ```ts string ``` * cartId Shopify cart id in the form of \`gid://shopify/Cart/\\`. ```ts string ``` * ccpaEnforced Result of \`!customerPrivacyApi.saleOfDataAllowed()\` ```ts boolean ``` * currency Currency code. ```ts CurrencyCode ``` * customerId Shopify customer id in the form of \`gid://shopify/Customer/\\`. ```ts string ``` * gdprEnforced Result of \`!(customerPrivacyApi.marketingAllowed() && customerPrivacy.analyticsProcessingAllowed())\` ```ts boolean ``` * hasUserConsent If we have consent from buyer for data collection ```ts boolean ``` * hydrogenSubchannelId Alternative name for Shopify storefront id generated by Hydrogen sales channel. The value of env.PUBLIC\_STOREFRONT\_ID. ```ts string ``` * marketingAllowed Result of \`customerPrivacyApi.marketingAllowed()\` ```ts boolean ``` * navigationApi Navigation api: \`'PerformanceNavigationTiming' | 'performance.navigation'\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * navigationType Navigation type: \`'navigate' | 'reload' | 'back\_forward' | 'prerender' | 'unknown'\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * path Value of \`window\.location.pathname\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * products Product list. ```ts ShopifyAnalyticsProduct[] ``` * referrer Value of \`window\.document.referrer\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * saleOfDataAllowed Result of \`customerPrivacyApi.saleOfDataAllowed()\` ```ts boolean ``` * search Value of \`window\.location.search\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * shopId Shopify shop id in the form of \`gid://shopify/Shop/\\`. ```ts string ``` * shopifySalesChannel Shopify sales channel. ```ts ShopifySalesChannels ``` * storefrontId Shopify storefront id generated by Hydrogen sales channel. The value of env.PUBLIC\_STOREFRONT\_ID. ```ts string ``` * title Value of \`document.title\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * totalValue Total value of products. ```ts number ``` * uniqueToken Shopify unique user token: Value of \`\_shopify\_y\` cookie. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * url Value of \`window\.location.href\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * userAgent Value of \`navigator.userAgent\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * visitToken Shopify session token: Value of \`\_shopify\_s\` cookie. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` ```ts export interface ShopifyAddToCartPayload extends ShopifyAnalyticsBase, ClientBrowserParameters { /** Shopify cart id in the form of `gid://shopify/Cart/`. */ cartId: string; } ``` ## AnalyticsEventName Analytics event names accepted by Shopify analytics. * ADD\_TO\_CART "ADD\_TO\_CART" required Add to cart * PAGE\_VIEW "PAGE\_VIEW" required Page view ## AnalyticsPageType Analytics page type values accepted by Shopify analytics. * article "article" required * blog "blog" required * captcha "captcha" required * cart "cart" required * collection "collection" required * customersAccount "customers/account" required * customersActivateAccount "customers/activate\_account" required * customersAddresses "customers/addresses" required * customersLogin "customers/login" required * customersOrder "customers/order" required * customersRegister "customers/register" required * customersResetPassword "customers/reset\_password" required * forbidden "403" required * giftCard "gift\_card" required * home "index" required * listCollections "list-collections" required * notFound "404" required * page "page" required * password "password" required * policy "policy" required * product "product" required * search "search" required ## ShopifySalesChannel Analytics sales channel values accepted by Shopify analytics. * headless "headless" required Shopify Headless sales channel * hydrogen "hydrogen" required Shopify Hydrogen sales channel ### Examples * #### Example code ##### Description I am the default example ##### JavaScript ```jsx 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 ; } ``` ##### TypeScript ```tsx 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 ; } ``` ## Related [![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/api/hydrogen-react/hooks/useShopifyCookies) [HookuseShopifyCookies](https://shopify.dev/api/hydrogen-react/hooks/useShopifyCookies) [![](https://shopify.dev/images/icons/32/gear.png)![](https://shopify.dev/images/icons/32/gear-dark.png)](https://shopify.dev/api/hydrogen-react/utilities/getclientbrowserparameters) [UtilitygetClientBrowserParameters](https://shopify.dev/api/hydrogen-react/utilities/getclientbrowserparameters)