--- title: sendShopifyAnalytics description: Sends analytics to Shopify. api_version: 2023-04 api_name: hydrogen source_url: html: 'https://shopify.dev/docs/api/hydrogen/2023-04/utilities/sendshopifyanalytics' md: >- https://shopify.dev/docs/api/hydrogen/2023-04/utilities/sendshopifyanalytics.md --- # send​Shopify​Analytics 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 ``` ### 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 keyof ShopifySalesChannel ``` * 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\.location.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 ``` ### ShopifySalesChannel * hydrogen Shopify Hydrogen sales channel ```ts "hydrogen" ``` * headless Shopify Headless sales channel ```ts "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 ``` ### ShopifyAddToCart * eventName Use \`AnalyticsEventName.ADD\_TO\_CART\` constant. ```ts string ``` * payload ```ts 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 keyof ShopifySalesChannel ``` * 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\.location.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 ``` ## 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 ### 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 [Hook - useShopifyCookies](https://shopify.dev/api/hydrogen/hooks/useShopifyCookies) [Utility - getClientBrowserParameters](https://shopify.dev/api/hydrogen/utilities/getclientbrowserparameters)