# 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
Use `AnalyticsEventName.PAGE_VIEW` constant.
### payload

### ShopifyPageViewPayload

### canonicalUrl
Canonical url.
### pageType
Shopify page type.
### resourceId
Shopify resource id in the form of `gid://shopify/<type>/<id>`.
### 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/<id>`.
### 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/<id>`.
### 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.location.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.
### ShopifySalesChannel

### hydrogen
Shopify Hydrogen sales channel
### headless
Shopify Headless sales channel
### ShopifyAnalyticsProduct

### productGid
Product id in the form of `gid://shopify/Product/<id>`.
### variantGid
Variant id in the form of `gid://shopify/ProductVariant/<id>`.
### 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/<id>`.
### hasUserConsent
If we have consent from buyer for data collection
### shopId
Shopify shop id in the form of `gid://shopify/Shop/<id>`.
### 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/<id>`.
### 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.location.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-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
Page view
### 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

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