useAnalytics

this page's documentation only applies to chord's next js starter prior to the release of the react docid\ ewxkrz0jhh0zpphikkcri 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 guide docid\ qmilhjfpz9wbjyzbe50ku for 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 example import { useanalytics } from ' /hooks/actions' import link from ' /components/generic/link' const productlink = ({ children, slug }) => { const { trackclickproduct } = useanalytics() const url = `/products/${slug}/` return ( \<link href={url} onclick={() => trackclickproduct(slug)}> {children} \</link> ) } returns 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 functions trackclickcollection 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 import { useanalytics } from ' /hooks/actions' import link from ' /components/generic/link' const collectionlink = ({ title, slug, children }) => { const { trackclickcollection } = useanalytics() const url = `/shop/?collection=${slug}` return ( \<link href={url} onclick={() => trackclickcollection(title, slug, url)}> {children} \</link> ) } trackclickproduct 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 import { useanalytics } from ' /hooks/actions' import link from ' /components/generic/link' const productlink = ({ children, slug }) => { const { trackclickproduct } = useanalytics() const url = `/products/${slug}/` return ( \<link href={url} onclick={() => trackclickproduct(slug)}> {children} \</link> ) } trackcreatestockrequest 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 email string the email address to sent an email to when the variant is back in stock sku string the variant sku returns undefined example import { useanalytics } from ' /hooks/actions' const stockrequestform = ({ sku }) => { const { trackcreatestockrequest } = useanalytics() const onsubmit = ({ email, sku }) => { trackcreatestockrequest(email, sku) } // return sign up form } trackemailcaptured 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 email 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 import { useanalytics } from ' /hook/actions' const newsletterform = () => { const { trackemailcaptured } = useanalytics() const handlesubmit = usecallback((event) => { event preventdefault() const payload = { email event currenttarget elements\['email'] value, name event currenttarget elements\['name']? value, webplacement { 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> ) } trackviewcart 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 import { useanalytics } from ' /hooks/actions' const cartpage = () => { const { trackviewcart } = useanalytics() useeffect(trackviewcart, \[]) // return cart page }