--- title: useAnalytics slug: oms/irCk-useanalytics docTags: createdAt: 2022-11-07T21:27:00.000Z --- :::hint{type="info"} **This page's documentation only applies to Chord's** [Next.js starter](https://github.com/chordcommerce/nextjs-starter-autonomy) **prior to the release of the **[React](docId\:EwXkRz0JhH0zPphIkkcrI)**. The Next.js starter now uses the React SDK and does not use the methods documented on this page. Check out the** [React SDK Reference](https://docs-beta.chord.co/chord-ui/module-react-autonomy) **for complete documentation, and the **[React SDK Migration Guide](docId\:qMilHJFPz9WbJYZbe50Ku)**for details on how to upgrade.** ::: The `useAnalytics` hook returns a set of functions that send a tracking event to Segment. The starter sends most Segment events about user actions automatically, when other hooks like `useCart` are used. However, some events need to be closely tied to the UI, like click tracking, and must be sent explicitly by React components. These events are available via the `useAnalytics` hook. ## Example ::::CodeDrawer{title="useAnalytics" isResponseExpanded="false" autoGeneratedAnchorSlug="useanalytics" legacyHash="DRihiANGkyxyY6W0DX7Fj"} :::CodeblockTabsExamples ```javascript import { useAnalytics } from '~/hooks/actions' import Link from '~/components/Generic/Link' const ProductLink = ({ children, slug }) => { const { trackClickProduct } = useAnalytics() const url = `/products/${slug}/` return ( trackClickProduct(slug)}> {children} ) } ``` ::: :::CodeblockTabsResponses ```javascript ``` ::: :::: ## Returns The `useAnalytics` hook returns an object with these properties: | Property | Description | | ------------------------- | ----------------------------------------------------------------- | | `trackClickCollection` | A function that sends a `Collection Clicked` event to Segment. | | `trackClickProduct` | A function that sends a `Product Clicked` event to Segment. | | `trackCreateStockRequest` | A function that sends a `Stock Request Created` event to Segment. | | `trackViewCart` | A function that sends a `Cart Viewed` event to Segment. | ## Functions ### trackClickCollection The `trackClickCollection` function fires a `Collection Clicked` event to Segment. You should call this function when the user clicks on a link to a collection. **Arguments: ** `trackClickCollection(title, slug, url)` | Argument | Type | Description | | -------- | ------ | ---------------------------------------------------- | | `title` | String | The title of the collection. | | `slug` | String | The slug of the collection. | | `url` | String | The URL of the collection landing page on your site. | **Returns:** `undefined` **Example:** ::::CodeDrawer{title="trackClickCollection" isResponseExpanded="false" autoGeneratedAnchorSlug="trackclickcollection-1" legacyHash="h8s54PqTlORI8ves8ZDs5"} :::CodeblockTabsExamples ```javascript import { useAnalytics } from '~/hooks/actions' import Link from '~/components/Generic/Link' const CollectionLink = ({ title, slug, children }) => { const { trackClickCollection } = useAnalytics() const url = `/shop/?collection=${slug}` return ( trackClickCollection(title, slug, url)}> {children} ) } ``` ::: :::CodeblockTabsResponses ```javascript ``` ::: :::: ### trackClickProduct The `trackClickProduct` function sends a `Product Clicked` event to Segment. You should call this function when the user clicks on a link to a product. **Arguments: ** `trackClickProduct(slug)` | Argument | Type | Description | | -------- | ------ | ------------------------ | | `slug` | String | The slug of the product. | **Returns:** `undefined` **Example:** ::::CodeDrawer{title="trackClickProduct" isResponseExpanded="false" autoGeneratedAnchorSlug="trackclickproduct-1" legacyHash="WOD4LAClLdb91MQda6otq"} :::CodeblockTabsExamples ```javascript import { useAnalytics } from '~/hooks/actions' import Link from '~/components/Generic/Link' const ProductLink = ({ children, slug }) => { const { trackClickProduct } = useAnalytics() const url = `/products/${slug}/` return ( trackClickProduct(slug)}> {children} ) } ``` ::: :::CodeblockTabsResponses ```javascript ``` ::: :::: ### trackCreateStockRequest The `trackCreateStockRequest` function sends a `Stock Request Created` event to Segment. :::hint{type="warning"} This function does not add the customer email address to a waitlist in the OMS. It only sends the event to Segment. The `useProduct().createStockRequest()` function adds the customer to a waitlist in the OMS and also sends a `Stock Request Created` event to Segment, so you should only use this function if you want to manage the product waitlist outside the OMS. ::: **Arguments:** | Argument | Type | Description | | -------- | ------ | ------------------------------------------------------------------------ | | `email` | String | The email address to sent an email to when the variant is back in stock. | | `sku` | String | The variant SKU. | **Returns:** `undefined` **Example:** ::::CodeDrawer{title="trackCreateStockRequest" isResponseExpanded="false" autoGeneratedAnchorSlug="trackcreatestockrequest-1" legacyHash="2D0KCkoeBQ7g6nGr2w09u"} :::CodeblockTabsExamples ```javascript import { useAnalytics } from '~/hooks/actions' const StockRequestForm = ({ sku }) => { const { trackCreateStockRequest } = useAnalytics() const onSubmit = ({ email, sku }) => { trackCreateStockRequest(email, sku) } // return sign up form } ``` ::: :::CodeblockTabsResponses ```javascript ``` ::: :::: ### trackEmailCaptured The `trackEmailCaptured` function sends a `Email Captured` event to Segment. You should call this whenever the user enters an email. Examples of this can include newsletter signups, coupon pop-ups and/or logins. This function will also [identify the user to Segment](https://segment.com/docs/connections/spec/identify/) so that all subsequent tracking calls will be associated with this email. **Arguments:** `trackEmailCaptured({ email, name, webPlacement })` | Argument | Type | | | -------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `email` | String | The email address that was captured. | | `name` | String \| undefined | The name of the user, if it is known. | | `webPlacement` | Object \| undefined | Data about where on the site the email was captured. The following properties on this are all optional:\* component - HTML component within the UX, such as header, footer, modal\* page - Page of the website (or Sitewide for whole website)\* website - Hostname of the website | **Returns**: `undefined` **Example:** ::::CodeDrawer{title="trackEmailCaptured" isResponseExpanded="false" autoGeneratedAnchorSlug="trackemailcaptured-1" legacyHash="mnO3Wm41CKjhPJM8IEtb2"} :::CodeblockTabsExamples ```javascript import { useAnalytics } from '~/hook/actions' const NewsletterForm = () => { const { trackEmailCaptured } = useAnalytics() const handleSubmit = useCallback((event) => { event.preventDefault() const payload = { email: event.currentTarget.elements['email'].value, name: event.currentTarget.elements['name']?.value, webPlacement: { component: 'footer', page: 'Sitewide', website: window.location.host, }, } trackEmailCaptured(payload) }, [trackEmailCaptured]) return (

Sign up for our newsletter!

) } ``` ::: :::CodeblockTabsResponses ```javascript ``` ::: :::: ### trackViewCart The `trackViewCart` function sends a `Cart Viewed` event to Segment. You should call this function when the cart page is viewed. **Arguments:** `trackViewCart()` None. **Returns: ** `undefined` **Example:** ::::CodeDrawer{title="trackViewCart" isResponseExpanded="true" autoGeneratedAnchorSlug="trackviewcart-1" legacyHash="z1hxF1yQthujOAyQyt0ih"} :::CodeblockTabsExamples ```javascript import { useAnalytics } from '~/hooks/actions' const CartPage = () => { const { trackViewCart } = useAnalytics() useEffect(trackViewCart, []) // return cart page } ``` ::: :::CodeblockTabsResponses ```javascript ``` ::: ::::