@chordcommerce/analytics 1.21.0 → 1.22.0-beta.1
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 +65 -0
- package/dist/cjs/client/identifiers.d.ts +51 -0
- package/dist/cjs/client/identifiers.js +193 -0
- package/dist/cjs/client/index.d.ts +31 -0
- package/dist/cjs/client/index.js +111 -1
- package/dist/cjs/index.d.ts +1 -0
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/types/client.d.ts +12 -0
- package/dist/client/identifiers.d.ts +51 -0
- package/dist/client/identifiers.js +131 -0
- package/dist/client/index.d.ts +31 -0
- package/dist/client/index.js +186 -83
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/types/client.d.ts +12 -0
- package/package.json +1 -1
package/dist/client/index.js
CHANGED
|
@@ -11,6 +11,7 @@ import { addCdpSnippet, cdpQueue } from './cdp.js';
|
|
|
11
11
|
import { addCdpConsent } from './consent/index.js';
|
|
12
12
|
import { eventSchemas } from '../validators/index.js';
|
|
13
13
|
import { pruneNullValues } from '../utils.js';
|
|
14
|
+
import { syncIdentifiersToCart as syncIdentifiers, } from './identifiers.js';
|
|
14
15
|
const DEBUG_MODE_STORAGE_KEY = 'chordcommerce/analytics/debug';
|
|
15
16
|
const CONSENT_QUEUE_STORAGE_KEY = 'chordcommerce/analytics/consent-queue';
|
|
16
17
|
const CONSENT_QUEUE_TTL_MS = 5 * 60 * 1000; // 5 minutes
|
|
@@ -18,7 +19,7 @@ const CONSENT_QUEUE_MAX_SIZE_BYTES = 100 * 1024; // 100KB max queue size
|
|
|
18
19
|
const CONSENT_QUEUE_MAX_EVENTS = 50; // Max number of events to queue
|
|
19
20
|
export class ChordAnalytics {
|
|
20
21
|
constructor(options) {
|
|
21
|
-
var _a, _b, _c;
|
|
22
|
+
var _a, _b, _c, _d, _e;
|
|
22
23
|
/**
|
|
23
24
|
* Allows snippet.js to detect whether this library has been initialized yet.
|
|
24
25
|
*/
|
|
@@ -585,7 +586,7 @@ export class ChordAnalytics {
|
|
|
585
586
|
});
|
|
586
587
|
});
|
|
587
588
|
this.reset = () => __awaiter(this, void 0, void 0, function* () {
|
|
588
|
-
var
|
|
589
|
+
var _f;
|
|
589
590
|
try {
|
|
590
591
|
this.resetInProgress = true;
|
|
591
592
|
const a = this.ccdp();
|
|
@@ -602,12 +603,12 @@ export class ChordAnalytics {
|
|
|
602
603
|
// eslint-disable-next-line
|
|
603
604
|
yield new Promise((resolve) => setTimeout(resolve, 10));
|
|
604
605
|
try {
|
|
605
|
-
const userState = ((
|
|
606
|
+
const userState = ((_f = a === null || a === void 0 ? void 0 : a.user) === null || _f === void 0 ? void 0 : _f.call(a)) || {};
|
|
606
607
|
if (userState.userId === null || userState.userId === undefined) {
|
|
607
608
|
break;
|
|
608
609
|
}
|
|
609
610
|
}
|
|
610
|
-
catch (
|
|
611
|
+
catch (_g) {
|
|
611
612
|
break;
|
|
612
613
|
}
|
|
613
614
|
attempts++;
|
|
@@ -620,10 +621,104 @@ export class ChordAnalytics {
|
|
|
620
621
|
this.resetInProgress = false;
|
|
621
622
|
}
|
|
622
623
|
});
|
|
624
|
+
/**
|
|
625
|
+
* Handler for postMessage events from the Shopify Web Pixel sandbox.
|
|
626
|
+
* Bound to the instance for proper `this` context and cleanup.
|
|
627
|
+
*/
|
|
628
|
+
this.webPixelMessageHandler = null;
|
|
629
|
+
/**
|
|
630
|
+
* Set up a listener for postMessage events from the Shopify Web Pixel sandbox.
|
|
631
|
+
* This allows the lightweight web pixel (running in Shopify's sandboxed iframe)
|
|
632
|
+
* to forward analytics events to this ChordAnalytics instance on the storefront.
|
|
633
|
+
*
|
|
634
|
+
* The lightweight web pixel sends messages in the format:
|
|
635
|
+
* - { source: 'chord-web-pixel', type: 'track', payload: [eventName, properties] }
|
|
636
|
+
* - { source: 'chord-web-pixel', type: 'identify', payload: [userId, traits] }
|
|
637
|
+
* - { source: 'chord-web-pixel', type: 'page', payload: [properties] }
|
|
638
|
+
*
|
|
639
|
+
* @returns A cleanup function to remove the listener
|
|
640
|
+
*/
|
|
641
|
+
this.setupWebPixelListener = () => {
|
|
642
|
+
if (typeof window === 'undefined') {
|
|
643
|
+
this.logger('[Chord Analytics]: setupWebPixelListener called in non-browser environment');
|
|
644
|
+
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
645
|
+
return () => { };
|
|
646
|
+
}
|
|
647
|
+
// Remove existing listener if one exists
|
|
648
|
+
if (this.webPixelMessageHandler) {
|
|
649
|
+
window.removeEventListener('message', this.webPixelMessageHandler);
|
|
650
|
+
}
|
|
651
|
+
this.webPixelMessageHandler = (event) => {
|
|
652
|
+
// Validate message structure
|
|
653
|
+
if (!event.data || typeof event.data !== 'object')
|
|
654
|
+
return;
|
|
655
|
+
if (event.data.source !== 'chord-web-pixel')
|
|
656
|
+
return;
|
|
657
|
+
const message = event.data;
|
|
658
|
+
if (this.options.enableLogging && this.options.debug) {
|
|
659
|
+
// eslint-disable-next-line no-console
|
|
660
|
+
console.log('[Chord Analytics DEBUG]: Received web pixel message:', message.type, message.payload);
|
|
661
|
+
}
|
|
662
|
+
try {
|
|
663
|
+
switch (message.type) {
|
|
664
|
+
case 'track': {
|
|
665
|
+
const [eventName, properties] = message.payload;
|
|
666
|
+
if (eventName) {
|
|
667
|
+
this.track(eventName, properties);
|
|
668
|
+
}
|
|
669
|
+
break;
|
|
670
|
+
}
|
|
671
|
+
case 'identify': {
|
|
672
|
+
const [userId, traits] = message.payload;
|
|
673
|
+
this.identify(userId, traits);
|
|
674
|
+
break;
|
|
675
|
+
}
|
|
676
|
+
case 'page': {
|
|
677
|
+
const [properties] = message.payload;
|
|
678
|
+
this.page(properties);
|
|
679
|
+
break;
|
|
680
|
+
}
|
|
681
|
+
default:
|
|
682
|
+
this.logger(`[Chord Analytics]: Unknown web pixel message type: ${message.type}`);
|
|
683
|
+
}
|
|
684
|
+
}
|
|
685
|
+
catch (error) {
|
|
686
|
+
this.logger('[Chord Analytics]: Error processing web pixel message:', error);
|
|
687
|
+
}
|
|
688
|
+
};
|
|
689
|
+
window.addEventListener('message', this.webPixelMessageHandler);
|
|
690
|
+
this.logger('[Chord Analytics]: Web pixel listener initialized');
|
|
691
|
+
// Return cleanup function
|
|
692
|
+
return () => {
|
|
693
|
+
if (this.webPixelMessageHandler) {
|
|
694
|
+
window.removeEventListener('message', this.webPixelMessageHandler);
|
|
695
|
+
this.webPixelMessageHandler = null;
|
|
696
|
+
this.logger('[Chord Analytics]: Web pixel listener removed');
|
|
697
|
+
}
|
|
698
|
+
};
|
|
699
|
+
};
|
|
700
|
+
/**
|
|
701
|
+
* Sync CDP anonymous ID and Google Client ID to Shopify cart attributes.
|
|
702
|
+
* This enables server-side events (webhooks) to correlate with client-side tracking.
|
|
703
|
+
*
|
|
704
|
+
* By default, syncs:
|
|
705
|
+
* - `_cdpAnonymousId`: from the `__eventn_id` cookie (Chord/Jitsu CDP)
|
|
706
|
+
* - `_googleClientId`: from the `_ga` cookie (Google Analytics)
|
|
707
|
+
*
|
|
708
|
+
* @param options - Optional configuration for the sync
|
|
709
|
+
* @returns The updated cart, or undefined if no update was needed or an error occurred
|
|
710
|
+
*/
|
|
711
|
+
this.syncIdentifiersToCart = (options) => __awaiter(this, void 0, void 0, function* () {
|
|
712
|
+
const result = yield syncIdentifiers(options);
|
|
713
|
+
if (result) {
|
|
714
|
+
this.logger('[Chord Analytics]: Identifiers synced to cart');
|
|
715
|
+
}
|
|
716
|
+
return result;
|
|
717
|
+
});
|
|
623
718
|
// TODO: Add support for props.products
|
|
624
719
|
this.trackCartViewed = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
625
|
-
var
|
|
626
|
-
const cart = (
|
|
720
|
+
var _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
721
|
+
const cart = (_l = (_k = (_j = (_h = this.options) === null || _h === void 0 ? void 0 : _h.formatters) === null || _j === void 0 ? void 0 : _j.objects) === null || _k === void 0 ? void 0 : _k.cart) === null || _l === void 0 ? void 0 : _l.call(_k, {
|
|
627
722
|
cart: props === null || props === void 0 ? void 0 : props.cart,
|
|
628
723
|
});
|
|
629
724
|
const payload = {
|
|
@@ -632,17 +727,17 @@ export class ChordAnalytics {
|
|
|
632
727
|
products: cart === null || cart === void 0 ? void 0 : cart.products,
|
|
633
728
|
value: cart === null || cart === void 0 ? void 0 : cart.value,
|
|
634
729
|
};
|
|
635
|
-
if ((
|
|
636
|
-
const formattedPayload = (
|
|
730
|
+
if ((_p = (_o = (_m = this.options) === null || _m === void 0 ? void 0 : _m.formatters) === null || _o === void 0 ? void 0 : _o.events) === null || _p === void 0 ? void 0 : _p.cartViewed) {
|
|
731
|
+
const formattedPayload = (_s = (_r = (_q = this.options) === null || _q === void 0 ? void 0 : _q.formatters) === null || _r === void 0 ? void 0 : _r.events) === null || _s === void 0 ? void 0 : _s.cartViewed(props, payload);
|
|
637
732
|
return this.track('Cart Viewed', formattedPayload, options);
|
|
638
733
|
}
|
|
639
734
|
return this.track('Cart Viewed', payload, options);
|
|
640
735
|
});
|
|
641
736
|
// TODO: Add support for props.products
|
|
642
737
|
this.trackCheckoutStarted = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
643
|
-
var
|
|
644
|
-
const formatter = (
|
|
645
|
-
const checkout = (
|
|
738
|
+
var _t, _u, _v, _w, _x, _y, _z;
|
|
739
|
+
const formatter = (_v = (_u = (_t = this.options) === null || _t === void 0 ? void 0 : _t.formatters) === null || _u === void 0 ? void 0 : _u.events) === null || _v === void 0 ? void 0 : _v.checkoutStarted;
|
|
740
|
+
const checkout = (_z = (_y = (_x = (_w = this.options) === null || _w === void 0 ? void 0 : _w.formatters) === null || _x === void 0 ? void 0 : _x.objects) === null || _y === void 0 ? void 0 : _y.checkout) === null || _z === void 0 ? void 0 : _z.call(_y, {
|
|
646
741
|
checkout: props === null || props === void 0 ? void 0 : props.checkout,
|
|
647
742
|
});
|
|
648
743
|
const payload = checkout;
|
|
@@ -653,8 +748,8 @@ export class ChordAnalytics {
|
|
|
653
748
|
return this.track('Checkout Started', payload, options);
|
|
654
749
|
});
|
|
655
750
|
this.trackCheckoutStepCompleted = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
656
|
-
var
|
|
657
|
-
const formatter = (
|
|
751
|
+
var _0, _1, _2;
|
|
752
|
+
const formatter = (_2 = (_1 = (_0 = this.options) === null || _0 === void 0 ? void 0 : _0.formatters) === null || _1 === void 0 ? void 0 : _1.events) === null || _2 === void 0 ? void 0 : _2.checkoutStepCompleted;
|
|
658
753
|
const payload = {
|
|
659
754
|
checkout_id: props === null || props === void 0 ? void 0 : props.checkoutId,
|
|
660
755
|
payment_method: props === null || props === void 0 ? void 0 : props.paymentMethod,
|
|
@@ -668,8 +763,8 @@ export class ChordAnalytics {
|
|
|
668
763
|
return this.track('Checkout Step Completed', payload, options);
|
|
669
764
|
});
|
|
670
765
|
this.trackCheckoutStepViewed = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
671
|
-
var
|
|
672
|
-
const formatter = (
|
|
766
|
+
var _3, _4, _5;
|
|
767
|
+
const formatter = (_5 = (_4 = (_3 = this.options) === null || _3 === void 0 ? void 0 : _3.formatters) === null || _4 === void 0 ? void 0 : _4.events) === null || _5 === void 0 ? void 0 : _5.checkoutStepViewed;
|
|
673
768
|
const payload = {
|
|
674
769
|
checkout_id: props === null || props === void 0 ? void 0 : props.checkoutId,
|
|
675
770
|
payment_method: props === null || props === void 0 ? void 0 : props.paymentMethod,
|
|
@@ -683,8 +778,8 @@ export class ChordAnalytics {
|
|
|
683
778
|
return this.track('Checkout Step Viewed', payload, options);
|
|
684
779
|
});
|
|
685
780
|
this.trackCouponApplied = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
686
|
-
var
|
|
687
|
-
const formatter = (
|
|
781
|
+
var _6, _7, _8;
|
|
782
|
+
const formatter = (_8 = (_7 = (_6 = this.options) === null || _6 === void 0 ? void 0 : _6.formatters) === null || _7 === void 0 ? void 0 : _7.events) === null || _8 === void 0 ? void 0 : _8.couponApplied;
|
|
688
783
|
const payload = {
|
|
689
784
|
cart_id: props === null || props === void 0 ? void 0 : props.cartId,
|
|
690
785
|
coupon_id: props === null || props === void 0 ? void 0 : props.couponId,
|
|
@@ -699,8 +794,8 @@ export class ChordAnalytics {
|
|
|
699
794
|
return this.track('Coupon Applied', payload, options);
|
|
700
795
|
});
|
|
701
796
|
this.trackCouponDenied = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
702
|
-
var
|
|
703
|
-
const formatter = (
|
|
797
|
+
var _9, _10, _11;
|
|
798
|
+
const formatter = (_11 = (_10 = (_9 = this.options) === null || _9 === void 0 ? void 0 : _9.formatters) === null || _10 === void 0 ? void 0 : _10.events) === null || _11 === void 0 ? void 0 : _11.couponDenied;
|
|
704
799
|
const payload = {
|
|
705
800
|
cart_id: props === null || props === void 0 ? void 0 : props.cartId,
|
|
706
801
|
coupon_id: props === null || props === void 0 ? void 0 : props.couponId,
|
|
@@ -715,8 +810,8 @@ export class ChordAnalytics {
|
|
|
715
810
|
return this.track('Coupon Denied', payload, options);
|
|
716
811
|
});
|
|
717
812
|
this.trackCouponEntered = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
718
|
-
var
|
|
719
|
-
const formatter = (
|
|
813
|
+
var _12, _13, _14;
|
|
814
|
+
const formatter = (_14 = (_13 = (_12 = this.options) === null || _12 === void 0 ? void 0 : _12.formatters) === null || _13 === void 0 ? void 0 : _13.events) === null || _14 === void 0 ? void 0 : _14.couponEntered;
|
|
720
815
|
const payload = {
|
|
721
816
|
cart_id: props === null || props === void 0 ? void 0 : props.cartId,
|
|
722
817
|
coupon_id: props === null || props === void 0 ? void 0 : props.couponId,
|
|
@@ -730,8 +825,8 @@ export class ChordAnalytics {
|
|
|
730
825
|
return this.track('Coupon Entered', payload, options);
|
|
731
826
|
});
|
|
732
827
|
this.trackCouponRemoved = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
733
|
-
var
|
|
734
|
-
const formatter = (
|
|
828
|
+
var _15, _16, _17;
|
|
829
|
+
const formatter = (_17 = (_16 = (_15 = this.options) === null || _15 === void 0 ? void 0 : _15.formatters) === null || _16 === void 0 ? void 0 : _16.events) === null || _17 === void 0 ? void 0 : _17.couponRemoved;
|
|
735
830
|
const payload = {
|
|
736
831
|
cart_id: props === null || props === void 0 ? void 0 : props.cartId,
|
|
737
832
|
coupon_id: props === null || props === void 0 ? void 0 : props.couponId,
|
|
@@ -746,8 +841,8 @@ export class ChordAnalytics {
|
|
|
746
841
|
return this.track('Coupon Removed', payload, options);
|
|
747
842
|
});
|
|
748
843
|
this.trackEmailCaptured = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
749
|
-
var
|
|
750
|
-
const formatter = (
|
|
844
|
+
var _18, _19, _20;
|
|
845
|
+
const formatter = (_20 = (_19 = (_18 = this.options) === null || _18 === void 0 ? void 0 : _18.formatters) === null || _19 === void 0 ? void 0 : _19.events) === null || _20 === void 0 ? void 0 : _20.emailCaptured;
|
|
751
846
|
const payload = {
|
|
752
847
|
email: props === null || props === void 0 ? void 0 : props.email,
|
|
753
848
|
placement_component: props === null || props === void 0 ? void 0 : props.placementComponent,
|
|
@@ -760,13 +855,13 @@ export class ChordAnalytics {
|
|
|
760
855
|
return this.track('Email Captured', payload, options);
|
|
761
856
|
});
|
|
762
857
|
this.trackProductAdded = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
763
|
-
var
|
|
764
|
-
const formatter = (
|
|
765
|
-
const product = (
|
|
766
|
-
const cart = (
|
|
858
|
+
var _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32;
|
|
859
|
+
const formatter = (_23 = (_22 = (_21 = this.options) === null || _21 === void 0 ? void 0 : _21.formatters) === null || _22 === void 0 ? void 0 : _22.events) === null || _23 === void 0 ? void 0 : _23.productAdded;
|
|
860
|
+
const product = (_27 = (_26 = (_25 = (_24 = this.options) === null || _24 === void 0 ? void 0 : _24.formatters) === null || _25 === void 0 ? void 0 : _25.objects) === null || _26 === void 0 ? void 0 : _26.product) === null || _27 === void 0 ? void 0 : _27.call(_26, props === null || props === void 0 ? void 0 : props.product);
|
|
861
|
+
const cart = (_31 = (_30 = (_29 = (_28 = this.options) === null || _28 === void 0 ? void 0 : _28.formatters) === null || _29 === void 0 ? void 0 : _29.objects) === null || _30 === void 0 ? void 0 : _30.cart) === null || _31 === void 0 ? void 0 : _31.call(_30, {
|
|
767
862
|
cart: props === null || props === void 0 ? void 0 : props.cart,
|
|
768
863
|
});
|
|
769
|
-
const quantity = ((
|
|
864
|
+
const quantity = ((_32 = props === null || props === void 0 ? void 0 : props.product) === null || _32 === void 0 ? void 0 : _32.quantity) || 1;
|
|
770
865
|
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) });
|
|
771
866
|
if (typeof formatter === 'function') {
|
|
772
867
|
const formattedPayload = formatter(props, payload);
|
|
@@ -775,14 +870,14 @@ export class ChordAnalytics {
|
|
|
775
870
|
return this.track('Product Added', payload, options);
|
|
776
871
|
});
|
|
777
872
|
this.trackProductClicked = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
778
|
-
var
|
|
779
|
-
const formatter = (
|
|
780
|
-
const product = (
|
|
781
|
-
const cart = (
|
|
873
|
+
var _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45;
|
|
874
|
+
const formatter = (_35 = (_34 = (_33 = this.options) === null || _33 === void 0 ? void 0 : _33.formatters) === null || _34 === void 0 ? void 0 : _34.events) === null || _35 === void 0 ? void 0 : _35.productClicked;
|
|
875
|
+
const product = (_39 = (_38 = (_37 = (_36 = this.options) === null || _36 === void 0 ? void 0 : _36.formatters) === null || _37 === void 0 ? void 0 : _37.objects) === null || _38 === void 0 ? void 0 : _38.product) === null || _39 === void 0 ? void 0 : _39.call(_38, props === null || props === void 0 ? void 0 : props.product);
|
|
876
|
+
const cart = (_43 = (_42 = (_41 = (_40 = this.options) === null || _40 === void 0 ? void 0 : _40.formatters) === null || _41 === void 0 ? void 0 : _41.objects) === null || _42 === void 0 ? void 0 : _42.cart) === null || _43 === void 0 ? void 0 : _43.call(_42, {
|
|
782
877
|
cart: props === null || props === void 0 ? void 0 : props.cart,
|
|
783
878
|
});
|
|
784
|
-
const quantity = ((
|
|
785
|
-
const payload = Object.assign(Object.assign({}, product), { cart_id: cart.cart_id, currency: cart.currency, item_list_id: (
|
|
879
|
+
const quantity = ((_44 = props === null || props === void 0 ? void 0 : props.product) === null || _44 === void 0 ? void 0 : _44.quantity) || 1;
|
|
880
|
+
const payload = Object.assign(Object.assign({}, product), { cart_id: cart.cart_id, currency: cart.currency, item_list_id: (_45 = props === null || props === void 0 ? void 0 : props.listId) === null || _45 === void 0 ? void 0 : _45.toString(), item_list_name: props === null || props === void 0 ? void 0 : props.listName, products: [Object.assign(Object.assign({}, product), { quantity })] });
|
|
786
881
|
if (typeof formatter === 'function') {
|
|
787
882
|
const formattedPayload = formatter(props, payload);
|
|
788
883
|
return this.track('Product Clicked', formattedPayload, options);
|
|
@@ -790,13 +885,13 @@ export class ChordAnalytics {
|
|
|
790
885
|
return this.track('Product Clicked', payload, options);
|
|
791
886
|
});
|
|
792
887
|
this.trackVariantClicked = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
793
|
-
var
|
|
794
|
-
const formatter = (
|
|
795
|
-
const product = (
|
|
796
|
-
const cart = (
|
|
888
|
+
var _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57;
|
|
889
|
+
const formatter = (_48 = (_47 = (_46 = this.options) === null || _46 === void 0 ? void 0 : _46.formatters) === null || _47 === void 0 ? void 0 : _47.events) === null || _48 === void 0 ? void 0 : _48.variantClicked;
|
|
890
|
+
const product = (_52 = (_51 = (_50 = (_49 = this.options) === null || _49 === void 0 ? void 0 : _49.formatters) === null || _50 === void 0 ? void 0 : _50.objects) === null || _51 === void 0 ? void 0 : _51.product) === null || _52 === void 0 ? void 0 : _52.call(_51, props === null || props === void 0 ? void 0 : props.product);
|
|
891
|
+
const cart = (_56 = (_55 = (_54 = (_53 = this.options) === null || _53 === void 0 ? void 0 : _53.formatters) === null || _54 === void 0 ? void 0 : _54.objects) === null || _55 === void 0 ? void 0 : _55.cart) === null || _56 === void 0 ? void 0 : _56.call(_55, {
|
|
797
892
|
cart: props === null || props === void 0 ? void 0 : props.cart,
|
|
798
893
|
});
|
|
799
|
-
const quantity = ((
|
|
894
|
+
const quantity = ((_57 = props === null || props === void 0 ? void 0 : props.product) === null || _57 === void 0 ? void 0 : _57.quantity) || 1;
|
|
800
895
|
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 });
|
|
801
896
|
if (typeof formatter === 'function') {
|
|
802
897
|
const formattedPayload = formatter(props, payload);
|
|
@@ -805,13 +900,13 @@ export class ChordAnalytics {
|
|
|
805
900
|
return this.track('Variant Clicked', payload, options);
|
|
806
901
|
});
|
|
807
902
|
this.trackProductListFiltered = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
808
|
-
var
|
|
809
|
-
const formatter = (
|
|
903
|
+
var _58, _59, _60, _61, _62;
|
|
904
|
+
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.productListFiltered;
|
|
810
905
|
const payload = {
|
|
811
906
|
category: props === null || props === void 0 ? void 0 : props.category,
|
|
812
907
|
filters: props === null || props === void 0 ? void 0 : props.filters,
|
|
813
|
-
list_id: (
|
|
814
|
-
item_list_id: (
|
|
908
|
+
list_id: (_61 = props === null || props === void 0 ? void 0 : props.listId) === null || _61 === void 0 ? void 0 : _61.toString(),
|
|
909
|
+
item_list_id: (_62 = props === null || props === void 0 ? void 0 : props.listId) === null || _62 === void 0 ? void 0 : _62.toString(),
|
|
815
910
|
item_list_name: props === null || props === void 0 ? void 0 : props.listName,
|
|
816
911
|
sorts: props === null || props === void 0 ? void 0 : props.sorts,
|
|
817
912
|
};
|
|
@@ -822,14 +917,14 @@ export class ChordAnalytics {
|
|
|
822
917
|
return this.track('Product List Filtered', payload, options);
|
|
823
918
|
});
|
|
824
919
|
this.trackProductListViewed = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
825
|
-
var
|
|
826
|
-
const formatter = (
|
|
920
|
+
var _63, _64, _65, _66, _67, _68;
|
|
921
|
+
const formatter = (_65 = (_64 = (_63 = this.options) === null || _63 === void 0 ? void 0 : _63.formatters) === null || _64 === void 0 ? void 0 : _64.events) === null || _65 === void 0 ? void 0 : _65.productListViewed;
|
|
827
922
|
const payload = {
|
|
828
923
|
category: props === null || props === void 0 ? void 0 : props.category,
|
|
829
|
-
list_id: (
|
|
830
|
-
item_list_id: (
|
|
924
|
+
list_id: (_66 = props === null || props === void 0 ? void 0 : props.listId) === null || _66 === void 0 ? void 0 : _66.toString(),
|
|
925
|
+
item_list_id: (_67 = props === null || props === void 0 ? void 0 : props.listId) === null || _67 === void 0 ? void 0 : _67.toString(),
|
|
831
926
|
item_list_name: props === null || props === void 0 ? void 0 : props.listName,
|
|
832
|
-
products: (
|
|
927
|
+
products: (_68 = props === null || props === void 0 ? void 0 : props.products) === null || _68 === void 0 ? void 0 : _68.map((p, i) => {
|
|
833
928
|
var _a, _b, _c, _d;
|
|
834
929
|
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 }));
|
|
835
930
|
}),
|
|
@@ -842,8 +937,8 @@ export class ChordAnalytics {
|
|
|
842
937
|
return this.track('Product List Viewed', payload, options);
|
|
843
938
|
});
|
|
844
939
|
this.trackProductRemoved = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
845
|
-
var
|
|
846
|
-
const formatter = (
|
|
940
|
+
var _69, _70, _71, _72, _73, _74, _75, _76, _77, _78, _79, _80, _81, _82, _83;
|
|
941
|
+
const formatter = (_71 = (_70 = (_69 = this.options) === null || _69 === void 0 ? void 0 : _69.formatters) === null || _70 === void 0 ? void 0 : _70.events) === null || _71 === void 0 ? void 0 : _71.productRemoved;
|
|
847
942
|
/*
|
|
848
943
|
const product = this.options?.formatters?.objects?.product?.({
|
|
849
944
|
position: props?.position,
|
|
@@ -852,13 +947,13 @@ export class ChordAnalytics {
|
|
|
852
947
|
variantId: props?.variantId,
|
|
853
948
|
})
|
|
854
949
|
*/
|
|
855
|
-
const lineItem = (
|
|
950
|
+
const lineItem = (_75 = (_74 = (_73 = (_72 = this.options) === null || _72 === void 0 ? void 0 : _72.formatters) === null || _73 === void 0 ? void 0 : _73.objects) === null || _74 === void 0 ? void 0 : _74.lineItem) === null || _75 === void 0 ? void 0 : _75.call(_74, {
|
|
856
951
|
lineItem: props === null || props === void 0 ? void 0 : props.lineItem,
|
|
857
952
|
});
|
|
858
|
-
const cart = (
|
|
953
|
+
const cart = (_79 = (_78 = (_77 = (_76 = this.options) === null || _76 === void 0 ? void 0 : _76.formatters) === null || _77 === void 0 ? void 0 : _77.objects) === null || _78 === void 0 ? void 0 : _78.cart) === null || _79 === void 0 ? void 0 : _79.call(_78, {
|
|
859
954
|
cart: props === null || props === void 0 ? void 0 : props.cart,
|
|
860
955
|
});
|
|
861
|
-
const payload = Object.assign(Object.assign({}, lineItem), { cart_id: cart.cart_id, currency: cart.currency, products: [lineItem], total: ((
|
|
956
|
+
const payload = Object.assign(Object.assign({}, lineItem), { cart_id: cart.cart_id, currency: cart.currency, products: [lineItem], total: ((_80 = lineItem === null || lineItem === void 0 ? void 0 : lineItem.price) !== null && _80 !== void 0 ? _80 : 0) * ((_81 = lineItem === null || lineItem === void 0 ? void 0 : lineItem.quantity) !== null && _81 !== void 0 ? _81 : 1), value: ((_82 = lineItem === null || lineItem === void 0 ? void 0 : lineItem.price) !== null && _82 !== void 0 ? _82 : 0) * ((_83 = lineItem === null || lineItem === void 0 ? void 0 : lineItem.quantity) !== null && _83 !== void 0 ? _83 : 1) });
|
|
862
957
|
if (typeof formatter === 'function') {
|
|
863
958
|
const formattedPayload = formatter(props, payload);
|
|
864
959
|
return this.track('Product Removed', formattedPayload, options);
|
|
@@ -866,14 +961,14 @@ export class ChordAnalytics {
|
|
|
866
961
|
return this.track('Product Removed', payload, options);
|
|
867
962
|
});
|
|
868
963
|
this.trackProductViewed = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
869
|
-
var
|
|
870
|
-
const formatter = (
|
|
871
|
-
const product = (
|
|
872
|
-
const cart = (
|
|
964
|
+
var _84, _85, _86, _87, _88, _89, _90, _91, _92, _93, _94, _95, _96;
|
|
965
|
+
const formatter = (_86 = (_85 = (_84 = this.options) === null || _84 === void 0 ? void 0 : _84.formatters) === null || _85 === void 0 ? void 0 : _85.events) === null || _86 === void 0 ? void 0 : _86.productViewed;
|
|
966
|
+
const product = (_90 = (_89 = (_88 = (_87 = this.options) === null || _87 === void 0 ? void 0 : _87.formatters) === null || _88 === void 0 ? void 0 : _88.objects) === null || _89 === void 0 ? void 0 : _89.product) === null || _90 === void 0 ? void 0 : _90.call(_89, props === null || props === void 0 ? void 0 : props.product);
|
|
967
|
+
const cart = (_94 = (_93 = (_92 = (_91 = this.options) === null || _91 === void 0 ? void 0 : _91.formatters) === null || _92 === void 0 ? void 0 : _92.objects) === null || _93 === void 0 ? void 0 : _93.cart) === null || _94 === void 0 ? void 0 : _94.call(_93, {
|
|
873
968
|
cart: props === null || props === void 0 ? void 0 : props.cart,
|
|
874
969
|
});
|
|
875
|
-
const quantity = ((
|
|
876
|
-
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 * (((
|
|
970
|
+
const quantity = ((_95 = props === null || props === void 0 ? void 0 : props.product) === null || _95 === void 0 ? void 0 : _95.quantity) || 1;
|
|
971
|
+
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 * (((_96 = props === null || props === void 0 ? void 0 : props.product) === null || _96 === void 0 ? void 0 : _96.quantity) || 1) });
|
|
877
972
|
if (typeof formatter === 'function') {
|
|
878
973
|
const formattedPayload = formatter(props, payload);
|
|
879
974
|
return this.track('Product Viewed', formattedPayload, options);
|
|
@@ -881,12 +976,12 @@ export class ChordAnalytics {
|
|
|
881
976
|
return this.track('Product Viewed', payload, options);
|
|
882
977
|
});
|
|
883
978
|
this.trackProductsSearched = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
884
|
-
var
|
|
885
|
-
const formatter = (
|
|
979
|
+
var _97, _98, _99, _100;
|
|
980
|
+
const formatter = (_99 = (_98 = (_97 = this.options) === null || _97 === void 0 ? void 0 : _97.formatters) === null || _98 === void 0 ? void 0 : _98.events) === null || _99 === void 0 ? void 0 : _99.productsSearched;
|
|
886
981
|
const payload = {
|
|
887
982
|
currency: props === null || props === void 0 ? void 0 : props.currency,
|
|
888
983
|
price: typeof (props === null || props === void 0 ? void 0 : props.price) !== 'undefined' ? Number(props === null || props === void 0 ? void 0 : props.price) : undefined,
|
|
889
|
-
product_id: (
|
|
984
|
+
product_id: (_100 = props === null || props === void 0 ? void 0 : props.productId) === null || _100 === void 0 ? void 0 : _100.toString(),
|
|
890
985
|
quantity: props === null || props === void 0 ? void 0 : props.quantity,
|
|
891
986
|
query: props === null || props === void 0 ? void 0 : props.query,
|
|
892
987
|
};
|
|
@@ -897,8 +992,8 @@ export class ChordAnalytics {
|
|
|
897
992
|
return this.track('Products Searched', payload, options);
|
|
898
993
|
});
|
|
899
994
|
this.trackSignedIn = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
900
|
-
var
|
|
901
|
-
const formatter = (
|
|
995
|
+
var _101, _102, _103;
|
|
996
|
+
const formatter = (_103 = (_102 = (_101 = this.options) === null || _101 === void 0 ? void 0 : _101.formatters) === null || _102 === void 0 ? void 0 : _102.events) === null || _103 === void 0 ? void 0 : _103.signedIn;
|
|
902
997
|
const payload = {
|
|
903
998
|
email: props === null || props === void 0 ? void 0 : props.email,
|
|
904
999
|
method: props === null || props === void 0 ? void 0 : props.method,
|
|
@@ -910,8 +1005,8 @@ export class ChordAnalytics {
|
|
|
910
1005
|
return this.track('Signed In', payload, options);
|
|
911
1006
|
});
|
|
912
1007
|
this.trackSignedOut = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
913
|
-
var
|
|
914
|
-
const formatter = (
|
|
1008
|
+
var _104, _105, _106;
|
|
1009
|
+
const formatter = (_106 = (_105 = (_104 = this.options) === null || _104 === void 0 ? void 0 : _104.formatters) === null || _105 === void 0 ? void 0 : _105.events) === null || _106 === void 0 ? void 0 : _106.signedOut;
|
|
915
1010
|
const payload = {
|
|
916
1011
|
email: props === null || props === void 0 ? void 0 : props.email,
|
|
917
1012
|
};
|
|
@@ -922,8 +1017,8 @@ export class ChordAnalytics {
|
|
|
922
1017
|
return this.track('Signed Out', payload, options);
|
|
923
1018
|
});
|
|
924
1019
|
this.trackSignedUp = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
925
|
-
var
|
|
926
|
-
const formatter = (
|
|
1020
|
+
var _107, _108, _109;
|
|
1021
|
+
const formatter = (_109 = (_108 = (_107 = this.options) === null || _107 === void 0 ? void 0 : _107.formatters) === null || _108 === void 0 ? void 0 : _108.events) === null || _109 === void 0 ? void 0 : _109.signedUp;
|
|
927
1022
|
const payload = {
|
|
928
1023
|
email: props === null || props === void 0 ? void 0 : props.email,
|
|
929
1024
|
method: props === null || props === void 0 ? void 0 : props.method,
|
|
@@ -935,8 +1030,8 @@ export class ChordAnalytics {
|
|
|
935
1030
|
return this.track('Signed Up', payload, options);
|
|
936
1031
|
});
|
|
937
1032
|
this.trackLoginStarted = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
938
|
-
var
|
|
939
|
-
const formatter = (
|
|
1033
|
+
var _110, _111, _112;
|
|
1034
|
+
const formatter = (_112 = (_111 = (_110 = this.options) === null || _110 === void 0 ? void 0 : _110.formatters) === null || _111 === void 0 ? void 0 : _111.events) === null || _112 === void 0 ? void 0 : _112.loginStarted;
|
|
940
1035
|
const payload = {
|
|
941
1036
|
email: props === null || props === void 0 ? void 0 : props.email,
|
|
942
1037
|
};
|
|
@@ -947,8 +1042,8 @@ export class ChordAnalytics {
|
|
|
947
1042
|
return this.track('Login Started', payload, options);
|
|
948
1043
|
});
|
|
949
1044
|
this.trackSubscriptionCancelled = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
950
|
-
var
|
|
951
|
-
const formatter = (
|
|
1045
|
+
var _113, _114, _115, _116;
|
|
1046
|
+
const formatter = (_115 = (_114 = (_113 = this.options) === null || _113 === void 0 ? void 0 : _113.formatters) === null || _114 === void 0 ? void 0 : _114.events) === null || _115 === void 0 ? void 0 : _115.subscriptionCancelled;
|
|
952
1047
|
const payload = {
|
|
953
1048
|
actionable_date: props === null || props === void 0 ? void 0 : props.actionableDate,
|
|
954
1049
|
address: props === null || props === void 0 ? void 0 : props.address,
|
|
@@ -957,7 +1052,7 @@ export class ChordAnalytics {
|
|
|
957
1052
|
end_date: props === null || props === void 0 ? void 0 : props.endDate,
|
|
958
1053
|
interval_length: props === null || props === void 0 ? void 0 : props.intervalLength,
|
|
959
1054
|
interval_units: props === null || props === void 0 ? void 0 : props.intervalUnits,
|
|
960
|
-
products: (
|
|
1055
|
+
products: (_116 = props === null || props === void 0 ? void 0 : props.products) === null || _116 === void 0 ? void 0 : _116.map((p, i) => {
|
|
961
1056
|
var _a, _b, _c, _d;
|
|
962
1057
|
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 }));
|
|
963
1058
|
}),
|
|
@@ -972,8 +1067,8 @@ export class ChordAnalytics {
|
|
|
972
1067
|
return this.track('Subscription Cancelled', payload, options);
|
|
973
1068
|
});
|
|
974
1069
|
this.trackNavigationClicked = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
975
|
-
var
|
|
976
|
-
const formatter = (
|
|
1070
|
+
var _117, _118, _119;
|
|
1071
|
+
const formatter = (_119 = (_118 = (_117 = this.options) === null || _117 === void 0 ? void 0 : _117.formatters) === null || _118 === void 0 ? void 0 : _118.events) === null || _119 === void 0 ? void 0 : _119.navigationClicked;
|
|
977
1072
|
const payload = {
|
|
978
1073
|
category: props === null || props === void 0 ? void 0 : props.category,
|
|
979
1074
|
label: props === null || props === void 0 ? void 0 : props.label,
|
|
@@ -988,15 +1083,15 @@ export class ChordAnalytics {
|
|
|
988
1083
|
return this.track('Navigation Clicked', payload, options);
|
|
989
1084
|
});
|
|
990
1085
|
this.trackPaymentInfoEntered = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
991
|
-
var
|
|
992
|
-
const formatter = (
|
|
1086
|
+
var _120, _121, _122, _123;
|
|
1087
|
+
const formatter = (_122 = (_121 = (_120 = this.options) === null || _120 === void 0 ? void 0 : _120.formatters) === null || _121 === void 0 ? void 0 : _121.events) === null || _122 === void 0 ? void 0 : _122.paymentInfoEntered;
|
|
993
1088
|
const payload = {
|
|
994
1089
|
checkout_id: props === null || props === void 0 ? void 0 : props.checkoutId,
|
|
995
1090
|
coupon: props === null || props === void 0 ? void 0 : props.coupon,
|
|
996
1091
|
currency: props === null || props === void 0 ? void 0 : props.currency,
|
|
997
1092
|
order_id: props === null || props === void 0 ? void 0 : props.orderId,
|
|
998
1093
|
payment_method: props === null || props === void 0 ? void 0 : props.paymentMethod,
|
|
999
|
-
products: (
|
|
1094
|
+
products: (_123 = props === null || props === void 0 ? void 0 : props.products) === null || _123 === void 0 ? void 0 : _123.map((p, i) => {
|
|
1000
1095
|
var _a, _b, _c, _d;
|
|
1001
1096
|
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 }));
|
|
1002
1097
|
}),
|
|
@@ -1011,8 +1106,8 @@ export class ChordAnalytics {
|
|
|
1011
1106
|
return this.track('Payment Info Entered', payload, options);
|
|
1012
1107
|
});
|
|
1013
1108
|
this.trackOrderCompleted = (props, options) => __awaiter(this, void 0, void 0, function* () {
|
|
1014
|
-
var
|
|
1015
|
-
const formatter = (
|
|
1109
|
+
var _124, _125, _126, _127;
|
|
1110
|
+
const formatter = (_126 = (_125 = (_124 = this.options) === null || _124 === void 0 ? void 0 : _124.formatters) === null || _125 === void 0 ? void 0 : _125.events) === null || _126 === void 0 ? void 0 : _126.orderCompleted;
|
|
1016
1111
|
const payload = {
|
|
1017
1112
|
affiliation: props === null || props === void 0 ? void 0 : props.affiliation,
|
|
1018
1113
|
campaign_id: props === null || props === void 0 ? void 0 : props.campaignId,
|
|
@@ -1032,7 +1127,7 @@ export class ChordAnalytics {
|
|
|
1032
1127
|
order_date: props === null || props === void 0 ? void 0 : props.orderDate,
|
|
1033
1128
|
order_id: props === null || props === void 0 ? void 0 : props.orderId,
|
|
1034
1129
|
phone: props === null || props === void 0 ? void 0 : props.phone,
|
|
1035
|
-
products: (
|
|
1130
|
+
products: (_127 = props === null || props === void 0 ? void 0 : props.products) === null || _127 === void 0 ? void 0 : _127.map((p, i) => {
|
|
1036
1131
|
var _a;
|
|
1037
1132
|
return ({
|
|
1038
1133
|
affiliation: p === null || p === void 0 ? void 0 : p.affiliation,
|
|
@@ -1104,6 +1199,14 @@ export class ChordAnalytics {
|
|
|
1104
1199
|
window[this.options.namespace] = (window === null || window === void 0 ? void 0 : window[this.options.namespace]) || this;
|
|
1105
1200
|
this.initializeCdp();
|
|
1106
1201
|
}
|
|
1202
|
+
// Automatically set up web pixel listener if enabled
|
|
1203
|
+
if ((_d = this.options) === null || _d === void 0 ? void 0 : _d.enableWebPixelListener) {
|
|
1204
|
+
this.setupWebPixelListener();
|
|
1205
|
+
}
|
|
1206
|
+
// Automatically sync identifiers to cart if enabled
|
|
1207
|
+
if ((_e = this.options) === null || _e === void 0 ? void 0 : _e.enableIdentifierSync) {
|
|
1208
|
+
this.syncIdentifiersToCart();
|
|
1209
|
+
}
|
|
1107
1210
|
}
|
|
1108
1211
|
/**
|
|
1109
1212
|
* Initialize CDP snippet and wait for it to be ready.
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/dist/types/client.d.ts
CHANGED
|
@@ -34,6 +34,18 @@ export interface ChordAnalyticsOptions<T extends ObjectTypes = ObjectTypes> {
|
|
|
34
34
|
awaitConsent?: boolean;
|
|
35
35
|
debug?: boolean;
|
|
36
36
|
enableLogging?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* When true, automatically sets up a postMessage listener for events from
|
|
39
|
+
* the Shopify Custom Web Pixel sandbox. This enables the lightweight web pixel
|
|
40
|
+
* to forward analytics events to this ChordAnalytics instance.
|
|
41
|
+
*/
|
|
42
|
+
enableWebPixelListener?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* When true, automatically syncs CDP anonymous ID and Google Client ID
|
|
45
|
+
* to Shopify cart attributes. This enables server-side events (webhooks)
|
|
46
|
+
* to correlate with client-side tracking.
|
|
47
|
+
*/
|
|
48
|
+
enableIdentifierSync?: boolean;
|
|
37
49
|
formatters: ChordAnalyticsFormatters<T>;
|
|
38
50
|
namespace?: string;
|
|
39
51
|
stripNull?: boolean;
|
package/package.json
CHANGED