Usage

the chord web pixel automatically sends the following events to the cdp a page event for every page view an identify event when a customer submits contact information during checkout, or logs into their account the following track events "cart viewed" "checkout started" "checkout step completed" "order completed" "payment info entered" "product list viewed" "product added" "product removed" "product viewed" "products searched" you can customize the web pixel code to add additional custom events or event properties we recommend keeping track of changes you make to the web pixel code, so you can upgrade in the future adding additional events you may want to add additional events from the chord tracking plan to your storefront, or add custom events 1\) publish custom event from theme first, from your shopify theme, publish a custom shopify event with all the data you'll need to construct the chord tracking event, using shopify analytics publish in a \<script> tag here's an example const event name = 'chord navigation clicked'; const event data = { category 'support', label 'contact us', navigation placement 'footer', navigation title 'contact', navigation url 'https //example com/contact', } shopify analytics publish(event name, event data); see more on publishing custom shopify events here we recommend prefixing the event name with chord or similar to prevent confusion, because all custom shopify events are sent to all web pixels 2\) subscribe to custom event from web pixel next, you have to update your chord web pixel code to listen for the new event and sent it to the cdp here's an example analytics subscribe('chord navigation clicked', async (event) => { const eventname = 'navigation clicked' // cdp event name const props = event customdata // cdp event properties await track(eventname, props) }) note that eventname and props are the name and properties of the resulting cdp event, so if you're using an event from the chord tracking plan , make sure the eventname is correct using with cdp device mode destinations you may need to add some extra configuration for cdp device mode destinations to work with the chord web pixel the chord web pixel contains a snippet to load a cdp library (e g chord cdp or segment's analytics js ) that library in turn loads the javascript for any device mode destinations for example, the google analytics 4 web destination loads the gtag js library client side and maps chord events directly to gtag js events shopify loads web pixel code in an iframe element that has the sandbox attribute defined with the allow scripts and allow forms values this prevents web pixel code from accessing the top frame some device mode destination javascript may behave unpredictably in this environment shopify's documentation lists the following known limitations of the sandbox environment can't render user interface elements, such as buttons, forms, banners, or modals automatic detection of events from dom scraping automatic detection of metadata from dom scraping automatic detection of user information, such as email and phone, from dom scraping automatic detection of outbound link clicks from dom scraping automatic detection of page scrolling automatic detection of clicks and mouse movement to create heatmaps from dom scraping these limitations extend to any device mode destinations you connect the most notable limitation is that window\ href returns the sandbox url instead of the top frame url device mode destinations that register page views may show a url that looks like /wpm\@bf0a1c21w3867u34522fdp2197aec3mf92342/custom/web pixel 87687490\@19/sandbox/modern/cart instead of the expected storefront url, if they use window\ href instead of the cdp's pageview event properties to fix incorrect page view urls, check the destination settings, and if the destination supports mappings for page views, adjust the destination mapping to map the pageview event property properties url to the url property in the destination for example, if you're using the google analytics 4 web destination , navigate to the pre built "set configuration fields" mapping and map properties url to the "page location", as shown here save the mapping, and the correct urls will appear in ga4 for future events including locale in events chord tracking events typically include the customer locale (e g , "en us") so you can filter your event data using that property however, shopify web pixels don't have access to the current locale, so you need to update the web pixel code to detect it accurately if your store only supports one locale, or you don't need to support locale filtering, just update the value of the default locale variable if your store supports more than one locale, and you want to filter your event data by locale, you'll need a more customized approach shopify web pixels can access cookies and localstorage from the parent frame, so we recommend setting a cookie or a localstorage property with the current locale from your shopify theme or headless storefront site, and then updating the getmeta function in the chord web pixel code to read the locale see shopify's documentation of the browser api to see how to read cookies or localstorage properties for example, if your storefront sets a cookie called locale , you could include that in tracking events like this async function getmeta() { if (!currency) { currency = await browser cookie get('cart currency') } / start custom code / locale = await browser cookie get('locale'); / end custom code / return { i18n { currency, locale, }, // rest known tracking event issues chord web pixel events use the data provided by shopify's web pixel framework there are some ways in which chord web pixel events differ from chord events from other libraries, due to the data that's available from shopify in the web pixel context known differences are listed below all pre checkout events discounts and coupon data is not available in tracking events until checkout has started in pre checkout events like "cart viewed", discounts are not factored into the total or value properties, and the coupon property is never populated "cart viewed" when a “buy x get y” promotion is applied, the line item with the discount is not in the products array, and the value property doesn’t include the value of the discounted line item "product added" the event is fired both when a product is initially added to the cart and when the quantity of an existing cart line item is increased "product removed" the event is fired both when a line item is completely removed from the cart and when the quantity of an existing cart line item is decreased connecting front end events and server events chord typically sends tracking events to the cdp from two sources your website front end, either using the chord shopify web pixel, theme snippet, or @chordcommerce/analytics , and; chord's server events service, which sends tracking events from a shopify custom source function in your cdp workspace in response to webhook triggers from shopify to associate server events and front end storefront events with the same session, the website front end needs to save a few browser identifiers as attributes on the cart or order, so they can be retrieved later by the server source and included in cdp events this needs to be done from the storefront, before the customer reaches checkout if you're using the chord web pixel to instrument your storefront, you will need to add some code to your shopify theme to handle this we've created a script that makes this easy simply add the following to your theme if you'd like to implement this yourself instead, you need to add two attributes attribute name description example value cdpanonymousid cdp session identifier read this from the ajs anonymous id cookie 32e5434e ed1a 42bf acd9 64de286879fa googleclientid google client id read this from the ga cookie, with substring(6) 961446296 1716300180 in a shopify theme, you can add cart attributes using the cart api we recommend adding these attributes at a time that doesn’t block user interaction with your site, like when the cart page loads or after a product is added to the cart see unifying data across sources docid\ fymi5g8ewb yypyh gu4o for more details