@chordcommerce/analytics 1.8.0 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +17 -14
- package/dist/client/cdp.d.ts +3 -0
- package/dist/client/cdp.js +28 -0
- package/dist/client/index.js +86 -79
- package/dist/types/client.d.ts +10 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,13 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
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.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
Visit [docs.chord.co](https://docs.chord.co/analytics-getting-started) for guides, examples, and an API reference.
|
|
5
|
+
Visit [docs.chord.co](https://docs.chord.co/installing-chord-analytics) for guides, examples, and an API reference.
|
|
8
6
|
|
|
9
7
|
## Requirements
|
|
10
8
|
|
|
11
|
-
|
|
9
|
+
The library supports sending events via Chord CDP or Segment. If using Segment, [analytics.js](https://www.npmjs.com/package/@segment/analytics-next) must also be installed in your project.
|
|
12
10
|
|
|
13
11
|
## Installation
|
|
14
12
|
|
|
@@ -22,7 +20,7 @@ yarn add @chordcommerce/analytics
|
|
|
22
20
|
|
|
23
21
|
## Usage
|
|
24
22
|
|
|
25
|
-
|
|
23
|
+
Initialize `@chordcommerce/analytics` as follows:
|
|
26
24
|
|
|
27
25
|
```jsx
|
|
28
26
|
import ChordAnalytics from '@chordcommerce/analytics'
|
|
@@ -36,14 +34,19 @@ chord.trackCartViewed({ cart }) // sends a "Cart Viewed" event to the CDP
|
|
|
36
34
|
|
|
37
35
|
`@chordcommerce/analytics` can be initialized with the following options:
|
|
38
36
|
|
|
39
|
-
| Property | Required | Description
|
|
40
|
-
| --------------- | -------- |
|
|
41
|
-
| `cdp` |
|
|
42
|
-
| `
|
|
43
|
-
| `
|
|
44
|
-
| `
|
|
45
|
-
| `
|
|
46
|
-
| `
|
|
37
|
+
| Property | Required | Description |
|
|
38
|
+
| --------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
39
|
+
| `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](https://www.npmjs.com/package/@segment/analytics-next) library, this could be `window.analytics` or `() => window.analytics`. |
|
|
40
|
+
| `cdpDomain` | false | _Required when using Chord CDP._ The Chord CDP domain. To be provided by the Chord team. |
|
|
41
|
+
| `cdpWriteKey` | false | _Required when using Chord CDP._ The Chord CDP write key. To be provided by the Chord team. |
|
|
42
|
+
| `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. |
|
|
43
|
+
| `enableLogging` | false | Defaults to `true`. When set to `true`, errors are logged using `console.log`. |
|
|
44
|
+
| `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. |
|
|
45
|
+
| `metadata` | true | Event metadata. See below for details. |
|
|
46
|
+
| `namespace` | false | Defaults to `chord`. Changes where Chord is globally available (e.g. `window.chord`). _Only applicable when using Chord CDP._ |
|
|
47
|
+
| `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. |
|
|
48
|
+
|
|
49
|
+
If `cdp`, `cdpDomain`, and `cdpWriteKey` are all omitted, no tracking events are sent.
|
|
47
50
|
|
|
48
51
|
**Metadata**
|
|
49
52
|
|
|
@@ -109,7 +112,7 @@ export const cartFormatter: CartFormatter<StorefrontCart> = (props) => {
|
|
|
109
112
|
|
|
110
113
|
## API Reference
|
|
111
114
|
|
|
112
|
-
See [Chord’s documentation](https://docs.chord.co/
|
|
115
|
+
See [Chord’s documentation](https://docs.chord.co/api-reference) for a full API reference.
|
|
113
116
|
|
|
114
117
|
## Support
|
|
115
118
|
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Adds the Chord CDP snippet to the page.
|
|
3
|
+
*/
|
|
4
|
+
export const addCdpSnippet = (options) => {
|
|
5
|
+
if (!document || typeof document.createElement === 'undefined')
|
|
6
|
+
return;
|
|
7
|
+
const s = document.createElement('script');
|
|
8
|
+
s.async = true;
|
|
9
|
+
s.src = `${options.cdpDomain}/p.js`;
|
|
10
|
+
s.setAttribute('data-debug', `${!!options.debug}`);
|
|
11
|
+
s.setAttribute('data-init-only', 'true');
|
|
12
|
+
s.setAttribute('data-namespace', `_${options.namespace}`);
|
|
13
|
+
s.setAttribute('data-write-key', options.cdpWriteKey);
|
|
14
|
+
document.head.appendChild(s);
|
|
15
|
+
};
|
|
16
|
+
/*
|
|
17
|
+
* Returns the CDP queue to hold events ahead of CDP initialization.
|
|
18
|
+
*/
|
|
19
|
+
export const cdpQueue = (namespace) => {
|
|
20
|
+
var _a;
|
|
21
|
+
const q = window && (window[_a = `_${namespace}Q`] || (window[_a] = []));
|
|
22
|
+
return {
|
|
23
|
+
track: (...args) => q.push((cdp) => cdp.track(...args)),
|
|
24
|
+
identify: (...args) => q.push((cdp) => cdp.identify(...args)),
|
|
25
|
+
page: (...args) => q.push((cdp) => cdp.page(...args)),
|
|
26
|
+
reset: (...args) => q.push((cdp) => cdp.reset(...args)),
|
|
27
|
+
};
|
|
28
|
+
};
|
package/dist/client/index.js
CHANGED
|
@@ -7,10 +7,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
7
7
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
8
|
});
|
|
9
9
|
};
|
|
10
|
+
import { addCdpSnippet, cdpQueue } from './cdp.js';
|
|
10
11
|
import { eventSchemas } from '../validators/index.js';
|
|
11
12
|
import { pruneNullValues } from '../utils.js';
|
|
12
13
|
export class ChordAnalytics {
|
|
13
14
|
constructor(options) {
|
|
15
|
+
var _a, _b;
|
|
14
16
|
/**
|
|
15
17
|
* Allows snippet.js to detect whether this library has been initialized yet.
|
|
16
18
|
*/
|
|
@@ -20,11 +22,11 @@ export class ChordAnalytics {
|
|
|
20
22
|
*/
|
|
21
23
|
this.invoked = true;
|
|
22
24
|
/*
|
|
23
|
-
* Return the CDP instance
|
|
25
|
+
* Return the CDP instance or the queue.
|
|
24
26
|
*/
|
|
25
27
|
this.cdp = () => {
|
|
26
|
-
|
|
27
|
-
const a =
|
|
28
|
+
const { cdp, namespace } = this.options;
|
|
29
|
+
const a = cdp || (window === null || window === void 0 ? void 0 : window[`_${namespace}`]) || cdpQueue(namespace);
|
|
28
30
|
if (typeof a === 'function')
|
|
29
31
|
return a();
|
|
30
32
|
return a;
|
|
@@ -135,8 +137,8 @@ export class ChordAnalytics {
|
|
|
135
137
|
};
|
|
136
138
|
// TODO: Add support for props.products
|
|
137
139
|
this.trackCartViewed = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
138
|
-
var
|
|
139
|
-
const cart = (
|
|
140
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
141
|
+
const cart = (_f = (_e = (_d = (_c = this.options) === null || _c === void 0 ? void 0 : _c.formatters) === null || _d === void 0 ? void 0 : _d.objects) === null || _e === void 0 ? void 0 : _e.cart) === null || _f === void 0 ? void 0 : _f.call(_e, {
|
|
140
142
|
cart: props === null || props === void 0 ? void 0 : props.cart,
|
|
141
143
|
});
|
|
142
144
|
const payload = {
|
|
@@ -145,17 +147,17 @@ export class ChordAnalytics {
|
|
|
145
147
|
products: cart === null || cart === void 0 ? void 0 : cart.products,
|
|
146
148
|
value: cart === null || cart === void 0 ? void 0 : cart.value,
|
|
147
149
|
};
|
|
148
|
-
if ((
|
|
149
|
-
const formattedPayload = (
|
|
150
|
+
if ((_j = (_h = (_g = this.options) === null || _g === void 0 ? void 0 : _g.formatters) === null || _h === void 0 ? void 0 : _h.events) === null || _j === void 0 ? void 0 : _j.cartViewed) {
|
|
151
|
+
const formattedPayload = (_m = (_l = (_k = this.options) === null || _k === void 0 ? void 0 : _k.formatters) === null || _l === void 0 ? void 0 : _l.events) === null || _m === void 0 ? void 0 : _m.cartViewed(props, payload);
|
|
150
152
|
return this.track('Cart Viewed', formattedPayload, options);
|
|
151
153
|
}
|
|
152
154
|
return this.track('Cart Viewed', payload, options);
|
|
153
155
|
});
|
|
154
156
|
// TODO: Add support for props.products
|
|
155
157
|
this.trackCheckoutStarted = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
156
|
-
var
|
|
157
|
-
const formatter = (
|
|
158
|
-
const checkout = (
|
|
158
|
+
var _o, _p, _q, _r, _s, _t, _u;
|
|
159
|
+
const formatter = (_q = (_p = (_o = this.options) === null || _o === void 0 ? void 0 : _o.formatters) === null || _p === void 0 ? void 0 : _p.events) === null || _q === void 0 ? void 0 : _q.checkoutStarted;
|
|
160
|
+
const checkout = (_u = (_t = (_s = (_r = this.options) === null || _r === void 0 ? void 0 : _r.formatters) === null || _s === void 0 ? void 0 : _s.objects) === null || _t === void 0 ? void 0 : _t.checkout) === null || _u === void 0 ? void 0 : _u.call(_t, {
|
|
159
161
|
checkout: props === null || props === void 0 ? void 0 : props.checkout,
|
|
160
162
|
});
|
|
161
163
|
const payload = checkout;
|
|
@@ -166,8 +168,8 @@ export class ChordAnalytics {
|
|
|
166
168
|
return this.track('Checkout Started', payload, options);
|
|
167
169
|
});
|
|
168
170
|
this.trackCheckoutStepCompleted = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
169
|
-
var
|
|
170
|
-
const formatter = (
|
|
171
|
+
var _v, _w, _x;
|
|
172
|
+
const formatter = (_x = (_w = (_v = this.options) === null || _v === void 0 ? void 0 : _v.formatters) === null || _w === void 0 ? void 0 : _w.events) === null || _x === void 0 ? void 0 : _x.checkoutStepCompleted;
|
|
171
173
|
const payload = {
|
|
172
174
|
checkout_id: props === null || props === void 0 ? void 0 : props.checkoutId,
|
|
173
175
|
payment_method: props === null || props === void 0 ? void 0 : props.paymentMethod,
|
|
@@ -181,8 +183,8 @@ export class ChordAnalytics {
|
|
|
181
183
|
return this.track('Checkout Step Completed', payload, options);
|
|
182
184
|
});
|
|
183
185
|
this.trackCheckoutStepViewed = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
184
|
-
var
|
|
185
|
-
const formatter = (
|
|
186
|
+
var _y, _z, _0;
|
|
187
|
+
const formatter = (_0 = (_z = (_y = this.options) === null || _y === void 0 ? void 0 : _y.formatters) === null || _z === void 0 ? void 0 : _z.events) === null || _0 === void 0 ? void 0 : _0.checkoutStepViewed;
|
|
186
188
|
const payload = {
|
|
187
189
|
checkout_id: props === null || props === void 0 ? void 0 : props.checkoutId,
|
|
188
190
|
payment_method: props === null || props === void 0 ? void 0 : props.paymentMethod,
|
|
@@ -196,8 +198,8 @@ export class ChordAnalytics {
|
|
|
196
198
|
return this.track('Checkout Step Viewed', payload, options);
|
|
197
199
|
});
|
|
198
200
|
this.trackCouponApplied = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
199
|
-
var
|
|
200
|
-
const formatter = (
|
|
201
|
+
var _1, _2, _3;
|
|
202
|
+
const formatter = (_3 = (_2 = (_1 = this.options) === null || _1 === void 0 ? void 0 : _1.formatters) === null || _2 === void 0 ? void 0 : _2.events) === null || _3 === void 0 ? void 0 : _3.couponApplied;
|
|
201
203
|
const payload = {
|
|
202
204
|
cart_id: props === null || props === void 0 ? void 0 : props.cartId,
|
|
203
205
|
coupon_id: props === null || props === void 0 ? void 0 : props.couponId,
|
|
@@ -212,8 +214,8 @@ export class ChordAnalytics {
|
|
|
212
214
|
return this.track('Coupon Applied', payload, options);
|
|
213
215
|
});
|
|
214
216
|
this.trackCouponDenied = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
215
|
-
var
|
|
216
|
-
const formatter = (
|
|
217
|
+
var _4, _5, _6;
|
|
218
|
+
const formatter = (_6 = (_5 = (_4 = this.options) === null || _4 === void 0 ? void 0 : _4.formatters) === null || _5 === void 0 ? void 0 : _5.events) === null || _6 === void 0 ? void 0 : _6.couponDenied;
|
|
217
219
|
const payload = {
|
|
218
220
|
cart_id: props === null || props === void 0 ? void 0 : props.cartId,
|
|
219
221
|
coupon_id: props === null || props === void 0 ? void 0 : props.couponId,
|
|
@@ -228,8 +230,8 @@ export class ChordAnalytics {
|
|
|
228
230
|
return this.track('Coupon Denied', payload, options);
|
|
229
231
|
});
|
|
230
232
|
this.trackCouponEntered = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
231
|
-
var
|
|
232
|
-
const formatter = (
|
|
233
|
+
var _7, _8, _9;
|
|
234
|
+
const formatter = (_9 = (_8 = (_7 = this.options) === null || _7 === void 0 ? void 0 : _7.formatters) === null || _8 === void 0 ? void 0 : _8.events) === null || _9 === void 0 ? void 0 : _9.couponEntered;
|
|
233
235
|
const payload = {
|
|
234
236
|
cart_id: props === null || props === void 0 ? void 0 : props.cartId,
|
|
235
237
|
coupon_id: props === null || props === void 0 ? void 0 : props.couponId,
|
|
@@ -243,8 +245,8 @@ export class ChordAnalytics {
|
|
|
243
245
|
return this.track('Coupon Entered', payload, options);
|
|
244
246
|
});
|
|
245
247
|
this.trackCouponRemoved = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
246
|
-
var
|
|
247
|
-
const formatter = (
|
|
248
|
+
var _10, _11, _12;
|
|
249
|
+
const formatter = (_12 = (_11 = (_10 = this.options) === null || _10 === void 0 ? void 0 : _10.formatters) === null || _11 === void 0 ? void 0 : _11.events) === null || _12 === void 0 ? void 0 : _12.couponRemoved;
|
|
248
250
|
const payload = {
|
|
249
251
|
cart_id: props === null || props === void 0 ? void 0 : props.cartId,
|
|
250
252
|
coupon_id: props === null || props === void 0 ? void 0 : props.couponId,
|
|
@@ -259,8 +261,8 @@ export class ChordAnalytics {
|
|
|
259
261
|
return this.track('Coupon Removed', payload, options);
|
|
260
262
|
});
|
|
261
263
|
this.trackEmailCaptured = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
262
|
-
var
|
|
263
|
-
const formatter = (
|
|
264
|
+
var _13, _14, _15;
|
|
265
|
+
const formatter = (_15 = (_14 = (_13 = this.options) === null || _13 === void 0 ? void 0 : _13.formatters) === null || _14 === void 0 ? void 0 : _14.events) === null || _15 === void 0 ? void 0 : _15.emailCaptured;
|
|
264
266
|
const payload = {
|
|
265
267
|
email: props === null || props === void 0 ? void 0 : props.email,
|
|
266
268
|
placement_component: props === null || props === void 0 ? void 0 : props.placementComponent,
|
|
@@ -273,13 +275,13 @@ export class ChordAnalytics {
|
|
|
273
275
|
return this.track('Email Captured', payload, options);
|
|
274
276
|
});
|
|
275
277
|
this.trackProductAdded = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
276
|
-
var
|
|
277
|
-
const formatter = (
|
|
278
|
-
const product = (
|
|
279
|
-
const cart = (
|
|
278
|
+
var _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27;
|
|
279
|
+
const formatter = (_18 = (_17 = (_16 = this.options) === null || _16 === void 0 ? void 0 : _16.formatters) === null || _17 === void 0 ? void 0 : _17.events) === null || _18 === void 0 ? void 0 : _18.productAdded;
|
|
280
|
+
const product = (_22 = (_21 = (_20 = (_19 = this.options) === null || _19 === void 0 ? void 0 : _19.formatters) === null || _20 === void 0 ? void 0 : _20.objects) === null || _21 === void 0 ? void 0 : _21.product) === null || _22 === void 0 ? void 0 : _22.call(_21, props === null || props === void 0 ? void 0 : props.product);
|
|
281
|
+
const cart = (_26 = (_25 = (_24 = (_23 = this.options) === null || _23 === void 0 ? void 0 : _23.formatters) === null || _24 === void 0 ? void 0 : _24.objects) === null || _25 === void 0 ? void 0 : _25.cart) === null || _26 === void 0 ? void 0 : _26.call(_25, {
|
|
280
282
|
cart: props === null || props === void 0 ? void 0 : props.cart,
|
|
281
283
|
});
|
|
282
|
-
const quantity = ((
|
|
284
|
+
const quantity = ((_27 = props === null || props === void 0 ? void 0 : props.product) === null || _27 === void 0 ? void 0 : _27.quantity) || 1;
|
|
283
285
|
const payload = Object.assign(Object.assign({}, product), { cart_id: cart.cart_id, currency: cart.currency, products: [Object.assign(Object.assign({}, product), { quantity })], total: product.price * (quantity || 1), value: product.price * (quantity || 1) });
|
|
284
286
|
if (typeof formatter === 'function') {
|
|
285
287
|
const formattedPayload = formatter(props, payload);
|
|
@@ -288,14 +290,14 @@ export class ChordAnalytics {
|
|
|
288
290
|
return this.track('Product Added', payload, options);
|
|
289
291
|
});
|
|
290
292
|
this.trackProductClicked = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
291
|
-
var
|
|
292
|
-
const formatter = (
|
|
293
|
-
const product = (
|
|
294
|
-
const cart = (
|
|
293
|
+
var _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40;
|
|
294
|
+
const formatter = (_30 = (_29 = (_28 = this.options) === null || _28 === void 0 ? void 0 : _28.formatters) === null || _29 === void 0 ? void 0 : _29.events) === null || _30 === void 0 ? void 0 : _30.productClicked;
|
|
295
|
+
const product = (_34 = (_33 = (_32 = (_31 = this.options) === null || _31 === void 0 ? void 0 : _31.formatters) === null || _32 === void 0 ? void 0 : _32.objects) === null || _33 === void 0 ? void 0 : _33.product) === null || _34 === void 0 ? void 0 : _34.call(_33, props === null || props === void 0 ? void 0 : props.product);
|
|
296
|
+
const cart = (_38 = (_37 = (_36 = (_35 = this.options) === null || _35 === void 0 ? void 0 : _35.formatters) === null || _36 === void 0 ? void 0 : _36.objects) === null || _37 === void 0 ? void 0 : _37.cart) === null || _38 === void 0 ? void 0 : _38.call(_37, {
|
|
295
297
|
cart: props === null || props === void 0 ? void 0 : props.cart,
|
|
296
298
|
});
|
|
297
|
-
const quantity = ((
|
|
298
|
-
const payload = Object.assign(Object.assign({}, product), { cart_id: cart.cart_id, currency: cart.currency, item_list_id: (
|
|
299
|
+
const quantity = ((_39 = props === null || props === void 0 ? void 0 : props.product) === null || _39 === void 0 ? void 0 : _39.quantity) || 1;
|
|
300
|
+
const payload = Object.assign(Object.assign({}, product), { cart_id: cart.cart_id, currency: cart.currency, item_list_id: (_40 = props === null || props === void 0 ? void 0 : props.listId) === null || _40 === void 0 ? void 0 : _40.toString(), item_list_name: props === null || props === void 0 ? void 0 : props.listName, products: [Object.assign(Object.assign({}, product), { quantity })] });
|
|
299
301
|
if (typeof formatter === 'function') {
|
|
300
302
|
const formattedPayload = formatter(props, payload);
|
|
301
303
|
return this.track('Product Clicked', formattedPayload, options);
|
|
@@ -303,13 +305,13 @@ export class ChordAnalytics {
|
|
|
303
305
|
return this.track('Product Clicked', payload, options);
|
|
304
306
|
});
|
|
305
307
|
this.trackVariantClicked = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
306
|
-
var
|
|
307
|
-
const formatter = (
|
|
308
|
-
const product = (
|
|
309
|
-
const cart = (
|
|
308
|
+
var _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52;
|
|
309
|
+
const formatter = (_43 = (_42 = (_41 = this.options) === null || _41 === void 0 ? void 0 : _41.formatters) === null || _42 === void 0 ? void 0 : _42.events) === null || _43 === void 0 ? void 0 : _43.variantClicked;
|
|
310
|
+
const product = (_47 = (_46 = (_45 = (_44 = this.options) === null || _44 === void 0 ? void 0 : _44.formatters) === null || _45 === void 0 ? void 0 : _45.objects) === null || _46 === void 0 ? void 0 : _46.product) === null || _47 === void 0 ? void 0 : _47.call(_46, props === null || props === void 0 ? void 0 : props.product);
|
|
311
|
+
const cart = (_51 = (_50 = (_49 = (_48 = this.options) === null || _48 === void 0 ? void 0 : _48.formatters) === null || _49 === void 0 ? void 0 : _49.objects) === null || _50 === void 0 ? void 0 : _50.cart) === null || _51 === void 0 ? void 0 : _51.call(_50, {
|
|
310
312
|
cart: props === null || props === void 0 ? void 0 : props.cart,
|
|
311
313
|
});
|
|
312
|
-
const quantity = ((
|
|
314
|
+
const quantity = ((_52 = props === null || props === void 0 ? void 0 : props.product) === null || _52 === void 0 ? void 0 : _52.quantity) || 1;
|
|
313
315
|
const payload = Object.assign(Object.assign({}, product), { cart_id: cart.cart_id, currency: cart.currency, quantity: quantity, line_item_id: props === null || props === void 0 ? void 0 : props.lineItemId, coupon: props === null || props === void 0 ? void 0 : props.coupon });
|
|
314
316
|
if (typeof formatter === 'function') {
|
|
315
317
|
const formattedPayload = formatter(props, payload);
|
|
@@ -318,13 +320,13 @@ export class ChordAnalytics {
|
|
|
318
320
|
return this.track('Variant Clicked', payload, options);
|
|
319
321
|
});
|
|
320
322
|
this.trackProductListFiltered = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
321
|
-
var
|
|
322
|
-
const formatter = (
|
|
323
|
+
var _53, _54, _55, _56, _57;
|
|
324
|
+
const formatter = (_55 = (_54 = (_53 = this.options) === null || _53 === void 0 ? void 0 : _53.formatters) === null || _54 === void 0 ? void 0 : _54.events) === null || _55 === void 0 ? void 0 : _55.productListFiltered;
|
|
323
325
|
const payload = {
|
|
324
326
|
category: props === null || props === void 0 ? void 0 : props.category,
|
|
325
327
|
filters: props === null || props === void 0 ? void 0 : props.filters,
|
|
326
|
-
list_id: (
|
|
327
|
-
item_list_id: (
|
|
328
|
+
list_id: (_56 = props === null || props === void 0 ? void 0 : props.listId) === null || _56 === void 0 ? void 0 : _56.toString(),
|
|
329
|
+
item_list_id: (_57 = props === null || props === void 0 ? void 0 : props.listId) === null || _57 === void 0 ? void 0 : _57.toString(),
|
|
328
330
|
item_list_name: props === null || props === void 0 ? void 0 : props.listName,
|
|
329
331
|
sorts: props === null || props === void 0 ? void 0 : props.sorts,
|
|
330
332
|
};
|
|
@@ -335,14 +337,14 @@ export class ChordAnalytics {
|
|
|
335
337
|
return this.track('Product List Filtered', payload, options);
|
|
336
338
|
});
|
|
337
339
|
this.trackProductListViewed = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
338
|
-
var
|
|
339
|
-
const formatter = (
|
|
340
|
+
var _58, _59, _60, _61, _62, _63;
|
|
341
|
+
const formatter = (_60 = (_59 = (_58 = this.options) === null || _58 === void 0 ? void 0 : _58.formatters) === null || _59 === void 0 ? void 0 : _59.events) === null || _60 === void 0 ? void 0 : _60.productListViewed;
|
|
340
342
|
const payload = {
|
|
341
343
|
category: props === null || props === void 0 ? void 0 : props.category,
|
|
342
|
-
list_id: (
|
|
343
|
-
item_list_id: (
|
|
344
|
+
list_id: (_61 = props === null || props === void 0 ? void 0 : props.listId) === null || _61 === void 0 ? void 0 : _61.toString(),
|
|
345
|
+
item_list_id: (_62 = props === null || props === void 0 ? void 0 : props.listId) === null || _62 === void 0 ? void 0 : _62.toString(),
|
|
344
346
|
item_list_name: props === null || props === void 0 ? void 0 : props.listName,
|
|
345
|
-
products: (
|
|
347
|
+
products: (_63 = props === null || props === void 0 ? void 0 : props.products) === null || _63 === void 0 ? void 0 : _63.map((p, i) => {
|
|
346
348
|
var _a, _b, _c, _d;
|
|
347
349
|
return (_d = (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.formatters) === null || _b === void 0 ? void 0 : _b.objects) === null || _c === void 0 ? void 0 : _c.product) === null || _d === void 0 ? void 0 : _d.call(_c, Object.assign(Object.assign({}, p), { position: i + 1 }));
|
|
348
350
|
}),
|
|
@@ -355,8 +357,8 @@ export class ChordAnalytics {
|
|
|
355
357
|
return this.track('Product List Viewed', payload, options);
|
|
356
358
|
});
|
|
357
359
|
this.trackProductRemoved = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
358
|
-
var
|
|
359
|
-
const formatter = (
|
|
360
|
+
var _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75, _76, _77, _78;
|
|
361
|
+
const formatter = (_66 = (_65 = (_64 = this.options) === null || _64 === void 0 ? void 0 : _64.formatters) === null || _65 === void 0 ? void 0 : _65.events) === null || _66 === void 0 ? void 0 : _66.productRemoved;
|
|
360
362
|
/*
|
|
361
363
|
const product = this.options?.formatters?.objects?.product?.({
|
|
362
364
|
position: props?.position,
|
|
@@ -365,13 +367,13 @@ export class ChordAnalytics {
|
|
|
365
367
|
variantId: props?.variantId,
|
|
366
368
|
})
|
|
367
369
|
*/
|
|
368
|
-
const lineItem = (
|
|
370
|
+
const lineItem = (_70 = (_69 = (_68 = (_67 = this.options) === null || _67 === void 0 ? void 0 : _67.formatters) === null || _68 === void 0 ? void 0 : _68.objects) === null || _69 === void 0 ? void 0 : _69.lineItem) === null || _70 === void 0 ? void 0 : _70.call(_69, {
|
|
369
371
|
lineItem: props === null || props === void 0 ? void 0 : props.lineItem,
|
|
370
372
|
});
|
|
371
|
-
const cart = (
|
|
373
|
+
const cart = (_74 = (_73 = (_72 = (_71 = this.options) === null || _71 === void 0 ? void 0 : _71.formatters) === null || _72 === void 0 ? void 0 : _72.objects) === null || _73 === void 0 ? void 0 : _73.cart) === null || _74 === void 0 ? void 0 : _74.call(_73, {
|
|
372
374
|
cart: props === null || props === void 0 ? void 0 : props.cart,
|
|
373
375
|
});
|
|
374
|
-
const payload = Object.assign(Object.assign({}, lineItem), { cart_id: cart.cart_id, currency: cart.currency, products: [lineItem], total: ((
|
|
376
|
+
const payload = Object.assign(Object.assign({}, lineItem), { cart_id: cart.cart_id, currency: cart.currency, products: [lineItem], total: ((_75 = lineItem === null || lineItem === void 0 ? void 0 : lineItem.price) !== null && _75 !== void 0 ? _75 : 0) * ((_76 = lineItem === null || lineItem === void 0 ? void 0 : lineItem.quantity) !== null && _76 !== void 0 ? _76 : 1), value: ((_77 = lineItem === null || lineItem === void 0 ? void 0 : lineItem.price) !== null && _77 !== void 0 ? _77 : 0) * ((_78 = lineItem === null || lineItem === void 0 ? void 0 : lineItem.quantity) !== null && _78 !== void 0 ? _78 : 1) });
|
|
375
377
|
if (typeof formatter === 'function') {
|
|
376
378
|
const formattedPayload = formatter(props, payload);
|
|
377
379
|
return this.track('Product Removed', formattedPayload, options);
|
|
@@ -379,14 +381,14 @@ export class ChordAnalytics {
|
|
|
379
381
|
return this.track('Product Removed', payload, options);
|
|
380
382
|
});
|
|
381
383
|
this.trackProductViewed = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
382
|
-
var
|
|
383
|
-
const formatter = (
|
|
384
|
-
const product = (
|
|
385
|
-
const cart = (
|
|
384
|
+
var _79, _80, _81, _82, _83, _84, _85, _86, _87, _88, _89, _90, _91;
|
|
385
|
+
const formatter = (_81 = (_80 = (_79 = this.options) === null || _79 === void 0 ? void 0 : _79.formatters) === null || _80 === void 0 ? void 0 : _80.events) === null || _81 === void 0 ? void 0 : _81.productViewed;
|
|
386
|
+
const product = (_85 = (_84 = (_83 = (_82 = this.options) === null || _82 === void 0 ? void 0 : _82.formatters) === null || _83 === void 0 ? void 0 : _83.objects) === null || _84 === void 0 ? void 0 : _84.product) === null || _85 === void 0 ? void 0 : _85.call(_84, props === null || props === void 0 ? void 0 : props.product);
|
|
387
|
+
const cart = (_89 = (_88 = (_87 = (_86 = this.options) === null || _86 === void 0 ? void 0 : _86.formatters) === null || _87 === void 0 ? void 0 : _87.objects) === null || _88 === void 0 ? void 0 : _88.cart) === null || _89 === void 0 ? void 0 : _89.call(_88, {
|
|
386
388
|
cart: props === null || props === void 0 ? void 0 : props.cart,
|
|
387
389
|
});
|
|
388
|
-
const quantity = ((
|
|
389
|
-
const payload = Object.assign(Object.assign({}, product), { cart_id: cart.cart_id, currency: cart.currency, products: [Object.assign(Object.assign({}, product), { quantity })], value: product.price * (((
|
|
390
|
+
const quantity = ((_90 = props === null || props === void 0 ? void 0 : props.product) === null || _90 === void 0 ? void 0 : _90.quantity) || 1;
|
|
391
|
+
const payload = Object.assign(Object.assign({}, product), { cart_id: cart.cart_id, currency: cart.currency, products: [Object.assign(Object.assign({}, product), { quantity })], value: product.price * (((_91 = props === null || props === void 0 ? void 0 : props.product) === null || _91 === void 0 ? void 0 : _91.quantity) || 1) });
|
|
390
392
|
if (typeof formatter === 'function') {
|
|
391
393
|
const formattedPayload = formatter(props, payload);
|
|
392
394
|
return this.track('Product Viewed', formattedPayload, options);
|
|
@@ -394,12 +396,12 @@ export class ChordAnalytics {
|
|
|
394
396
|
return this.track('Product Viewed', payload, options);
|
|
395
397
|
});
|
|
396
398
|
this.trackProductsSearched = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
397
|
-
var
|
|
398
|
-
const formatter = (
|
|
399
|
+
var _92, _93, _94, _95;
|
|
400
|
+
const formatter = (_94 = (_93 = (_92 = this.options) === null || _92 === void 0 ? void 0 : _92.formatters) === null || _93 === void 0 ? void 0 : _93.events) === null || _94 === void 0 ? void 0 : _94.productsSearched;
|
|
399
401
|
const payload = {
|
|
400
402
|
currency: props === null || props === void 0 ? void 0 : props.currency,
|
|
401
403
|
price: typeof (props === null || props === void 0 ? void 0 : props.price) !== 'undefined' ? Number(props === null || props === void 0 ? void 0 : props.price) : undefined,
|
|
402
|
-
product_id: (
|
|
404
|
+
product_id: (_95 = props === null || props === void 0 ? void 0 : props.productId) === null || _95 === void 0 ? void 0 : _95.toString(),
|
|
403
405
|
quantity: props === null || props === void 0 ? void 0 : props.quantity,
|
|
404
406
|
query: props === null || props === void 0 ? void 0 : props.query,
|
|
405
407
|
};
|
|
@@ -410,8 +412,8 @@ export class ChordAnalytics {
|
|
|
410
412
|
return this.track('Products Searched', payload, options);
|
|
411
413
|
});
|
|
412
414
|
this.trackSignedIn = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
413
|
-
var
|
|
414
|
-
const formatter = (
|
|
415
|
+
var _96, _97, _98;
|
|
416
|
+
const formatter = (_98 = (_97 = (_96 = this.options) === null || _96 === void 0 ? void 0 : _96.formatters) === null || _97 === void 0 ? void 0 : _97.events) === null || _98 === void 0 ? void 0 : _98.signedIn;
|
|
415
417
|
const payload = {
|
|
416
418
|
email: props === null || props === void 0 ? void 0 : props.email,
|
|
417
419
|
method: props === null || props === void 0 ? void 0 : props.method,
|
|
@@ -423,8 +425,8 @@ export class ChordAnalytics {
|
|
|
423
425
|
return this.track('Signed In', payload, options);
|
|
424
426
|
});
|
|
425
427
|
this.trackSignedOut = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
426
|
-
var
|
|
427
|
-
const formatter = (
|
|
428
|
+
var _99, _100, _101;
|
|
429
|
+
const formatter = (_101 = (_100 = (_99 = this.options) === null || _99 === void 0 ? void 0 : _99.formatters) === null || _100 === void 0 ? void 0 : _100.events) === null || _101 === void 0 ? void 0 : _101.signedOut;
|
|
428
430
|
const payload = {
|
|
429
431
|
email: props === null || props === void 0 ? void 0 : props.email,
|
|
430
432
|
};
|
|
@@ -435,8 +437,8 @@ export class ChordAnalytics {
|
|
|
435
437
|
return this.track('Signed Out', payload, options);
|
|
436
438
|
});
|
|
437
439
|
this.trackSignedUp = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
438
|
-
var
|
|
439
|
-
const formatter = (
|
|
440
|
+
var _102, _103, _104;
|
|
441
|
+
const formatter = (_104 = (_103 = (_102 = this.options) === null || _102 === void 0 ? void 0 : _102.formatters) === null || _103 === void 0 ? void 0 : _103.events) === null || _104 === void 0 ? void 0 : _104.signedUp;
|
|
440
442
|
const payload = {
|
|
441
443
|
email: props === null || props === void 0 ? void 0 : props.email,
|
|
442
444
|
method: props === null || props === void 0 ? void 0 : props.method,
|
|
@@ -448,8 +450,8 @@ export class ChordAnalytics {
|
|
|
448
450
|
return this.track('Signed Up', payload, options);
|
|
449
451
|
});
|
|
450
452
|
this.trackLoginStarted = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
451
|
-
var
|
|
452
|
-
const formatter = (
|
|
453
|
+
var _105, _106, _107;
|
|
454
|
+
const formatter = (_107 = (_106 = (_105 = this.options) === null || _105 === void 0 ? void 0 : _105.formatters) === null || _106 === void 0 ? void 0 : _106.events) === null || _107 === void 0 ? void 0 : _107.loginStarted;
|
|
453
455
|
const payload = {
|
|
454
456
|
email: props === null || props === void 0 ? void 0 : props.email,
|
|
455
457
|
};
|
|
@@ -460,8 +462,8 @@ export class ChordAnalytics {
|
|
|
460
462
|
return this.track('Login Started', payload, options);
|
|
461
463
|
});
|
|
462
464
|
this.trackSubscriptionCancelled = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
463
|
-
var
|
|
464
|
-
const formatter = (
|
|
465
|
+
var _108, _109, _110, _111;
|
|
466
|
+
const formatter = (_110 = (_109 = (_108 = this.options) === null || _108 === void 0 ? void 0 : _108.formatters) === null || _109 === void 0 ? void 0 : _109.events) === null || _110 === void 0 ? void 0 : _110.subscriptionCancelled;
|
|
465
467
|
const payload = {
|
|
466
468
|
actionable_date: props === null || props === void 0 ? void 0 : props.actionableDate,
|
|
467
469
|
address: props === null || props === void 0 ? void 0 : props.address,
|
|
@@ -470,7 +472,7 @@ export class ChordAnalytics {
|
|
|
470
472
|
end_date: props === null || props === void 0 ? void 0 : props.endDate,
|
|
471
473
|
interval_length: props === null || props === void 0 ? void 0 : props.intervalLength,
|
|
472
474
|
interval_units: props === null || props === void 0 ? void 0 : props.intervalUnits,
|
|
473
|
-
products: (
|
|
475
|
+
products: (_111 = props === null || props === void 0 ? void 0 : props.products) === null || _111 === void 0 ? void 0 : _111.map((p, i) => {
|
|
474
476
|
var _a, _b, _c, _d;
|
|
475
477
|
return (_d = (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.formatters) === null || _b === void 0 ? void 0 : _b.objects) === null || _c === void 0 ? void 0 : _c.product) === null || _d === void 0 ? void 0 : _d.call(_c, Object.assign(Object.assign({}, p), { position: i + 1 }));
|
|
476
478
|
}),
|
|
@@ -485,8 +487,8 @@ export class ChordAnalytics {
|
|
|
485
487
|
return this.track('Subscription Cancelled', payload, options);
|
|
486
488
|
});
|
|
487
489
|
this.trackNavigationClicked = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
488
|
-
var
|
|
489
|
-
const formatter = (
|
|
490
|
+
var _112, _113, _114;
|
|
491
|
+
const formatter = (_114 = (_113 = (_112 = this.options) === null || _112 === void 0 ? void 0 : _112.formatters) === null || _113 === void 0 ? void 0 : _113.events) === null || _114 === void 0 ? void 0 : _114.navigationClicked;
|
|
490
492
|
const payload = {
|
|
491
493
|
category: props === null || props === void 0 ? void 0 : props.category,
|
|
492
494
|
label: props === null || props === void 0 ? void 0 : props.label,
|
|
@@ -501,15 +503,15 @@ export class ChordAnalytics {
|
|
|
501
503
|
return this.track('Navigation Clicked', payload, options);
|
|
502
504
|
});
|
|
503
505
|
this.trackPaymentInfoEntered = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
504
|
-
var
|
|
505
|
-
const formatter = (
|
|
506
|
+
var _115, _116, _117, _118;
|
|
507
|
+
const formatter = (_117 = (_116 = (_115 = this.options) === null || _115 === void 0 ? void 0 : _115.formatters) === null || _116 === void 0 ? void 0 : _116.events) === null || _117 === void 0 ? void 0 : _117.paymentInfoEntered;
|
|
506
508
|
const payload = {
|
|
507
509
|
checkout_id: props === null || props === void 0 ? void 0 : props.checkoutId,
|
|
508
510
|
coupon: props === null || props === void 0 ? void 0 : props.coupon,
|
|
509
511
|
currency: props === null || props === void 0 ? void 0 : props.currency,
|
|
510
512
|
order_id: props === null || props === void 0 ? void 0 : props.orderId,
|
|
511
513
|
payment_method: props === null || props === void 0 ? void 0 : props.paymentMethod,
|
|
512
|
-
products: (
|
|
514
|
+
products: (_118 = props === null || props === void 0 ? void 0 : props.products) === null || _118 === void 0 ? void 0 : _118.map((p, i) => {
|
|
513
515
|
var _a, _b, _c, _d;
|
|
514
516
|
return (_d = (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.formatters) === null || _b === void 0 ? void 0 : _b.objects) === null || _c === void 0 ? void 0 : _c.product) === null || _d === void 0 ? void 0 : _d.call(_c, Object.assign(Object.assign({}, p), { position: i + 1 }));
|
|
515
517
|
}),
|
|
@@ -526,8 +528,13 @@ export class ChordAnalytics {
|
|
|
526
528
|
const defaults = {
|
|
527
529
|
debug: false,
|
|
528
530
|
enableLogging: true,
|
|
531
|
+
namespace: 'chord',
|
|
529
532
|
stripNull: true,
|
|
530
533
|
};
|
|
531
534
|
this.options = Object.assign(Object.assign({}, defaults), options);
|
|
535
|
+
if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.cdpDomain) && ((_b = this.options) === null || _b === void 0 ? void 0 : _b.cdpWriteKey) && window) {
|
|
536
|
+
window[this.options.namespace] = (window === null || window === void 0 ? void 0 : window[this.options.namespace]) || this;
|
|
537
|
+
addCdpSnippet(this.options);
|
|
538
|
+
}
|
|
532
539
|
}
|
|
533
540
|
}
|
package/dist/types/client.d.ts
CHANGED
|
@@ -11,7 +11,7 @@ export interface ObjectTypes {
|
|
|
11
11
|
LineItem: any;
|
|
12
12
|
Product: any;
|
|
13
13
|
}
|
|
14
|
-
export type AnyAnalytics = AnalyticsSnippet | Analytics | AnalyticsBrowser;
|
|
14
|
+
export type AnyAnalytics = AnalyticsSnippet | Analytics | AnalyticsBrowser | ChordAnalyticsQueue;
|
|
15
15
|
export type AnyOptions = Options;
|
|
16
16
|
export type AnyProduct = {
|
|
17
17
|
[key: string]: unknown;
|
|
@@ -28,9 +28,12 @@ export type AnyLineItem = {
|
|
|
28
28
|
};
|
|
29
29
|
export interface ChordAnalyticsOptions<T extends ObjectTypes = ObjectTypes> {
|
|
30
30
|
cdp?: AnyAnalytics | (() => AnyAnalytics);
|
|
31
|
+
cdpDomain?: string;
|
|
32
|
+
cdpWriteKey?: string;
|
|
31
33
|
debug?: boolean;
|
|
32
34
|
enableLogging?: boolean;
|
|
33
35
|
formatters: ChordAnalyticsFormatters<T>;
|
|
36
|
+
namespace?: string;
|
|
34
37
|
stripNull?: boolean;
|
|
35
38
|
metadata: EventMetadata;
|
|
36
39
|
}
|
|
@@ -62,3 +65,9 @@ export interface versionMetadata {
|
|
|
62
65
|
export interface storeMetadata {
|
|
63
66
|
domain: string;
|
|
64
67
|
}
|
|
68
|
+
export type ChordAnalyticsQueue = {
|
|
69
|
+
track: (...args: any[]) => void;
|
|
70
|
+
identify: (...args: any[]) => void;
|
|
71
|
+
page: (...args: any[]) => void;
|
|
72
|
+
reset: (...args: any[]) => void;
|
|
73
|
+
};
|
package/package.json
CHANGED