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 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 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 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 import { useanalytics } from ' /hooks/actions' const { trackemailcaptured } = useanalytics() trackemailcaptured({ email 'test\@test com', 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 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 import { useanalytics } from ' /hooks/actions' const { trackproductviewed } = useanalytics() trackproductviewed({ producthandle 'product 1' })