Shopify Theme API Reference

trackcartviewed the “cart viewed” event is sent automatically from a page with /cart in the url if you’re using a cart overlay on other pages, here’s an example of how you can add the event chord trackcartviewed() if an object with a cart property is not provided as an argument, chord fetches data about the cart from shopify’s ajax api https //shopify dev/docs/api/ajax/reference/cart#get locale cart js trackcheckoutstarted the “checkout started” event is sent automatically when the submit event https //developer mozilla org/en us/docs/web/api/htmlformelement/submit event fires on a form with css selector form\[action="/cart" i]\[method="post"] this selector works with shopify’s {% form 'cart', cart %} tag ( see docs https //shopify dev/docs/api/liquid/tags/form#form cart ) if the site is using custom “check out” buttons or forms, you can either adjust the css selector or add the event in javascript if the css selector is a form element, the event will be sent when the form’s submit event fires otherwise, the event will be sent when the click event fires const chord = new chordanalytics({ &#x9;autoinstrumentselectors { &#x9; 'checkout started' 'form#checkout' &#x9;}, &#x9; rest }); if the element is added after chordanalytics is initialized, call chord autoinstrument() to rescan the page and re attach event handlers here’s how you can add the event in javascript chord trackcheckoutstarted() trackcouponapplied the “coupon applied” event is not sent automatically here’s an example of how you can add the event chord trackcouponapplied({ couponname '50off' }) trackcoupondenied the “coupon denied” event is not sent automatically here’s an example of how you can add the event chord trackcoupondenied({ couponname '50off', reason 'expired' }) trackcouponentered the “coupon entered” event is not sent automatically here’s an example of how you can add the event chord trackcouponentered({ couponname '50off' }) trackcouponremoved the “coupon removed” event is not sent automatically here’s an example of how you can add the event chord trackcouponremoved({ couponname '50off' }) trackemailcaptured the “email captured” event is sent automatically when the submit event https //developer mozilla org/en us/docs/web/api/htmlformelement/submit event fires on a form with css selector form\[action="/contact#contact form" i]\[method="post"], form\[action="/contact#contactform" i]\[method="post"] the email address is read from the contact\[email] input element in the form this selector works with shopify’s {% form 'contact' %} and {% form 'customer' %} tags ( see docs https //shopify dev/docs/api/liquid/tags/form#form contact ) if the site is using other methods to capture email addresses, you can either adjust the css selector or add the event in javascript if you adjust the css selector, keep it mind it has to be a selector of a form element, because the listener is listening for a submit event here’s how you can adjust the css selector const chord = new chordanalytics({ &#x9;autoinstrumentselectors { &#x9; 'email captured' 'form#newsletter' &#x9;}, &#x9; rest }); if the element is added after chordanalytics is initialized, call chord autoinstrument() to rescan the page and re attach event handlers here’s how you can add the event in javascript chord trackemailcaptured({ &#x9;email 'test\@chord co', &#x9;placementcomponent 'footer' }) trackproductadded the “product added” event is not sent automatically here’s an example of how you can add the event chord trackproductadded({ product { handle formdata get("handle"), quantity formdata get("quantity"), variantid formdata get("id"), } }) we recommend sending the event after the product has been successfully added to the cart, not before trackproductclicked the “product clicked” event is sent automatically when an html element matching the css selector a\[href ="/products/" i] is clicked the product handle is read from the href element and used to fetch product details from shopify’s ajax api https //shopify dev/docs/api/ajax/reference/cart#get locale cart js you can customize the css selector if you adjust the css selector, keep it mind it has to be a selector of an element with an href to the product page that will be the target of a click event here’s how you can adjust the css selector const chord = new chordanalytics({ &#x9;autoinstrumentselectors { &#x9; 'product clicked' 'a product\[href ="/products/" i]' &#x9;}, &#x9; rest }); if the element is added after chordanalytics is initialized, call chord autoinstrument() to rescan the page and re attach event handlers here’s how you can add the event in javascript chord trackproductclicked({ &#x9;listname 'related products', &#x9;product { &#x9; handle 'product 1', &#x9;}, }) trackproductviewed the “product viewed” event is sent automatically from a page with /product in the url here’s an example of how you can add the event elsewhere chord trackproductviewed({ &#x9;product { &#x9; handle 'product 1', &#x9;}, }) trackproductlistviewed the “product list viewed” event is not sent automatically here’s an example of how you can add the event {% assign selectedcollection = block settings collection %} \<script> chord trackproductlistviewed({ listid {{ selectedcollection id | json }}, listname {{ selectedcollection title | json }}, products {{ selectedcollection products | map "handle" | json }} }); \</script> products can be either an array of product handles, in which case chord will fetch the product details from shopify’s ajax api https //shopify dev/docs/api/ajax/reference/cart#get locale cart js , or an array of product objects, like this \<script> chord trackproductlistviewed({ listid {{ selectedcollection id | json }}, listname {{ selectedcollection title | json }}, products {{ selectedcollection products | json }} }); \</script> products represents the products that were actually viewed, not every product in the collection trackproductssearched sends a “products searched” event chord trackproductssearched({ query 'pizza' }) tracksignedin this event should be sent after the user successfully signs in here’s how you can add the event in javascript chord tracksignedin({ email 'test\@chord co' }) tracksignedout this event should be sent after the user successfully signs out here’s how you can add the event in javascript chord tracksignedout({ email 'test\@chord co' }) tracksignedup this event should be sent after the user successfully signs up here’s how you can add the event in javascript chord tracksignedup({ email 'test\@chord co' }) identify your website should send an identify event to the cdp every time identifying information is captured about the current user this library automatically sends an identify event in these scenarios on every page load by an authenticated user this code is in chord liquid and can be modified if desired when the email captured event is sent automatically identify is not sent when you call chord trackemailcaptured manually if you're capturing identifying information like an email address in a situation that's not covered above, we recommend you add the identify event in javascript to send this information to the cdp for example, you might have a newsletter sign up form or a form where users can change their default shipping address here’s how you can add the identify event in javascript chord identify(userid, { name "chord commerce", email "test\@chord co" }); userid in the above example is the stringified shopify customer id https //shopify dev/docs/api/liquid/objects/customer#customer id the second argument is an object representing user traits if the userid is not available, omit this argument and send the object of user traits as the first argument never send an email address or other value as the user id for example, if you are adding an identify event to a newsletter signup form, it should look like this chord identify({ email "test\@chord co" }); if you’re sending a track event at the same time as an identify event, we recommend sending identify first and the track event second some integrations require an identify event before they can process track events reset the reset method sends a reset event to the cdp tracking library this does not result in an event appearing in the cdp it resets the user’s session in the browser, which means the user will receive a new anonymous identifier and any previous user data will be cleared we recommend calling the reset method after a user has successfully logged out of their account track the track method sends a track event to the cdp chord track('navigation clicked', { &#x9;label 'home', &#x9;location 'main nav', &#x9;url '/'&#x9; }) track can be used to send any event to the cdp, including events in the chord tracking plan however, we recommend using an event specific method like trackproductviewed instead if one is available, so that chord's library can construct the event body to match the tracking plan see the individual event tracking methods above track simply sends the second argument directly to the cdp as the event body track does not transform property names from camel case to snake case; event properties will be sent to the cdp exactly as written we recommend using snake case for all event properties null values will be stripped by default unless stripnull is set to false in the library options