---
title: Interface: UseAnalytics
slug: chord-ui/interface-useanalytics
docTags: 
createdAt: 2023-11-06T15:03:31.906Z
---

[react-autonomy](docId\:zoZ6W56ubpPACr0PO0GLS).UseAnalytics

`UseAnalytics` contains the tracking functions returned by [useAnalytics](docId\:NEpfHdl3o3ELlGnk098CU).

## Properties

### chordAnalytics

• **chordAnalytics**: `AnalyticsClient`

This provides low level access to Chord's analytics client.

### Defined in

[packages/react-autonomy/src/hooks/use-analytics.ts:87](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-analytics.ts#L87)

***

### trackCartViewed

• **trackCartViewed**: (`options?`: [`TrackCartViewed`](docId:40DhmvaEMHOl06uCI6QOe)) => \{ `payload`: [`TrackCartViewed`](docId:40DhmvaEMHOl06uCI6QOe) = options; `type`: `string` = TRACK\_CART\_VIEWED }

### Type declaration

▸ (`options?`): `Object`

The `trackCartViewed` function sends a `Cart Viewed` event to
Segment. You should call this function when the cart page is
viewed.



```javascript
import { useAnalytics, useCart } from '@chordcommerce/react-autonomy'
import { useEffect } from 'react'

const CartPage = () => {
  const { cart, loadCart, isLoaded, isFetching } = useCart()
  const { trackCartViewed } = useAnalytics()

  useEffect(() => {
    if (!isLoaded && !isFetching) {
      loadCart().catch(error => console.error('could not loadCart', error))
    }
  }, [loadCart, isLoaded, isFetching])

  useEffect(() => {
    if (isLoaded) {
      trackCartViewed({
        products: cart?.lineItems ?? []
      })
    }
    // Only track isLoaded so that this only fires once.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isLoaded])

  // return cart page
}
```

### Parameters

| Name       | Type                                             |
| ---------- | ------------------------------------------------ |
| `options?` | [`TrackCartViewed`](docId:40DhmvaEMHOl06uCI6QOe) |

### Returns

`Object`

| Name      | Type                                             |
| --------- | ------------------------------------------------ |
| `payload` | [`TrackCartViewed`](docId:40DhmvaEMHOl06uCI6QOe) |
| `type`    | `string`                                         |

### Defined in

[packages/react-autonomy/src/hooks/use-analytics.ts:123](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-analytics.ts#L123)

***

### trackCollectionClicked

• **trackCollectionClicked**: (`options`: [`TrackCollectionClicked`](docId\:Et3GMg9iPChqKiM_PlmFm)) => \{ `payload`: [`TrackCollectionClicked`](docId\:Et3GMg9iPChqKiM_PlmFm) = options; `type`: `string` = TRACK\_COLLECTION\_CLICKED }

### Type declaration

▸ (`options`): `Object`

The `trackCollectionClicked` function fires a `Collection Clicked` event to
Segment. You should call this function when the user clicks on a link to
a collection.



```javascript
import { useAnalytics } from '@chordcommerce/react-autonomy'

const CollectionLink = ({ collection, children }) => {
  const { trackCollectionClicked } = useAnalytics()
  const url = `/shop/?collection=${slug}`

  return (
    <a href={url} onClick={() => trackCollectionClicked({ collection })}>
      {children}
    </a>
  )
}
```

### Parameters

| Name      | Type                                                     |
| --------- | -------------------------------------------------------- |
| `options` | [`TrackCollectionClicked`](docId\:Et3GMg9iPChqKiM_PlmFm) |

### Returns

`Object`

| Name      | Type                                                     |
| --------- | -------------------------------------------------------- |
| `payload` | [`TrackCollectionClicked`](docId\:Et3GMg9iPChqKiM_PlmFm) |
| `type`    | `string`                                                 |

### Defined in

[packages/react-autonomy/src/hooks/use-analytics.ts:146](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-analytics.ts#L146)

***

### trackEmailCaptured

• **trackEmailCaptured**: (`options`: [`TrackEmailCaptured`](docId\:T0BHcyKWAU9ZTsABnjwPA)) => \{ `payload`: [`TrackEmailCaptured`](docId\:T0BHcyKWAU9ZTsABnjwPA) = options; `type`: `string` = TRACK\_EMAIL\_CAPTURED }

### Type declaration

▸ (`options`): `Object`

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](https://segment.com/docs/connections/spec/identify/)
to Segment so that all subsequent tracking calls will be associated with this
email.



```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,
      component: 'footer',
      page: 'Sitewide',
      website: window.location.host,
    }

    trackEmailCaptured(payload)
  }, [trackEmailCaptured])

  return (
    <form onSubmit={handleSubmit}>
      <p>Sign up for our newsletter!</p>
      <input type="email" name="email" placeholder="Your Email" required />
      <button type="submit">Sign Up</button>
    </form>
  )
}
```

### Parameters

| Name      | Type                                                 |
| --------- | ---------------------------------------------------- |
| `options` | [`TrackEmailCaptured`](docId\:T0BHcyKWAU9ZTsABnjwPA) |

### Returns

`Object`

| Name      | Type                                                 |
| --------- | ---------------------------------------------------- |
| `payload` | [`TrackEmailCaptured`](docId\:T0BHcyKWAU9ZTsABnjwPA) |
| `type`    | `string`                                             |

### Defined in

[packages/react-autonomy/src/hooks/use-analytics.ts:185](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-analytics.ts#L185)

***

### trackProductClicked

• **trackProductClicked**: (`options`: [`TrackProductClicked`](docId\:PqV9urqhjPvhy60KRDch0)) => \{ `payload`: [`TrackProductClicked`](docId\:PqV9urqhjPvhy60KRDch0) = options; `type`: `string` = TRACK\_PRODUCT\_CLICKED }

### Type declaration

▸ (`options`): `Object`

The `trackProductClicked` function sends a `Product Clicked` event to
Segment. You should call this function when the user clicks on a link to
a product.



```javascript
import { useAnalytics } from '@chordcommerce/react-autonomy'

const ProductLink = ({ children, product }) => {
  const { trackProductClicked } = useAnalytics()
  const url = `/products/${slug}/`

  return (
    <a href={url} onClick={() => trackProductClicked({ product })}>
      {children}
    </a>
  )
}
```

### Parameters

| Name      | Type                                                  |
| --------- | ----------------------------------------------------- |
| `options` | [`TrackProductClicked`](docId\:PqV9urqhjPvhy60KRDch0) |

### Returns

`Object`

| Name      | Type                                                  |
| --------- | ----------------------------------------------------- |
| `payload` | [`TrackProductClicked`](docId\:PqV9urqhjPvhy60KRDch0) |
| `type`    | `string`                                              |

### Defined in

[packages/react-autonomy/src/hooks/use-analytics.ts:229](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-analytics.ts#L229)

***

### trackProductViewed

• **trackProductViewed**: (`options`: [`TrackProductViewed`](docId\:Awh6K6bKjHs0ET5Zi1mlT)) => \{ `payload`: [`TrackProductViewed`](docId\:Awh6K6bKjHs0ET5Zi1mlT) = options; `type`: `string` = TRACK\_PRODUCT\_VIEWED }

### Type declaration

▸ (`options`): `Object`

The `trackProductViewed` function fires a `Product Viewed` event to Segment.
You should call this function when a product page is opened.



```javascript
import { useAnalytics } from '@chordcommerce/gatsby-theme-autonomy'

export default (product) => {
  const { trackProductViewed } = useAnalytics()

  useEffect(() => {
    trackProductViewed({ product })
  }, [product])

  // return product page
}
```

### Parameters

| Name      | Type                                                 |
| --------- | ---------------------------------------------------- |
| `options` | [`TrackProductViewed`](docId\:Awh6K6bKjHs0ET5Zi1mlT) |

### Returns

`Object`

| Name      | Type                                                 |
| --------- | ---------------------------------------------------- |
| `payload` | [`TrackProductViewed`](docId\:Awh6K6bKjHs0ET5Zi1mlT) |
| `type`    | `string`                                             |

### Defined in

[packages/react-autonomy/src/hooks/use-analytics.ts:206](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-analytics.ts#L206)

***

### trackVariantClicked

• **trackVariantClicked**: (`options`: [`TrackVariantClicked`](docId:1ey3N9CgAvjdqJ26h3sGu)) => \{ `payload`: [`TrackVariantClicked`](docId:1ey3N9CgAvjdqJ26h3sGu) = options; `type`: `string` = TRACK\_VARIANT\_CLICKED }

### Type declaration

▸ (`options`): `Object`

The `trackVariantClicked` function sends a `Variant Clicked` event to
Segment. You should call this function when the user clicks on a link to

This function takes a product and not a variant.



```javascript
import { useAnalytics } from '@chordcommerce/react-autonomy'

const ProductLink = ({ children, product }) => {
  const { trackVariantClicked } = useAnalytics()
  const url = `/products/${slug}/`

  return (
    <a href={url} onClick={() => trackVariantClicked({ product })}>
      {children}
    </a>
  )
}
```

### Parameters

| Name      | Type                                                 |
| --------- | ---------------------------------------------------- |
| `options` | [`TrackVariantClicked`](docId:1ey3N9CgAvjdqJ26h3sGu) |

### Returns

`Object`

| Name      | Type                                                 |
| --------- | ---------------------------------------------------- |
| `payload` | [`TrackVariantClicked`](docId:1ey3N9CgAvjdqJ26h3sGu) |
| `type`    | `string`                                             |

### Defined in

[packages/react-autonomy/src/hooks/use-analytics.ts:253](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-analytics.ts#L253)