Interface: UseAnalytics

react-autonomyreact-autonomy.UseAnalytics

UseAnalytics contains the tracking functions returned by useAnalyticsuseAnalytics.

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

trackCartViewed

• trackCartViewed: (options?: TrackCartViewedTrackCartViewed) => { payload: TrackCartViewedTrackCartViewed = 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.

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?	TrackCartViewedTrackCartViewed

Returns

Object

Name	Type
payload	TrackCartViewedTrackCartViewed
type	string

Defined in

packages/react-autonomy/src/hooks/use-analytics.ts:123

trackCollectionClicked

• trackCollectionClicked: (options: TrackCollectionClickedTrackCollectionClicked) => { payload: TrackCollectionClickedTrackCollectionClicked = 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.

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	TrackCollectionClickedTrackCollectionClicked

Returns

Object

Name	Type
payload	TrackCollectionClickedTrackCollectionClicked
type	string

Defined in

packages/react-autonomy/src/hooks/use-analytics.ts:146

trackEmailCaptured

• trackEmailCaptured: (options: TrackEmailCapturedTrackEmailCaptured) => { payload: TrackEmailCapturedTrackEmailCaptured = 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 to Segment so that all subsequent tracking calls will be associated with this email.

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	TrackEmailCapturedTrackEmailCaptured

Returns

Object

Name	Type
payload	TrackEmailCapturedTrackEmailCaptured
type	string

Defined in

packages/react-autonomy/src/hooks/use-analytics.ts:185

trackProductClicked

• trackProductClicked: (options: TrackProductClickedTrackProductClicked) => { payload: TrackProductClickedTrackProductClicked = 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.

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	TrackProductClickedTrackProductClicked

Returns

Object

Name	Type
payload	TrackProductClickedTrackProductClicked
type	string

Defined in

packages/react-autonomy/src/hooks/use-analytics.ts:229

trackProductViewed

• trackProductViewed: (options: TrackProductViewedTrackProductViewed) => { payload: TrackProductViewedTrackProductViewed = 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.

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

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

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

  // return product page
}

Parameters

Name	Type
options	TrackProductViewedTrackProductViewed

Returns

Object

Name	Type
payload	TrackProductViewedTrackProductViewed
type	string

Defined in

packages/react-autonomy/src/hooks/use-analytics.ts:206

trackVariantClicked

• trackVariantClicked: (options: TrackVariantClickedTrackVariantClicked) => { payload: TrackVariantClickedTrackVariantClicked = 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.

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	TrackVariantClickedTrackVariantClicked

Returns

Object

Name	Type
payload	TrackVariantClickedTrackVariantClicked
type	string

Defined in

packages/react-autonomy/src/hooks/use-analytics.ts:253