# sendShopifyAnalytics

Sends analytics to Shopify.
### Example code

```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 <Component {...pagePropsWithAppAnalytics} />;
}

```

```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 <Component {...pagePropsWithAppAnalytics} />;
}

```



## sendShopifyAnalytics
If `event.payload.hasUserConsent` is false, no analytics event will happen.

### SendShopifyAnalyticsGeneratedType


#### 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[] = [];

  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

value: `string`

Use `AnalyticsEventName.PAGE_VIEW` constant.

### payload

value: `ShopifyPageViewPayload`



### ShopifyPageViewPayload


### canonicalUrl

value: `string`

Canonical url.

### pageType

value: `string`

Shopify page type.

### resourceId

value: `string`

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

### collectionHandle

value: `string`

Shopify collection handle.

### searchString

value: `string`

Search term used on a search results page.

### hasUserConsent

value: `boolean`

If we have consent from buyer for data collection

### shopId

value: `string`

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

### currency

value: `CurrencyCode`

Currency code.

### storefrontId

value: `string`

Shopify storefront id generated by Hydrogen sales channel.

### acceptedLanguage

value: `LanguageCode`

Language displayed to buyer.

### shopifySalesChannel

value: `keyof ShopifySalesChannel`

Shopify sales channel.

### customerId

value: `string`

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

### totalValue

value: `number`

Total value of products.

### products

value: `ShopifyAnalyticsProduct[]`

Product list.

### uniqueToken

value: `string`

Shopify unique user token: Value of `_shopify_y` cookie.

Use `getClientBrowserParameters()` to collect this value.

### visitToken

value: `string`

Shopify session token: Value of `_shopify_s` cookie.

Use `getClientBrowserParameters()` to collect this value.

### url

value: `string`

Value of `window.location.href`.

Use `getClientBrowserParameters()` to collect this value.

### path

value: `string`

Value of `window.location.pathname`.

Use `getClientBrowserParameters()` to collect this value.

### search

value: `string`

Value of `window.location.search`.

Use `getClientBrowserParameters()` to collect this value.

### referrer

value: `string`

Value of `window.location.referrer`.

Use `getClientBrowserParameters()` to collect this value.

### title

value: `string`

Value of `document.title`.

Use `getClientBrowserParameters()` to collect this value.

### userAgent

value: `string`

Value of `navigator.userAgent`.

Use `getClientBrowserParameters()` to collect this value.

### navigationType

value: `string`

Navigation type: `'navigate' | 'reload' | 'back_forward' | 'prerender' | 'unknown'`.

Use `getClientBrowserParameters()` to collect this value.

### navigationApi

value: `string`

Navigation api: `'PerformanceNavigationTiming' | 'performance.navigation'`.

Use `getClientBrowserParameters()` to collect this value.

### ShopifySalesChannel


### hydrogen

value: `"hydrogen"`

Shopify Hydrogen sales channel

### headless

value: `"headless"`

Shopify Headless sales channel

### ShopifyAnalyticsProduct


### productGid

value: `string`

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

### variantGid

value: `string`

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

### name

value: `string`

Product name.

### variantName

value: `string`

Variant name.

### brand

value: `string`

Product brand or vendor.

### category

value: `string`

Product category or type.

### price

value: `string`

Product price.

### sku

value: `string`

Product sku.

### quantity

value: `number`

Quantity of the product in this event.

### ShopifyAddToCart


### eventName

value: `string`

Use `AnalyticsEventName.ADD_TO_CART` constant.

### payload

value: `ShopifyAddToCartPayload`



### ShopifyAddToCartPayload


### cartId

value: `string`

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

### hasUserConsent

value: `boolean`

If we have consent from buyer for data collection

### shopId

value: `string`

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

### currency

value: `CurrencyCode`

Currency code.

### storefrontId

value: `string`

Shopify storefront id generated by Hydrogen sales channel.

### acceptedLanguage

value: `LanguageCode`

Language displayed to buyer.

### shopifySalesChannel

value: `keyof ShopifySalesChannel`

Shopify sales channel.

### customerId

value: `string`

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

### totalValue

value: `number`

Total value of products.

### products

value: `ShopifyAnalyticsProduct[]`

Product list.

### uniqueToken

value: `string`

Shopify unique user token: Value of `_shopify_y` cookie.

Use `getClientBrowserParameters()` to collect this value.

### visitToken

value: `string`

Shopify session token: Value of `_shopify_s` cookie.

Use `getClientBrowserParameters()` to collect this value.

### url

value: `string`

Value of `window.location.href`.

Use `getClientBrowserParameters()` to collect this value.

### path

value: `string`

Value of `window.location.pathname`.

Use `getClientBrowserParameters()` to collect this value.

### search

value: `string`

Value of `window.location.search`.

Use `getClientBrowserParameters()` to collect this value.

### referrer

value: `string`

Value of `window.location.referrer`.

Use `getClientBrowserParameters()` to collect this value.

### title

value: `string`

Value of `document.title`.

Use `getClientBrowserParameters()` to collect this value.

### userAgent

value: `string`

Value of `navigator.userAgent`.

Use `getClientBrowserParameters()` to collect this value.

### navigationType

value: `string`

Navigation type: `'navigate' | 'reload' | 'back_forward' | 'prerender' | 'unknown'`.

Use `getClientBrowserParameters()` to collect this value.

### navigationApi

value: `string`

Navigation api: `'PerformanceNavigationTiming' | 'performance.navigation'`.

Use `getClientBrowserParameters()` to collect this value.

## Related
- [useShopifyCookies](/api/hydrogen-react/hooks/useShopifyCookies)
- [getClientBrowserParameters](/api/hydrogen-react/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

value: `"PAGE_VIEW"`

Page view

### ADD_TO_CART

value: `"ADD_TO_CART"`

Add to cart

## Related
- [useShopifyCookies](/api/hydrogen-react/hooks/useShopifyCookies)
- [getClientBrowserParameters](/api/hydrogen-react/utilities/getclientbrowserparameters)

## AnalyticsPageType
Analytics page type values accepted by Shopify analytics.

### AnalyticsPageType


### article

value: `"article"`



### blog

value: `"blog"`



### captcha

value: `"captcha"`



### cart

value: `"cart"`



### collection

value: `"collection"`



### customersAccount

value: `"customers/account"`



### customersActivateAccount

value: `"customers/activate_account"`



### customersAddresses

value: `"customers/addresses"`



### customersLogin

value: `"customers/login"`



### customersOrder

value: `"customers/order"`



### customersRegister

value: `"customers/register"`



### customersResetPassword

value: `"customers/reset_password"`



### giftCard

value: `"gift_card"`



### home

value: `"index"`



### listCollections

value: `"list-collections"`



### forbidden

value: `"403"`



### notFound

value: `"404"`



### page

value: `"page"`



### password

value: `"password"`



### product

value: `"product"`



### policy

value: `"policy"`



### search

value: `"search"`



## Related
- [useShopifyCookies](/api/hydrogen-react/hooks/useShopifyCookies)
- [getClientBrowserParameters](/api/hydrogen-react/utilities/getclientbrowserparameters)

## ShopifySalesChannel
Analytics sales channel values accepted by Shopify analytics.

### ShopifySalesChannel


### hydrogen

value: `"hydrogen"`

Shopify Hydrogen sales channel

### headless

value: `"headless"`

Shopify Headless sales channel

## Related
- [useShopifyCookies](/api/hydrogen-react/hooks/useShopifyCookies)
- [getClientBrowserParameters](/api/hydrogen-react/utilities/getclientbrowserparameters)