# sendShopifyAnalytics Sends analytics to Shopify. ### Example code ```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 <Component {...pagePropsWithAppAnalytics} />; } ``` ```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 <Component {...pagePropsWithAppAnalytics} />; } ``` ## sendShopifyAnalytics If `event.payload.hasUserConsent` is false, no analytics event will happen. ### SendShopifyAnalyticsGeneratedType Set user and session cookies and refresh the expiry time #### Returns: Promise #### Params: - event: ShopifyAnalytics - shopDomain: string export function sendShopifyAnalytics( event: ShopifyAnalytics, shopDomain?: string, ): Promise { const {eventName, payload} = event; if (!payload.hasUserConsent) return Promise.resolve(); let events: ShopifyMonorailEvent[] = []; if (eventName === AnalyticsEventName.PAGE_VIEW) { const pageViewPayload = payload as ShopifyPageViewPayload; events = events.concat( trekkiePageView(pageViewPayload), customerPageView(pageViewPayload), ); } else if (eventName === AnalyticsEventName.ADD_TO_CART) { events = events.concat( customerAddToCart(payload as ShopifyAddToCartPayload), ); } if (events.length) { return sendToShopify(events, shopDomain); } else { return Promise.resolve(); } } ### ShopifyAnalytics ShopifyPageView | ShopifyAddToCart ### ShopifyPageView ### eventName Use `AnalyticsEventName.PAGE_VIEW` constant. ### payload ### ShopifyPageViewPayload ### canonicalUrl Canonical url. ### pageType Shopify page type. ### resourceId Shopify resource id in the form of `gid://shopify//`. ### collectionHandle Shopify collection handle. ### searchString Search term used on a search results page. ### hasUserConsent If we have consent from buyer for data collection ### shopId Shopify shop id in the form of `gid://shopify/Shop/`. ### currency Currency code. ### storefrontId Shopify storefront id generated by Hydrogen sales channel. ### acceptedLanguage Language displayed to buyer. ### shopifySalesChannel Shopify sales channel. ### customerId Shopify customer id in the form of `gid://shopify/Customer/`. ### totalValue Total value of products. ### products Product list. ### uniqueToken Shopify unique user token: Value of `_shopify_y` cookie. Use `getClientBrowserParameters()` to collect this value. ### visitToken Shopify session token: Value of `_shopify_s` cookie. Use `getClientBrowserParameters()` to collect this value. ### url Value of `window.location.href`. Use `getClientBrowserParameters()` to collect this value. ### path Value of `window.location.pathname`. Use `getClientBrowserParameters()` to collect this value. ### search Value of `window.location.search`. Use `getClientBrowserParameters()` to collect this value. ### referrer Value of `window.document.referrer`. Use `getClientBrowserParameters()` to collect this value. ### title Value of `document.title`. Use `getClientBrowserParameters()` to collect this value. ### userAgent Value of `navigator.userAgent`. Use `getClientBrowserParameters()` to collect this value. ### navigationType Navigation type: `'navigate' | 'reload' | 'back_forward' | 'prerender' | 'unknown'`. Use `getClientBrowserParameters()` to collect this value. ### navigationApi Navigation api: `'PerformanceNavigationTiming' | 'performance.navigation'`. Use `getClientBrowserParameters()` to collect this value. ### ShopifySalesChannels keyof typeof ShopifySalesChannel ### ShopifySalesChannel ### hydrogen Shopify Hydrogen sales channel ### headless Shopify Headless sales channel ### ShopifyAnalyticsProduct ### productGid Product id in the form of `gid://shopify/Product/`. ### variantGid Variant id in the form of `gid://shopify/ProductVariant/`. ### name Product name. ### variantName Variant name. ### brand Product brand or vendor. ### category Product category or type. ### price Product price. ### sku Product sku. ### quantity Quantity of the product in this event. ### ShopifyAddToCart ### eventName Use `AnalyticsEventName.ADD_TO_CART` constant. ### payload ### ShopifyAddToCartPayload ### cartId Shopify cart id in the form of `gid://shopify/Cart/`. ### hasUserConsent If we have consent from buyer for data collection ### shopId Shopify shop id in the form of `gid://shopify/Shop/`. ### currency Currency code. ### storefrontId Shopify storefront id generated by Hydrogen sales channel. ### acceptedLanguage Language displayed to buyer. ### shopifySalesChannel Shopify sales channel. ### customerId Shopify customer id in the form of `gid://shopify/Customer/`. ### totalValue Total value of products. ### products Product list. ### uniqueToken Shopify unique user token: Value of `_shopify_y` cookie. Use `getClientBrowserParameters()` to collect this value. ### visitToken Shopify session token: Value of `_shopify_s` cookie. Use `getClientBrowserParameters()` to collect this value. ### url Value of `window.location.href`. Use `getClientBrowserParameters()` to collect this value. ### path Value of `window.location.pathname`. Use `getClientBrowserParameters()` to collect this value. ### search Value of `window.location.search`. Use `getClientBrowserParameters()` to collect this value. ### referrer Value of `window.document.referrer`. Use `getClientBrowserParameters()` to collect this value. ### title Value of `document.title`. Use `getClientBrowserParameters()` to collect this value. ### userAgent Value of `navigator.userAgent`. Use `getClientBrowserParameters()` to collect this value. ### navigationType Navigation type: `'navigate' | 'reload' | 'back_forward' | 'prerender' | 'unknown'`. Use `getClientBrowserParameters()` to collect this value. ### navigationApi Navigation api: `'PerformanceNavigationTiming' | 'performance.navigation'`. Use `getClientBrowserParameters()` to collect this value. ## Related - [useShopifyCookies](/api/hydrogen/hooks/useShopifyCookies) - [getClientBrowserParameters](/api/hydrogen/utilities/getclientbrowserparameters) ## AnalyticsEventName Analytics event names accepted by Shopify analytics. ### AnalyticsEventName These duplicated interface declaration is so that we can generate proper documentation for these public facing constants ### PAGE_VIEW Page view ### ADD_TO_CART Add to cart ## Related - [useShopifyCookies](/api/hydrogen/hooks/useShopifyCookies) - [getClientBrowserParameters](/api/hydrogen/utilities/getclientbrowserparameters) ## AnalyticsPageType Analytics page type values accepted by Shopify analytics. ### AnalyticsPageType ### article ### blog ### captcha ### cart ### collection ### customersAccount ### customersActivateAccount ### customersAddresses ### customersLogin ### customersOrder ### customersRegister ### customersResetPassword ### giftCard ### home ### listCollections ### forbidden ### notFound ### page ### password ### product ### policy ### search ## Related - [useShopifyCookies](/api/hydrogen/hooks/useShopifyCookies) - [getClientBrowserParameters](/api/hydrogen/utilities/getclientbrowserparameters) ## ShopifySalesChannel Analytics sales channel values accepted by Shopify analytics. ### ShopifySalesChannel ### hydrogen Shopify Hydrogen sales channel ### headless Shopify Headless sales channel ## Related - [useShopifyCookies](/api/hydrogen/hooks/useShopifyCookies) - [getClientBrowserParameters](/api/hydrogen/utilities/getclientbrowserparameters)