Adding Tracking

14 min

chord sends events to segment from the oms and javascript sdks you need to install segment's tracking library and add some sdk functions to your website to get events flowing adding tracking /#install segment library adding tracking /#implement ui events adding tracking /#verify in segment install segment library chord's javascript sdks require installing segment's analytics js tracking library on your website first, you'll need your source write key the write key determines which source your events will be sent to in segment to locate your write key, navigate to your front end website source in segment and select settings > api keys typically you'll have different front end website sources for development, staging, and production, so make sure you're selecting the correct source never send data to your production source except for your production website next, install analytics js via one of the following methods install with the segment snippet copy and paste the segment snippet into the \<head> tag of your site this snippet loads and initializes segment asynchronously you'll need to replace your write key in the snippet with the write key for your segment front end website source install @segment/snippet from npm instructions for installing from npm are available in the github repo segment's other npm package, analytics next , is not supported by either chord's sdks or segment's consent manager chord's sdks use segment's typewriter client to send events to segment, and typewriter is not currently compatible https //github com/segmentio/typewriter/issues/259 with analytics next follow a framework specific guide several javascript frameworks have examples or plugins to make this installation easier next js official example https //github com/vercel/next js/tree/canary/examples/with segment analytics gatsby community plugin https //github com/benjaminhoffman/gatsby plugin segment js implement ui events chord's javascript sdks automatically send some tracking events from your website to segment for example, you might see this code in a button import { usecart } from '@chordcommerce/react autonomy' export default () => { const { cart, addtocart } = usecart() const onclick = ({ sku, quantity }) => { addtocart({ sku, quantity }) } } the addtocart function makes a request to the chord api to update the customer's cart, updates the cart object with the new cart contents, and then sends a product added event to segment with information about the product that was added some sdk functions exist just to send tracking events to segment for ui interactions these functions are available via the useanalytics hook and are always prefixed with track add these functions to your ui components to track customer interactions for example, to track when a customer views the shopping cart, you might add this code to your cart component import { useanalytics } from '@chordcommerce/react autonomy' export default () => { const { trackcartviewed } = useanalytics() useeffect(() => { trackcartviewed() }, \[]) } if you don't add trackcartviewed to your ui component, this tracking event will not be sent to segment we recommend reviewing the useanalytics sdk reference and adding all applicable functions to your website code list of supported tracking events the table below lists all tracking events that are supported by @chordcommerce/react autonomy , and the sdk method that results in the tracking event being sent where possible, the sdk sends events automatically as part of standard ecommerce interactions like adding something to the cart (e g , usecart() addtocart ) tracking event @chordcommerce/react autonomy sdk method login started useauth() login signed in useauth() login signed out useauth() logout coupon entered usecart() addpromocode coupon applied usecart() addpromocode coupon denied usecart() addpromocode coupon removed usecart() removepromocode product clicked useanalytics() trackcartviewed collection clicked useanalytics() trackcollectionclicked product added usecart() addtocart product removed usecart() removefromcart stock request created usecart() createstockrequest email captured useanalytics() trackemailcaptured cart viewed useanalytics() trackcartviewed checkout started usecheckout() preparecheckout checkout completed usecheckout() finalizecheckout order completed usecheckout() finalizecheckout subscription added usecart() addsubscription prepaid subscription added usecart() addsubscription subscription cancelled usesubscription() cancelsubscription subscription skipped usesubscription() skipsubscription subscription resumed usesubscription() resumesubscription subscription paused usesubscription pausesubscription product viewed useanalytics() trackproductviewed variant clicked useanalytics() trackvariantclicked for more examples of instrumenting your ui components, review chord's website starter kits https //github com/chordcommerce/nextjs starter autonomy verify in segment after you've installed segment's analytics js library and added some sdk functions to your ui components, verify that segment is receiving tracking events in segment, navigate to your website front end source, and select the debugger tab this shows you a live feed of tracking events that segment is receiving interact with your website, and you should see new events appear in the debugger inspect the contents of an event by selecting it note that events have different types https //segment com/docs/connections/spec/ , including page , track , and identify segment post installation checklist complete this checklist to verify segment has been installed correctly on your website the correct source shows your events events from development and staging environments should not appear in your production source, and vice versa the back end source shows track events for example, you should see an order completed event when an order is completed you should see all events in the chord tracking plan docid\ w 5n055z3keefjj759v26 marked as sent by the oms the front end source shows track events for example, you should see a product added event when a product is added to your shopping cart, and a cart viewed event when you view the cart page you should see all events in the chord tracking plan docid\ w 5n055z3keefjj759v26 marked as sent by the sdk, unless they are ui events that you adding tracking /#implement ui events the front end source shows page events initial page load sends a page event clicking an internal link sends a page event the front end source shows identify events when a customer enters an email address for example, you should see an identify event when a customer fills out a newsletter sign up form troubleshooting i'm not seeing any events in the back end source the oms might be sending events to a different back end source than you're expecting log into your oms admin, and navigate to settings > stores in the environment variables section, look for segment write key the write key determines the source that events are sent to i'm not seeing any events in the front end source check that the write key in your website code is for the correct front end source next, try following segment's troubleshooting guide for analytics js https //segment com/docs/connections/sources/catalog/libraries/website/javascript/troubleshooting/ i only see a page event when the site first loads, not when i click around many frameworks like next js handle page transitions for internal links with javascript, which sometimes needs to be explicitly configured to generate a page event for example, here's how the chord next js starter https //github com/chordcommerce/nextjs starter autonomy/blob/main/src/components/pagetracker/index jsx handles it if you have any questions or need help, please reach out to us at help\@chord co

About Event Tracking

What is the Tracking Plan?