useAnalytics

10 min

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

useAnalytics

import { useAnalytics } from '~/hooks/actions'

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

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:

trackCartViewed

import { useAnalytics } from '~/hooks/actions'

const { trackCartViewed } = useAnalytics()
trackCartViewed()

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:

trackCollectionClicked

import { useAnalytics } from '~/hooks/actions'

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

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:

trackEmailCaptured

import { useAnalytics } from '~/hooks/actions'

const { trackEmailCaptured } = useAnalytics()
trackEmailCaptured({ 
    email: '[email protected]', 
    placement: {
        component: 'footer',
        page: '/shop'
    }
})

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:

trackProductClicked

import { useAnalytics } from '~/hooks/actions'

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

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:

trackProductViewed

import { useAnalytics } from '~/hooks/actions'

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