Chord Commerce Event Tracking
Getting Started
Installing Chord Analytics
10 min
to install chord analytics on a shopify store, please start here using with shopify the @chordcommerce/analytics library provides simple methods for sending tracking events to chord from your website, with an optional debugging mode to validate event properties requirements the chord team will provide some of the configuration option values (see below) installation to install @chordcommerce/analytics , run the following command in your project directory npm install @chordcommerce/analytics\@v1 12 0 \# or yarn add @chordcommerce/analytics\@v1 12 0 usage initialize @chordcommerce/analytics as follows import { chordanalytics } from '@chordcommerce/analytics' const chord = new chordanalytics(options) // see below for configuration options chord trackcartviewed({ cart }) // sends a "cart viewed" event to the cdp once loaded, window\ chord will contain the chordanalytics instance in the browser using segment & chord cdp in parallel initialize both @chordcommerce/analytics and @segment/analytics next for testing purposes import { chordanalytics } from '@chordcommerce/analytics' import { analyticsbrowser } from '@segment/analytics next' // "cdp = window\ analytics" or "cdp = () => window\ analytics" const cdp = analyticsbrowser load({ writekey process env segment write key, }) const chord = new chordanalytics({ cdp, // optional remove to disable and only send to chordcdp cdpdomain process env chord cdp domain, cdpwritekey process env chord cdp write key, formatters { }, metadata { }, }) chord page() chord trackproductadded({ }) configuration @chordcommerce/analytics can be initialized with the following options true false 147false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type if cdp , cdpdomain and cdpwritekey are all omitted, no tracking events are sent metadata true falsefalse left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type formatters formatters are javascript functions that are used to construct tracking event properties there are two types of formatters, objects and events you must define object formatters event formatters are optional see chordโs documentation https //docs chord co/analytics getting started#fgwx7 for more details and example formatters object formatters a formatter must be provided for each of the four core data types that are used in chord events this formatter function transforms input data into the type chord expects see formatters docid\ qqjjglkiarnul56wnjzof for more details on object formatters true falsefalse left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type event formatters a formatter can be provided for each event this formatter is used to transform the event properties of a specific event after chord constructs the event, just before it's sent to the cdp see formatters docid\ qqjjglkiarnul56wnjzof for more details on event formatters using with typescript optionally, you can instantiate chordanalytics with a custom type argument describing your data to improve type safety for formatters and sdk functions for instance, if you're working with objects like cart , product , etc , from a shopify storefront api query, you might already have types like storefrontcart defined for the response instantiate chordanalytics with a type argument interface objecttypes { cart storefrontcart checkout storefrontcart lineitem storefrontlineitem product storefrontproduct } const chord = new chordanalytics\<objecttypes>({ options }) now, when you use an sdk method like chord trackcartviewed({ cart }) , cart has the storefrontcart type formatter types also support an optional generic type parameter for the function argument import type { cartformatter } from '@chordcommerce/analytics' export const cartformatter cartformatter\<storefrontcart> = (props) => { const { cart } = props // `cart` has type `storefrontcart` return { } } api reference see chordโs documentation for a full api reference support for support with setup and configuration, please contact chord directly at help\@chord co