sendShopifyAnalytics

Sends analytics to Shopify.

Example code

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

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

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

Params:

event: ShopifyAnalytics

shopDomain: string

export function sendShopifyAnalytics( event: ShopifyAnalytics, shopDomain?: string, ): Promise<void> { const {eventName, payload} = event; if (!payload.hasUserConsent) return Promise.resolve(); let events: ShopifyMonorailEvent[] = []; const pageViewPayload = payload as ShopifyPageViewPayload; if (eventName === AnalyticsEventName.PAGE_VIEW) { events = events.concat( trekkiePageView(pageViewPayload), customerPageView(pageViewPayload), ); } else if (eventName === AnalyticsEventName.ADD_TO_CART) { events = events.concat( customerAddToCart(payload as ShopifyAddToCartPayload), ); } else if (eventName === AnalyticsEventName.PAGE_VIEW_2) { events = events.concat( trekkiePageView(pageViewPayload), customerPageView2(pageViewPayload), ); } else if (eventName === AnalyticsEventName.COLLECTION_VIEW) { events = events.concat(customerCollectionView(pageViewPayload)); } else if (eventName === AnalyticsEventName.PRODUCT_VIEW) { events = events.concat(customerProductView(pageViewPayload)); } else if (eventName === AnalyticsEventName.SEARCH_VIEW) { events = events.concat(customerSearchView(pageViewPayload)); } if (events.length) { return sendToShopify(events, shopDomain); } else { return Promise.resolve(); } }

ShopifyAnalytics

ShopifyPageView | ShopifyAddToCart

ShopifyPageView

eventName

Use `AnalyticsEventName.PAGE_VIEW` constant.

payload

ShopifyPageViewPayload

acceptedLanguage

Language displayed to buyer.

analyticsAllowed

Result of `customerPrivacyApi.analyticsProcessingAllowed()`

assetVersionId

NPM package version of either hydrogen or hydrogen-react. Defaults to hydrogen-react package version.

canonicalUrl

Canonical url.

ccpaEnforced

Result of `!customerPrivacyApi.saleOfDataAllowed()`

collectionHandle

Shopify collection handle.

collectionId

Shopify collection id.

currency

Currency code.

customerId

Shopify customer id in the form of `gid://shopify/Customer/<id>`.

gdprEnforced

Result of `!(customerPrivacyApi.marketingAllowed() && customerPrivacy.analyticsProcessingAllowed())`

hasUserConsent

If we have consent from buyer for data collection

hydrogenSubchannelId

Alternative name for Shopify storefront id generated by Hydrogen sales channel. The value of env.PUBLIC_STOREFRONT_ID.

marketingAllowed

Result of `customerPrivacyApi.marketingAllowed()`

navigationApi

Navigation api: `'PerformanceNavigationTiming' | 'performance.navigation'`. Use `getClientBrowserParameters()` to collect this value.

navigationType

Navigation type: `'navigate' | 'reload' | 'back_forward' | 'prerender' | 'unknown'`. Use `getClientBrowserParameters()` to collect this value.

pageType

Shopify page type.

path

Value of `window.location.pathname`. Use `getClientBrowserParameters()` to collect this value.

products

Product list.

referrer

Value of `window.document.referrer`. Use `getClientBrowserParameters()` to collect this value.

resourceId

Shopify resource id in the form of `gid://shopify/<type>/<id>`.

saleOfDataAllowed

Result of `customerPrivacyApi.saleOfDataAllowed()`

search

Value of `window.location.search`. Use `getClientBrowserParameters()` to collect this value.

searchString

Search term used on a search results page.

shopId

Shopify shop id in the form of `gid://shopify/Shop/<id>`.

shopifySalesChannel

Shopify sales channel.

storefrontId

Shopify storefront id generated by Hydrogen sales channel. The value of env.PUBLIC_STOREFRONT_ID.

title

Value of `document.title`. Use `getClientBrowserParameters()` to collect this value.

totalValue

Total value of products.

uniqueToken

Shopify unique user token: Value of `_shopify_y` cookie. Use `getClientBrowserParameters()` to collect this value.

url

Value of `window.location.href`. Use `getClientBrowserParameters()` to collect this value.

userAgent

Value of `navigator.userAgent`. Use `getClientBrowserParameters()` to collect this value.

visitToken

Shopify session token: Value of `_shopify_s` cookie. Use `getClientBrowserParameters()` to collect this value.

ShopifyAnalyticsProduct

brand

Product brand or vendor.

category

Product category or type.

name

Product name.

price

Product price.

productGid

Product id in the form of `gid://shopify/Product/<id>`.

quantity

Quantity of the product in this event.

sku

Product sku.

variantGid

Variant id in the form of `gid://shopify/ProductVariant/<id>`.

variantName

Variant name.

ShopifySalesChannels

keyof typeof ShopifySalesChannel

ShopifySalesChannel

headless

Shopify Headless sales channel

hydrogen

Shopify Hydrogen sales channel

ShopifyAddToCart

eventName

Use `AnalyticsEventName.ADD_TO_CART` constant.

payload

ShopifyAddToCartPayload

acceptedLanguage

Language displayed to buyer.

analyticsAllowed

Result of `customerPrivacyApi.analyticsProcessingAllowed()`

assetVersionId

NPM package version of either hydrogen or hydrogen-react. Defaults to hydrogen-react package version.

cartId

Shopify cart id in the form of `gid://shopify/Cart/<id>`.

ccpaEnforced

Result of `!customerPrivacyApi.saleOfDataAllowed()`

currency

Currency code.

customerId

Shopify customer id in the form of `gid://shopify/Customer/<id>`.

gdprEnforced

Result of `!(customerPrivacyApi.marketingAllowed() && customerPrivacy.analyticsProcessingAllowed())`

hasUserConsent

If we have consent from buyer for data collection

hydrogenSubchannelId

Alternative name for Shopify storefront id generated by Hydrogen sales channel. The value of env.PUBLIC_STOREFRONT_ID.

marketingAllowed

Result of `customerPrivacyApi.marketingAllowed()`

navigationApi

Navigation api: `'PerformanceNavigationTiming' | 'performance.navigation'`. Use `getClientBrowserParameters()` to collect this value.

navigationType

Navigation type: `'navigate' | 'reload' | 'back_forward' | 'prerender' | 'unknown'`. Use `getClientBrowserParameters()` to collect this value.

path

Value of `window.location.pathname`. Use `getClientBrowserParameters()` to collect this value.

products

Product list.

referrer

Value of `window.document.referrer`. Use `getClientBrowserParameters()` to collect this value.

saleOfDataAllowed

Result of `customerPrivacyApi.saleOfDataAllowed()`

search

Value of `window.location.search`. Use `getClientBrowserParameters()` to collect this value.

shopId

Shopify shop id in the form of `gid://shopify/Shop/<id>`.

shopifySalesChannel

Shopify sales channel.

storefrontId

Shopify storefront id generated by Hydrogen sales channel. The value of env.PUBLIC_STOREFRONT_ID.

title

Value of `document.title`. Use `getClientBrowserParameters()` to collect this value.

totalValue

Total value of products.

uniqueToken

Shopify unique user token: Value of `_shopify_y` cookie. Use `getClientBrowserParameters()` to collect this value.

url

Value of `window.location.href`. Use `getClientBrowserParameters()` to collect this value.

userAgent

Value of `navigator.userAgent`. Use `getClientBrowserParameters()` to collect this value.

visitToken

Shopify session token: Value of `_shopify_s` cookie. Use `getClientBrowserParameters()` to collect this value.

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

ADD_TO_CART

Add to cart

PAGE_VIEW

Page view

AnalyticsPageType

Analytics page type values accepted by Shopify analytics.

AnalyticsPageType

article

blog

captcha

cart

collection

customersAccount

customersActivateAccount

customersAddresses

customersLogin

customersOrder

customersRegister

customersResetPassword

forbidden

giftCard

home

listCollections

notFound

page

password

policy

product

search

ShopifySalesChannel

Analytics sales channel values accepted by Shopify analytics.

ShopifySalesChannel

headless

Shopify Headless sales channel

hydrogen

Shopify Hydrogen sales channel

Related

  • useShopifyCookies
  • getClientBrowserParameters