--- title: sendShopifyAnalytics description: Sends analytics to Shopify. api_version: 2023-07 api_name: hydrogen source_url: html: 'https://shopify.dev/docs/api/hydrogen/2023-07/utilities/sendshopifyanalytics' md: >- https://shopify.dev/docs/api/hydrogen/2023-07/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 * canonicalUrl Canonical url. ```ts string ``` * pageType Shopify page type. ```ts string ``` * resourceId Shopify resource id in the form of \`gid://shopify/\/\\`. ```ts string ``` * collectionHandle Shopify collection handle. ```ts string ``` * searchString Search term used on a search results page. ```ts string ``` * hasUserConsent If we have consent from buyer for data collection ```ts boolean ``` * shopId Shopify shop id in the form of \`gid://shopify/Shop/\\`. ```ts string ``` * currency Currency code. ```ts CurrencyCode ``` * storefrontId Shopify storefront id generated by Hydrogen sales channel. ```ts string ``` * acceptedLanguage Language displayed to buyer. ```ts LanguageCode ``` * shopifySalesChannel Shopify sales channel. ```ts ShopifySalesChannels ``` * customerId Shopify customer id in the form of \`gid://shopify/Customer/\\`. ```ts string ``` * totalValue Total value of products. ```ts number ``` * products Product list. ```ts ShopifyAnalyticsProduct[] ``` * uniqueToken Shopify unique user token: Value of \`\_shopify\_y\` cookie. 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 ``` * url Value of \`window\.location.href\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * path Value of \`window\.location.pathname\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * search Value of \`window\.location.search\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * referrer Value of \`window\.document.referrer\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * title Value of \`document.title\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * userAgent Value of \`navigator.userAgent\`. 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 ``` * navigationApi Navigation api: \`'PerformanceNavigationTiming' | 'performance.navigation'\`. 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; /** Search term used on a search results page. */ searchString?: string; } ``` ### ShopifySalesChannels ```ts keyof typeof ShopifySalesChannel ``` ### ShopifySalesChannel * hydrogen Shopify Hydrogen sales channel ```ts "hydrogen" ``` * headless Shopify Headless sales channel ```ts "headless" ``` ```ts interface ShopifySalesChannel { /** Shopify Hydrogen sales channel */ hydrogen: 'hydrogen'; /** Shopify Headless sales channel */ headless: 'headless'; } ``` ### ShopifyAnalyticsProduct * productGid Product id in the form of \`gid://shopify/Product/\\`. ```ts string ``` * variantGid Variant id in the form of \`gid://shopify/ProductVariant/\\`. ```ts string ``` * name Product name. ```ts string ``` * variantName Variant name. ```ts string ``` * brand Product brand or vendor. ```ts string ``` * category Product category or type. ```ts string ``` * price Product price. ```ts string ``` * sku Product sku. ```ts string ``` * quantity Quantity of the product in this event. ```ts number ``` ```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; } ``` ### 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 * cartId Shopify cart id in the form of \`gid://shopify/Cart/\\`. ```ts string ``` * hasUserConsent If we have consent from buyer for data collection ```ts boolean ``` * shopId Shopify shop id in the form of \`gid://shopify/Shop/\\`. ```ts string ``` * currency Currency code. ```ts CurrencyCode ``` * storefrontId Shopify storefront id generated by Hydrogen sales channel. ```ts string ``` * acceptedLanguage Language displayed to buyer. ```ts LanguageCode ``` * shopifySalesChannel Shopify sales channel. ```ts ShopifySalesChannels ``` * customerId Shopify customer id in the form of \`gid://shopify/Customer/\\`. ```ts string ``` * totalValue Total value of products. ```ts number ``` * products Product list. ```ts ShopifyAnalyticsProduct[] ``` * uniqueToken Shopify unique user token: Value of \`\_shopify\_y\` cookie. 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 ``` * url Value of \`window\.location.href\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * path Value of \`window\.location.pathname\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * search Value of \`window\.location.search\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * referrer Value of \`window\.document.referrer\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * title Value of \`document.title\`. Use \`getClientBrowserParameters()\` to collect this value. ```ts string ``` * userAgent Value of \`navigator.userAgent\`. 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 ``` * navigationApi Navigation api: \`'PerformanceNavigationTiming' | 'performance.navigation'\`. 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. * PAGE\_VIEW "PAGE\_VIEW" required Page view * ADD\_TO\_CART "ADD\_TO\_CART" required Add to cart ## 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 * giftCard "gift\_card" required * home "index" required * listCollections "list-collections" required * forbidden "403" required * notFound "404" required * page "page" required * password "password" required * product "product" required * policy "policy" required * search "search" required ## ShopifySalesChannel Analytics sales channel values accepted by Shopify analytics. * hydrogen "hydrogen" required Shopify Hydrogen sales channel * headless "headless" required Shopify Headless sales channel ### Examples * #### Example code ##### Description I am the default example ##### JavaScript ```jsx 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 ; } ``` ##### TypeScript ```tsx 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 ; } ``` ## 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/hooks/useShopifyCookies) [HookuseShopifyCookies](https://shopify.dev/api/hydrogen/hooks/useShopifyCookies) [![](https://shopify.dev/images/icons/32/gear.png)![](https://shopify.dev/images/icons/32/gear-dark.png)](https://shopify.dev/api/hydrogen/utilities/getclientbrowserparameters) [UtilitygetClientBrowserParameters](https://shopify.dev/api/hydrogen/utilities/getclientbrowserparameters)