---
title: useAnalytics
slug: oms/useanalytics
docTags: 
createdAt: 2022-11-08T14:20:24.000Z
---

The `useAnalytics` hook returns a set of functions that send a tracking event to Chord CDP.

The starter sends most Chord CDP 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. Functions for sending these events are available via the `useAnalytics` hook.

## Example 

::::CodeDrawer{title="useAnalytics" isResponseExpanded="false" autoGeneratedAnchorSlug="useanalytics" legacyHash="muHM9Gc1pw3NTgVRrMcTU"}
:::CodeblockTabsExamples
```javascript
import { useAnalytics } from '~/hooks/actions'

const {
  trackCartViewed,
  trackCollectionClicked,
  trackEmailCaptured,
  trackProductClicked,
  trackProductViewed
} = useAnalytics()
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::

## Returns

The `useAnalytics` hook returns an object with these properties:

| Property                 | Description                                                      |
| ------------------------ | ---------------------------------------------------------------- |
| `trackCartViewed`        | A function that sends a `Cart Viewed` event to Chord CDP.        |
| `trackCollectionClicked` | A function that sends a `Collection Clicked` event to Chord CDP. |
| `trackEmailCaptured`     | A function that sends an `Email Captured` event to Chord CDP.    |
| `trackProductClicked`    | A function that sends a `Product Clicked` event to Chord CDP.    |
| `trackProductViewed`     | A function that sends a `Product Viewed` event to Chord CDP.     |

## Functions 

### trackCartViewed

The `trackCartViewed` function sends a `Cart Viewed` event to Chord CDP.

**Arguments: **

None.

**Returns:**

 `undefined`  

**Example:**

::::CodeDrawer{title="trackCartViewed" isResponseExpanded="false" autoGeneratedAnchorSlug="trackcartviewed-1" legacyHash="GQDI3hWpyWZuMlwxhPAgt"}
:::CodeblockTabsExamples
```javascript
import { useAnalytics } from '~/hooks/actions'

const { trackCartViewed } = useAnalytics()
trackCartViewed()
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::

### trackCollectionClicked

The `trackCollectionClicked` function sends a `Collection Clicked` event to Chord CDP. 

**Arguments: **

`trackCollectionClicked({ id, description, imageUrl, slug, title })`

| Argument               | Type   | Description                                    |
| ---------------------- | ------ | ---------------------------------------------- |
| `options.id`           | String | ID of the collection.                          |
| `options.description?` | String | (Optional) Description of the collection.      |
| `options.imageUrl?`    | String | (Optional) URL of an image for the collection. |
| `options.slug?`        | String | (Optional) Slug of the collection.             |
| `options.title?`       | String | (Optional) Title of the collection.            |

**Returns:**

 `undefined`  

**Example:**

::::CodeDrawer{title="trackCollectionClicked" isResponseExpanded="false" autoGeneratedAnchorSlug="trackcollectionclicked-1" legacyHash="1GxLh09I-loC5hOXVxicv"}
:::CodeblockTabsExamples
```javascript
import { useAnalytics } from '~/hooks/actions'

const { trackCollectionClicked } = useAnalytics()
trackCollectionClicked({ id: 'red-collection', title: 'Red' })
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::

### trackEmailCaptured

The `trackEmailCaptured` function sends an `Email Captured` event to Chord CDP. 

**Arguments: **

`trackEmailCaptured({ email, placement })`

| Argument                        | Type   | Description                                               |
| ------------------------------- | ------ | --------------------------------------------------------- |
| `options.email`                 | String | Email that was captured                                   |
| `options.placement?.component?` | String | (Optional) Page component/module that captured the email. |
| `options.placement?.page?`      | String | (Optional) Page that captured the email.                  |

**Returns:**

 `undefined`  

**Example:**

::::CodeDrawer{title="trackEmailCaptured" isResponseExpanded="false" autoGeneratedAnchorSlug="trackemailcaptured-1" legacyHash="T1Ped5jiUyryN5KtxXxlC"}
:::CodeblockTabsExamples
```javascript
import { useAnalytics } from '~/hooks/actions'

const { trackEmailCaptured } = useAnalytics()
trackEmailCaptured({ 
    email: 'test@test.com', 
    placement: {
        component: 'footer',
        page: '/shop'
    }
})
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::

### trackProductClicked

The `trackProductClicked` function sends a `Product Clicked` event to Chord CDP. 

**Arguments: **

`trackProductClicked({ productHandle })`

| Argument                | Type   | Description                            |
| ----------------------- | ------ | -------------------------------------- |
| `options.productHandle` | String | Shopify product handle of the product. |

**Returns:**

 `undefined`  

**Example:**

::::CodeDrawer{title="trackProductClicked" isResponseExpanded="false" autoGeneratedAnchorSlug="trackproductclicked-1" legacyHash="pt1p59g3nrnWamAUfOANw"}
:::CodeblockTabsExamples
```javascript
import { useAnalytics } from '~/hooks/actions'

const { productClicked } = useAnalytics()
trackProductClicked({ productHandle: 'product-1' })
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::

### trackProductViewed

The `trackProductViewed` function sends a `Product Viewed` event to Chord CDP. 

**Arguments: **

`trackProductViewed({ productHandle })`

| Argument                | Type   | Description                            |
| ----------------------- | ------ | -------------------------------------- |
| `options.productHandle` | String | Shopify product handle of the product. |

**Returns:**

 `undefined`  

**Example:**

::::CodeDrawer{title="trackProductViewed" isResponseExpanded="false" autoGeneratedAnchorSlug="trackproductviewed-1" legacyHash="8IvFchRL1T8_CbWNOHjQ1"}
:::CodeblockTabsExamples
```javascript
import { useAnalytics } from '~/hooks/actions'

const { trackProductViewed } = useAnalytics()
trackProductViewed({ productHandle: 'product-1' })
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::