Interfaces
Interface: UseAnalytics

﻿react-autonomy﻿.UseAnalytics
UseAnalytics contains the tracking functions returned by useAnalytics﻿.
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?: TrackCartViewed﻿) => { payload: TrackCartViewed﻿ = 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.
﻿
JS
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
}
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﻿﻿
Returns
Object
Name
Type
payload
﻿TrackCartViewed﻿﻿
type
string
Defined in
﻿packages/react-autonomy/src/hooks/use-analytics.ts:123﻿
﻿
trackCollectionClicked
• trackCollectionClicked: (options: TrackCollectionClicked﻿) => { payload: TrackCollectionClicked﻿ = 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.
﻿
JS
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>
  )
}
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﻿﻿
Returns
Object
Name
Type
payload
﻿TrackCollectionClicked﻿﻿
type
string
Defined in
﻿packages/react-autonomy/src/hooks/use-analytics.ts:146﻿
﻿
trackEmailCaptured
• trackEmailCaptured: (options: TrackEmailCaptured﻿) => { payload: TrackEmailCaptured﻿ = 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.
﻿
JS
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>
  )
}
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﻿﻿
Returns
Object
Name
Type
payload
﻿TrackEmailCaptured﻿﻿
type
string
Defined in
﻿packages/react-autonomy/src/hooks/use-analytics.ts:185﻿
﻿
trackProductClicked
• trackProductClicked: (options: TrackProductClicked﻿) => { payload: TrackProductClicked﻿ = 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.
﻿
JS
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>
  )
}
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﻿﻿
Returns
Object
Name
Type
payload
﻿TrackProductClicked﻿﻿
type
string
Defined in
﻿packages/react-autonomy/src/hooks/use-analytics.ts:229﻿
﻿
trackProductViewed
• trackProductViewed: (options: TrackProductViewed﻿) => { payload: TrackProductViewed﻿ = 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.
﻿
JS
import { useAnalytics } from '@chordcommerce/gatsby-theme-autonomy'

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

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

  // return product page
}
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﻿﻿
Returns
Object
Name
Type
payload
﻿TrackProductViewed﻿﻿
type
string
Defined in
﻿packages/react-autonomy/src/hooks/use-analytics.ts:206﻿
﻿
trackVariantClicked
• trackVariantClicked: (options: TrackVariantClicked﻿) => { payload: TrackVariantClicked﻿ = 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.
﻿
JS
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>
  )
}
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﻿﻿
Returns
Object
Name
Type
payload
﻿TrackVariantClicked﻿﻿
type
string
Defined in
﻿packages/react-autonomy/src/hooks/use-analytics.ts:253﻿
Name	Type
options?	TrackCartViewed
Name	Type
payload	TrackCartViewed
type	string
Name	Type
options	TrackCollectionClicked
Name	Type
payload	TrackCollectionClicked
type	string
Name	Type
options	TrackEmailCaptured
Name	Type
payload	TrackEmailCaptured
type	string
Name	Type
options	TrackProductClicked
Name	Type
payload	TrackProductClicked
type	string
Name	Type
options	TrackProductViewed
Name	Type
payload	TrackProductViewed
type	string
Name	Type
options	TrackVariantClicked
Name	Type
payload	TrackVariantClicked
type	string
Updated 25 Mar 2024
Interface: TrackVariantClicked
Interface: UseAuth<AuthClientType>