@chordcommerce/analytics

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.

Visit docs.chord.co for guides, examples, and an API reference.

Requirements

The library supports sending events via Chord CDP or Segment. If using Segment, analytics.js must also be installed in your project.

Installation

To install @chordcommerce/analytics, run the following command in your project directory:

``bash
npm install @chordcommerce/analytics


or


yarn add @chordcommerce/analytics
`

Usage

Initialize @chordcommerce/analytics as follows:

`jsx
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
`

$3

If you are using an older version of NodeJS (

`jsx
const { ChordPixel } = require('@chordcommerce/analytics/dist/cjs')
`

Configuration

@chordcommerce/analytics can be initialized with the following options:

| Property | Required | Description |
| --------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| cdp | false | _Required when using a CDP other than Chord._ 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 library, this could be window.analytics or () => window.analytics. |
| cdpDomain | false | _Required when using Chord CDP._ The Chord CDP domain. To be provided by the Chord team. |
| cdpWriteKey | false | _Required when using Chord CDP._ The Chord CDP write key. To be provided by the Chord team. |
| debug | false | Defaults to false. When set to true, events are validated against Chord's tracking plan and errors are logged. We recommend enabling this for development and disabling for production. |
| enableLogging | false | Defaults to true. When set to true, errors are logged using console.log. |
| formatters | true | Functions that are used to construct tracking events. There are two types of formatters, objects and events. formatters.objects is required. See below for details. |
| metadata | true | Event metadata. See below for details. |
| namespace | false | Defaults to chord. Changes where Chord is globally available (e.g. window.chord). _Only applicable when using Chord CDP._ |
| stripNull | false | 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. |

If cdp, cdpDomain, and cdpWriteKey are all omitted, no tracking events are sent.

Metadata

| Property | Required | Description |
| ----------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------- |
| metadata.i18n.currency | true | The order currency in ISO 4217 currency code, uppercase. For example, USD. |
| metadata.i18n.locale | true | The order locale. For example, en-US. |
| metadata.ownership.omsId | true | A UUID assigned by Chord. |
| metadata.ownership.storeId | true | A UUID assigned by Chord. |
| metadata.ownership.tenantId | true | A UUID assigned by Chord. |
| metadata.platform.name | true | The e-commerce platform used. For example, Shopify. |
| metadata.platform.type | true | The type of platform where the event originated. Either web or pos. |
| metadata.store.domain | true | The domain of the site where the event originated. For Shopify, this should be the store slug that comes before .myshopify.com. |

$3

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 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 Chord’s documentation for more details on object formatters.

| Property | Required | Description |
| ----------------------------- | -------- | ------------------------------------------- |
| formatters.objects.cart | true | A function that creates a cart object. |
| formatters.objects.checkout | true | A function that creates a checkout object. |
| formatters.objects.lineItem | true | A function that creates a line item object. |
| formatters.objects.product | true | A function that creates a product object. |

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 Chord’s documentation 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:

`js
interface ObjectTypes {
Cart: StorefrontCart
Checkout: StorefrontCart
LineItem: StorefrontLineItem
Product: StorefrontProduct
}

const chord = new ChordAnalytics({ 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:

`js
import type { CartFormatter } from '@chordcommerce/analytics'

export const cartFormatter: CartFormatter = (props) => {
const { cart } = props // cart has type StorefrontCart
return { ... }
}
`

addSourceMiddleware(func: AnalyticsMiddleware)

Registers a middleware function to modify event properties before they are
sent to analytics providers. Middleware functions are executed
synchronously in the order they were added during event tracking.

Parameters

- func (AnalyticsMiddleware) - A middleware function that receives event
data and can return additional properties to merge into the event payload.

Return Value

The middleware function can return:

- Partial - Properties to merge into the event payload
- void - No additional properties to add

Useage Example

`
analytics.addSourceMiddleware(({ payload }) => {
const { searchParams } = payload.obj.context.page;

return {
utm_source: searchParams.utm_source,
utm_medium: searchParams.utm_medium,
utm_campaign: searchParams.utm_campaign
};
});

analytics.addSourceMiddleware(({ payload }) => {
return {
session_id: getSessionId(),
user_agent: navigator.userAgent,
timestamp: Date.now()
};
});
``

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.