useAnalytics
This page's documentation only applies to Chord's Next.js starter prior to the release of the React. The Next.js starter now uses the React SDK and does not use the methods documented on this page. Check out the React SDK Reference for complete documentation, and the React SDK Migration Guidefor details on how to upgrade.
The useAnalytics hook returns a set of functions that send a tracking event to Segment.
The starter sends most Segment 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. These events are available via the useAnalytics hook.
The useAnalytics hook returns an object with these properties:
Property | Description |
|---|---|
trackClickCollection | A function that sends a Collection Clicked event to Segment. |
trackClickProduct | A function that sends a Product Clicked event to Segment. |
trackCreateStockRequest | A function that sends a Stock Request Created event to Segment. |
trackViewCart | A function that sends a Cart Viewed event to Segment. |
The trackClickCollection function fires a Collection Clicked event to Segment. You should call this function when the user clicks on a link to a collection.
Arguments:
trackClickCollection(title, slug, url)
Argument | Type | Description |
|---|---|---|
title | String | The title of the collection. |
slug | String | The slug of the collection. |
url | String | The URL of the collection landing page on your site. |
Returns:
undefined
Example:
The trackClickProduct function sends a Product Clicked event to Segment. You should call this function when the user clicks on a link to a product.
Arguments:
trackClickProduct(slug)
Argument | Type | Description |
|---|---|---|
slug | String | The slug of the product. |
Returns:
undefined
Example:
The trackCreateStockRequest function sends a Stock Request Created event to Segment.
This function does not add the customer email address to a waitlist in the OMS. It only sends the event to Segment. The useProduct().createStockRequest() function adds the customer to a waitlist in the OMS and also sends a Stock Request Created event to Segment, so you should only use this function if you want to manage the product waitlist outside the OMS.
Arguments:
Argument | Type | Description |
|---|---|---|
String | The email address to sent an email to when the variant is back in stock. | |
sku | String | The variant SKU. |
Returns:
undefined
Example:
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.
Arguments:
trackEmailCaptured({ email, name, webPlacement })
Argument | Type | |
|---|---|---|
String | The email address that was captured. | |
name | String | undefined | The name of the user, if it is known. |
webPlacement | Object | undefined | Data about where on the site the email was captured. The following properties on this are all optional:* component - HTML component within the UX, such as header, footer, modal* page - Page of the website (or Sitewide for whole website)* website - Hostname of the website |
Returns:
undefined
Example:
The trackViewCart function sends a Cart Viewed event to Segment. You should call this function when the cart page is viewed.
Arguments:
trackViewCart()
None.
Returns:
undefined
Example: