@financial-times/custom-code-component 1.9.4 → 1.9.5

package/dist/custom-code-component.js

@@ -127,13 +127,13 @@ function Q(t) {
 }
 const C = kt, h = Ot;
 let A = 0;
-const H = 4, _ = 36, et = Math.pow(_, H), F = function(e, n) {
+const H = 4, N = 36, et = Math.pow(N, H), F = function(e, n) {
   const o = "000000000" + e;
   return o.substr(o.length - n);
 }, U = function() {
-  return F((Math.random() * et << 0).toString(_), H);
+  return F((Math.random() * et << 0).toString(N), H);
 }, nt = () => (A = A < et ? A : 0, A++, A - 1), p = function() {
-  const e = "c", n = (/* @__PURE__ */ new Date()).getTime().toString(_), o = p.fingerprint(), r = U() + U(), i = F(nt().toString(_), H);
+  const e = "c", n = (/* @__PURE__ */ new Date()).getTime().toString(N), o = p.fingerprint(), r = U() + U(), i = F(nt().toString(N), H);
   return e + n + i + o + r;
 };
 p.slug = function() {
@@ -203,7 +203,7 @@ function At(t, e) {
 function R(t) {
   return typeof t == "string" ? t.trim() : t;
 }
-function N(t, e) {
+function _(t, e) {
   for (const n in t)
     e[n] ? console.warn(`You can't set a custom property called ${n}`) : e[n] = t[n];
 }
@@ -381,11 +381,11 @@ function Pt(t, e) {
 function it(t) {
   return O = t, O || (O = p()), B.write(O), O;
 }
-function Nt() {
+function _t() {
   return O;
 }
 let $;
-const _t = {
+const Nt = {
   storage: "best",
   name: "session",
   expires: 30 * 60 * 1e3
@@ -410,9 +410,9 @@ function st() {
     isNew: n
   };
 }
-function Lt(t) {
+function It(t) {
   y(t, "string") && (t = { name: t }), y(t) && (t = {});
-  const e = m(_t, t);
+  const e = m(Nt, t);
   return e.storage === "cookie" && t.name && (e.nameOverride = e.name), $ = new S(e.name, e), st();
 }
 function b(t) {
@@ -473,7 +473,7 @@ b.prototype.shift = function() {
 b.prototype.save = function() {
   return this.storage.write(this.queue), this;
 };
-function It() {
+function Lt() {
   const t = new window.XMLHttpRequest();
   return {
     name: "xhr",
@@ -522,7 +522,7 @@ function j(t) {
     return G.transport;
   switch (t) {
     case "xhr":
-      return It;
+      return Lt;
     case "sendBeacon":
       return Dt;
     case "image":
@@ -564,7 +564,7 @@ Here are the paths in the data which are circular:
 function Mt(t) {
   t.queueTime = (/* @__PURE__ */ new Date()).getTime(), at() ? ct(t) : g.add(t).save(), P("AddedToQueue", g);
 }
-function L(t = function() {
+function I(t = function() {
 }) {
   const e = g.all();
   if (e.length > 200) {
@@ -584,24 +584,24 @@ function L(t = function() {
     });
   }
   const n = function() {
-    L(), t();
+    I(), t();
   }, o = g.shift();
   return o ? ct(o, n) : t();
 }
 function Tt(t) {
-  Mt(t), L();
+  Mt(t), I();
 }
 function jt() {
   return g = new b("requests"), z(window, "online", function() {
-    L();
-  }), L(), g;
+    I();
+  }), I(), g;
 }
-let I;
+let L;
 function ut() {
-  return I = p(), I;
+  return L = p(), L;
 }
 function ft() {
-  return I || ut(), I;
+  return L || ut(), L;
 }
 function Jt(t, e = function() {
 }) {
@@ -619,7 +619,7 @@ function Jt(t, e = function() {
     device: {
       spoor_session: n.id,
       spoor_session_is_new: n.isNew,
-      spoor_id: Nt()
+      spoor_id: _t()
     }
   }, r = h("config") || {};
   return r.context && m(o.context, r.context), r.user && m(o.user, r.user), r.device && m(o.device, r.device), m(o, t), P("Core.Track", o), Tt(o), o;
@@ -890,7 +890,7 @@ function dt(t) {
       Zt(t, n, o)
     )), r.push(s);
     const u = re(c, a, t === n);
-    N(u, i), t = t.parentNode;
+    _(u, i), t = t.parentNode;
   }
   return { trace: r, customContext: i };
 }
@@ -914,7 +914,7 @@ const ie = [
   if (n.getAttribute("data-o-tracking-do-not-track") === "true")
     return;
   const o = se(e), { trace: r, customContext: i } = dt(n);
-  o.domPathTokens = r, o.url = window.document.location.href || null, o.source_id = x.getRootID(), N(i, o), t.context = o;
+  o.domPathTokens = r, o.url = window.document.location.href || null, o.source_id = x.getRootID(), _(i, o), t.context = o;
   const a = m(h("config"), t);
   x.track(a);
 }, ce = (t, e) => {
@@ -950,7 +950,7 @@ const ue = {
     i = At(a, fe);
   } else
     i = {};
-  i.domPathTokens = o, i.url = window.document.location.href || null, N(r, i), t.context = i;
+  i.domPathTokens = o, i.url = window.document.location.href || null, _(r, i), t.context = i;
 }, de = (t = {}) => {
   if (!window.IntersectionObserver) {
     console.warn('o-tracking: Unable to track component view events as "window.IntersectionObserver" is not supported.');
@@ -992,7 +992,7 @@ function we(t = {}) {
     return null;
   C("version", W), C("source", pt), C("page_sent", !1);
   const n = t ? t.cookieDomain : "";
-  return Pt("", n), mt(t), Lt(t.session), jt(), pe(), me(), k.initialised = !0, k;
+  return Pt("", n), mt(t), It(t.session), jt(), pe(), me(), k.initialised = !0, k;
 }
 function gt() {
   return document.querySelector("script[data-o-tracking-config]");
@@ -1092,21 +1092,22 @@ function Se(t, e) {
       Ee(t, n, o)
     )), r.push(s);
     const u = Ce(c, a, t === n);
-    N(u, i), t = t.parentNode;
+    _(u, i), t = t.parentNode;
   }
   return { trace: r, customContext: i };
 }
 const Ae = ["ctrlKey", "altKey", "shiftKey", "metaKey"];
 class Pe {
   constructor({
-    id: e = "ccc-component",
-    subtype: n = "interactive",
-    teamName: o = "djd",
-    shadowRoot: r = null,
-    category: i = "cta",
-    elements: a = 'a, button, input, [role="button"]'
+    id: e = "00000000-0000-0000-0000-000000000000",
+    name: n = "ccc-component",
+    subtype: o = "interactive",
+    teamName: r = "djd",
+    shadowRoot: i = null,
+    category: a = "cta",
+    elements: c = 'a, button, input, [role="button"]'
   } = {}) {
-    this.cccName = e, this.subtype = n, this.teamName = o, this.shadowRoot = r, this.category = i, this.elements = a, this.isInitialised = !1;
+    this.cccId = e, this.cccName = n, this.subtype = o, this.teamName = r, this.shadowRoot = i, this.category = a, this.elements = c, this.isInitialised = !1;
   }
   // Get properties for the event (as opposed to properties of the clicked element)
   getEventProperties(e) {
@@ -1125,11 +1126,11 @@ class Pe {
     return (o, r) => {
       const i = this.getEventProperties(o), { trace: a, customContext: c } = Se(r, n);
       i.custom = r.dataset && r.dataset.custom ? JSON.parse(r.dataset.custom) : null, i.domPathTokens = a, i.component = {
-        id: this.cccName,
+        id: this.cccId,
         name: this.cccName,
         type: "custom-code-component",
         subtype: this.subtype
-      }, i.teamName = this.teamName, N(c, i), e.context = i, e.method = "ftCustomAnalytics", document.body.dispatchEvent(
+      }, i.teamName = this.teamName, _(c, i), e.context = i, e.method = "ftCustomAnalytics", document.body.dispatchEvent(
         new CustomEvent("oTracking.event", {
           detail: e,
           bubbles: !0,
@@ -1144,7 +1145,7 @@ class Pe {
       action: "act",
       context: {
         component: {
-          id: this.cccName,
+          id: this.cccId,
           name: this.cccName,
           type: "custom-code-component",
           subtype: this.subtype
@@ -1163,24 +1164,24 @@ class Pe {
       })
     );
   }
-  init() {
-    var e;
+  init(e) {
+    var n;
     if (!this.isInitialised) {
-      this.isInitialised = !0, k.init({ queue: !0, test: !0 });
-      const n = {
+      this.isInitialised = !0, this.cccId = e || this.cccId, k.init({ queue: !0, test: !0 });
+      const o = {
         action: "click",
         category: this.category
-      }, o = (e = this.shadowRoot) == null ? void 0 : e.querySelector("#component-root");
-      this.shadowRoot && new w(o).on(
+      }, r = (n = this.shadowRoot) == null ? void 0 : n.querySelector("#component-root");
+      this.shadowRoot && new w(r).on(
         "click",
         this.elements,
-        this.handleClickEvent(n, o),
+        this.handleClickEvent(o, r),
         !0
       );
     }
   }
 }
-class Ne extends HTMLElement {
+class _e extends HTMLElement {
   constructor() {
     super(...arguments), this.RESERVED_ATTRS = /* @__PURE__ */ new Set([
       "iframe",
@@ -1202,7 +1203,7 @@ class Ne extends HTMLElement {
       [...this.attributes].filter((s) => !this.RESERVED_ATTRS.has(s.name)).map((s) => [s.name, s.value])
     );
     (c = this.shadowRoot) == null || c.replaceChildren(), this.tracking = new Pe({
-      id: `${this.getAttribute("path")}@${this.getAttribute("version")}`,
+      name: `${this.getAttribute("path")}@${this.getAttribute("version")}`,
       subtype: "interactive",
       teamName: "djd",
       shadowRoot: this.shadowRoot
@@ -1279,7 +1280,7 @@ class Ne extends HTMLElement {
         ), console.error(u), this.dispatchEvent(new ErrorEvent("error", u)), this.dataset.cccError = "mount-error", delete this.dataset.cccReady;
       }
       try {
-        this.tracking.init();
+        this.tracking.init(this.id);
       } catch (u) {
         console.info(
           `Error initialising tracking on <custom-code-component> ${e}@${n}`
@@ -1298,13 +1299,13 @@ class Ne extends HTMLElement {
     this.channel.port1.postMessage(e);
   }
 }
-const _e = () => customElements.define("custom-code-component", Ne);
-customElements && !customElements.get("custom-code-component") && _e();
+const Ne = () => customElements.define("custom-code-component", _e);
+customElements && !customElements.get("custom-code-component") && Ne();
 class D extends Error {
   constructor(...e) {
     super(...e), Error.captureStackTrace && Error.captureStackTrace(this, D), this.name = "CCCImportError";
   }
 }
 export {
-  _e as init
+  Ne as init
 };

package/dist/tracking.d.ts

@@ -1,4 +1,5 @@
 declare class Tracking {
+    cccId: string;
     cccName: string;
     subtype: string;
     teamName: string;
@@ -6,8 +7,9 @@ declare class Tracking {
     category: string;
     elements: string | string[];
     isInitialised: boolean;
-    constructor({ id, subtype, teamName, shadowRoot, category, elements, }?: {
+    constructor({ id, name, subtype, teamName, shadowRoot, category, elements, }?: {
         id?: string;
+        name?: string;
         subtype?: string;
         teamName?: string;
         shadowRoot?: any;
@@ -17,6 +19,6 @@ declare class Tracking {
     getEventProperties(event: any): {};
     handleClickEvent(eventData: any, root: any): (clickEvent: any, clickElement: any) => void;
     sendSpoorEvent(triggerAction: any, extraDetail: any): void;
-    init(): void;
+    init(id: any): void;
 }
 export default Tracking;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/custom-code-component",
-  "version": "1.9.4",
+  "version": "1.9.5",
   "type": "module",
   "exports": {
     ".": {

package/src/custom-code-component.ts

@@ -48,7 +48,7 @@ class FTCustomCodeComponent extends HTMLElement {
 
     // Create tracking instance
     this.tracking = new Tracking({
-      id: `${this.getAttribute("path")}@${this.getAttribute("version")}`,
+      name: `${this.getAttribute("path")}@${this.getAttribute("version")}`,
       subtype: "interactive",
       teamName: "djd",
       shadowRoot: this.shadowRoot as ShadowRoot,
@@ -171,7 +171,7 @@ class FTCustomCodeComponent extends HTMLElement {
     }
 
     try {
-      this.tracking.init();
+      this.tracking.init(this.id);
     } catch (e) {
       console.info(
         `Error initialising tracking on <custom-code-component> ${path}@${componentVersionRange}`

package/src/tracking.ts

@@ -9,6 +9,7 @@ import {
 const eventPropertiesToCollect = ["ctrlKey", "altKey", "shiftKey", "metaKey"];
 
 class Tracking {
+  cccId: string;
   cccName: string;
   subtype: string;
   teamName: string;
@@ -18,14 +19,16 @@ class Tracking {
   isInitialised: boolean;
 
   constructor({
-    id = "ccc-component",
+    id = "00000000-0000-0000-0000-000000000000",
+    name = "ccc-component",
     subtype = "interactive",
     teamName = "djd",
     shadowRoot = null,
     category = "cta",
     elements = 'a, button, input, [role="button"]',
   } = {}) {
-    this.cccName = id;
+    this.cccId = id;
+    this.cccName = name;
     this.subtype = subtype;
     this.teamName = teamName;
     this.shadowRoot = shadowRoot;
@@ -60,7 +63,7 @@ class Tracking {
           : null;
       context.domPathTokens = trace;
       context.component = {
-        id: this.cccName,
+        id: this.cccId,
         name: this.cccName,
         type: "custom-code-component",
         subtype: this.subtype,
@@ -89,7 +92,7 @@ class Tracking {
       action: "act",
       context: {
         component: {
-          id: this.cccName,
+          id: this.cccId,
           name: this.cccName,
           type: "custom-code-component",
           subtype: this.subtype,
@@ -111,9 +114,10 @@ class Tracking {
     );
   }
 
-  init() {
+  init(id) {
     if (!this.isInitialised) {
       this.isInitialised = true;
+      this.cccId = id ? id : this.cccId;
 
       oTracking.init({ queue: true, test: true }); // @TODO: Flip this to false before using in production