Installing in a Shopify Theme
requirements chord's shopify theme analytics library assumes that a cdp javascript library is already installed on the site segment's analytics js https //segment com/docs/connections/sources/catalog/libraries/website/javascript/ library is currently the only supported option you can install segment's analytics js https //segment com/docs/connections/sources/catalog/libraries/website/javascript/ by pasting segment's code snippet https //segment com/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step 2b add the segment snippet into the \<head> tag of your theme it should be added to every page of the site, so you'll likely choose to include it in layout/theme liquid and layout/checkout liquid (if using) see segment's instructions https //segment com/docs/connections/sources/catalog/libraries/website/javascript/quickstart/#step 2a add the segment snippet for adding the code snippet you can find the latest version of the segment snippet in the overview tab of your javascript source in your segment workspace remove analytics page(); from the snippet after you paste it into your theme chord will handle calling analytics page(); and add some extra metadata installation in the theme code, add create a liquid file called snippets/chord liquid and paste in this code chord liquid snippet add your store identifiers before the code is deployed to production, there are four variables at the top of the snippet that need to be updated with different values var chord oms id = ''; // chord will provide var chord store id= ''; // chord will provide var chord tenant id = ''; // chord will provide var store domain = ''; // comes before myshopify com the value of store domain should be the shopify store name that comes before myshopify com for example, if the store is https //chord store myshopify com , it should be chord store chord will provide the values for the other three variables add snippet to your layout include the chord snippet on every page of the shopify theme by rendering it inside the \<head> tag in layout/theme liquid layout/theme liquid {% render 'chord' %} to add tracking events to shopify checkout and send an "order completed" tracking event from the order confirmation page, render the chord snippet inside the \<head> tag on layout/checkout liquid , with the order completed variable set to true layout/checkout liquid {% render 'chord' order completed true %} chord tracking cannot currently be installed on shopify checkouts that have been upgraded to checkout extensibility https //help shopify com/en/manual/checkout settings/checkout extensibility/checkout upgrade usage without any further code changes to your theme, chord's snippet will send the cdp a page event for every page view an identify event for every page view for a logged in user the following track events "cart viewed" "checkout started" "email captured" "order completed" (if chord's snippet is added to checkout liquid ) "product clicked" "product viewed" you can add more events using the global window\ chord object see the shopify theme api reference docid\ w1jcchtdf49p8u7lwvujm for a complete list of available methods you can also customize the dom selectors used for the track events that chord automatically sends configuration chord's liquid tracking library can be configured with the following options to modify the default options, change the options object argument passed to chord load() property type required description autoinstrument boolean no defaults to true when set to false , track events are not automatically sent autoinstrumentselectors object (see auto instrument selectors below) no provide custom dom selectors for automatic instrumentation of events baseurl string no the base url of the shopify site, to use in shopify ajax api requests ex https //example myshopify com if not provided, the current origin will be used cdp function or object yes a reference to the cdp library, or a function that returns a reference to the cdp library for example, if using segment's analytics js https //www npmjs com/package/@segment/analytics next library, this could be window\ analytics or () => window\ analytics if omitted, no tracking events are sent debug boolean no defaults to false when set to true , events are validated against chord's tracking plan an error is logged using console log if the event doesn't match the tracking plan and the enablelogging option is set to true we recommend enabling debug and enablelogging for development and disabling for production enablelogging boolean no defaults to true when set to true , javascript and debug errors are logged using console log we recommend enabling debug and enablelogging for development and disabling for production metadata object (see metadata below) yes event metadata see below for details stripnull boolean no defaults to true when set to true , event properties with a null value are removed cdps typically treat null and undefined as separate values, so be sure you intend to send null values before setting to false syncidentifiers object (see sync identifiers below) no enable adding integration identifiers as cart attributes, so they can be included in server side events each integration defaults to false auto instrument selectors this optional object allows you to customize the dom selector that chord uses to automatically track certain events events related to page view, such as "cart viewed," aren't configurable here, because they are based on the current url instead of an interaction with the page each event property can be a boolean or a string when set to false , chord won't send that event automatically to customize the dom element that triggers the event, set the matching event property to the dom selector you want to use that selector will be passed to document queryselectorall(selector) and an event listener will be added that the library will use to trigger the event if the selector is a \<form> element, the event will be triggered when the form is submitted otherwise, the event will be triggered when the element is clicked property type required description autoinstrumentselectors\['checkout started'] string or boolean no the default selector is form\[action="/cart" i]\[method="post"] autoinstrumentselectors\['email captured'] string or boolean no the default selector is form\[action="/contact#contact form" i]\[method="post"], form\[action="/contact#contactform" i]\[method="post"] autoinstrumentselectors\['product clicked'] string or boolean no the default selector is a\[href ="/products/" i] metadata this required object provides metadata about the event context that is appended to every event chord uses this metadata when providing insights property type required description metadata i18n currency string yes the order currency in iso 4217 currency code, uppercase for example, usd metadata i18n locale string yes the order locale for example, en us metadata ownership omsid string yes a uuid assigned by chord this identifier is unique to the store, and will be the same across every environment and segment source for a given store metadata ownership storeid string yes a uuid assigned by chord this identifier is unique to the store, and will be the same across every environment and segment source for a given store metadata ownership tenantid string yes a uuid assigned by chord this identifier is unique to the store, and will be the same across every environment and segment source for a given store metadata platform name string yes the name of the e commerce platform used for example, shopify metadata platform type string yes the type of platform where the event originated either web or pos metadata store domain string yes the store slug that comes before myshopify com sync identifiers this optional object allows chord's library to save identifiers from other libraries and integrations as attributes on the cart chord will use these attributes to connect your front end website events with your server events read more about this in unifying data across sources docid\ fymi5g8ewb yypyh gu4o each integration defaults to false set the integration to true if you plan to send both front end and server events to the integration via the cdp currently, only the google analytics 4 identifier is supported contact chord to request help adding more identifiers property type required description syncidentifiers\['google analytics 4'] boolean no when set to true , adds the client id from the ga cookie as a cart attribute chord will include this client id on server events for the order, so sessions can be tied together in ga4