npm - @financial-times/custom-code-component - Versions diffs - 1.9.3 → 1.9.5 - Mend

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

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.

Files changed (7) hide show

package/dist/custom-code-component.js +358 -345
package/dist/tracking.d.ts +24 -0
package/package.json +1 -1
package/src/custom-code-component.ts +12 -9
package/src/tracking.ts +145 -0
package/dist/analytics.d.ts +0 -11
package/src/analytics.ts +0 -137

package/dist/custom-code-component.js CHANGED Viewed

@@ -28,7 +28,7 @@ w.prototype.on = function(t, e, n, o) {
     throw new TypeError("Invalid event type: " + t);
   if (typeof e == "function" && (o = n, n = e, e = null), o === void 0 && (o = this.captureForType(t)), typeof n != "function")
     throw new TypeError("Handler must be a type of Function");
-  return r = this.rootElement, i = this.listenerMap[o ? 1 : 0], i[t] || (r && r.addEventListener(t, this.handle, o), i[t] = []), e ? /^[a-z]+$/i.test(e) ? (c = e, a = kt) : /^#[a-z0-9\-_]+$/i.test(e) ? (c = e.slice(1), a = Ct) : (c = e, a = Element.prototype.matches) : (c = null, a = Ot.bind(this)), i[t].push({
+  return r = this.rootElement, i = this.listenerMap[o ? 1 : 0], i[t] || (r && r.addEventListener(t, this.handle, o), i[t] = []), e ? /^[a-z]+$/i.test(e) ? (c = e, a = Et) : /^#[a-z0-9\-_]+$/i.test(e) ? (c = e.slice(1), a = xt) : (c = e, a = Element.prototype.matches) : (c = null, a = vt.bind(this)), i[t].push({
     selector: e,
     handler: n,
     matcher: a,
@@ -53,11 +53,11 @@ w.prototype.off = function(t, e, n, o) {
 w.prototype.handle = function(t) {
   let e, n;
   const o = t.type;
-  let r, i, a, c, s = [], f;
+  let r, i, a, c, s = [], u;
   const l = "ftLabsDelegateIgnore";
   if (t[l] === !0)
     return;
-  switch (f = t.target, f.nodeType === 3 && (f = f.parentNode), f.correspondingUseElement && (f = f.correspondingUseElement), r = this.rootElement, i = t.eventPhase || (t.target !== t.currentTarget ? 3 : 2), i) {
+  switch (u = t.target, u.nodeType === 3 && (u = u.parentNode), u.correspondingUseElement && (u = u.correspondingUseElement), r = this.rootElement, i = t.eventPhase || (t.target !== t.currentTarget ? 3 : 2), i) {
     case 1:
       s = this.listenerMap[1][o];
       break;
@@ -68,17 +68,17 @@ w.prototype.handle = function(t) {
       s = this.listenerMap[0][o];
       break;
   }
-  let u = [];
-  for (n = s.length; f && n; ) {
+  let f = [];
+  for (n = s.length; u && n; ) {
     for (e = 0; e < n && (a = s[e], !!a); e++)
-      f.tagName && ["button", "input", "select", "textarea"].indexOf(f.tagName.toLowerCase()) > -1 && f.hasAttribute("disabled") ? u = [] : a.matcher.call(f, a.matcherParam, f) && u.push([t, f, a]);
-    if (f === r || (n = s.length, f = f.parentElement || f.parentNode, f instanceof HTMLDocument))
+      u.tagName && ["button", "input", "select", "textarea"].indexOf(u.tagName.toLowerCase()) > -1 && u.hasAttribute("disabled") ? f = [] : a.matcher.call(u, a.matcherParam, u) && f.push([t, u, a]);
+    if (u === r || (n = s.length, u = u.parentElement || u.parentNode, u instanceof HTMLDocument))
       break;
   }
   let d;
-  for (e = 0; e < u.length; e++)
-    if (!(this._removedListeners.indexOf(u[e][2]) > -1) && (c = this.fire.apply(this, u[e]), c === !1)) {
-      u[e][0][l] = !0, u[e][0].preventDefault(), d = !1;
+  for (e = 0; e < f.length; e++)
+    if (!(this._removedListeners.indexOf(f[e][2]) > -1) && (c = this.fire.apply(this, f[e]), c === !1)) {
+      f[e][0][l] = !0, f[e][0].preventDefault(), d = !1;
       break;
     }
   return d;
@@ -86,10 +86,10 @@ w.prototype.handle = function(t) {
 w.prototype.fire = function(t, e, n) {
   return n.handler.call(e, t, e);
 };
-function kt(t, e) {
+function Et(t, e) {
   return t.toLowerCase() === e.tagName.toLowerCase();
 }
-function Ot(t, e) {
+function vt(t, e) {
   return this.rootElement === window ? (
     // Match the outer document (dispatched from document)
     e === document || // The <html> element (dispatched from document.body or document.documentElement)
@@ -97,14 +97,14 @@ function Ot(t, e) {
     e === window
   ) : this.rootElement === e;
 }
-function Ct(t, e) {
+function xt(t, e) {
   return t === e.id;
 }
 w.prototype.destroy = function() {
   this.off(), this.root();
 };
-const z = { config: {} };
-function ot(t) {
+const K = { config: {} };
+function tt(t) {
   if (t === void 0)
     return t;
   switch (Object.prototype.toString.call(t)) {
@@ -116,28 +116,28 @@ function ot(t) {
       return t;
   }
 }
-function St(t, e) {
-  z[t] = ot(e);
+function kt(t, e) {
+  K[t] = tt(e);
 }
-function At(t) {
-  return ot(z[t]);
+function Ot(t) {
+  return tt(K[t]);
 }
-function G(t) {
-  delete z[t];
+function Q(t) {
+  delete K[t];
 }
-const C = St, h = At;
-let P = 0;
-const W = 4, N = 36, rt = Math.pow(N, W), Q = function(e, n) {
+const C = kt, h = Ot;
+let A = 0;
+const H = 4, N = 36, et = Math.pow(N, H), F = function(e, n) {
   const o = "000000000" + e;
   return o.substr(o.length - n);
-}, B = function() {
-  return Q((Math.random() * rt << 0).toString(N), W);
-}, it = () => (P = P < rt ? P : 0, P++, P - 1), p = function() {
-  const e = "c", n = (/* @__PURE__ */ new Date()).getTime().toString(N), o = p.fingerprint(), r = B() + B(), i = Q(it().toString(N), W);
+}, U = function() {
+  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(N), o = p.fingerprint(), r = U() + U(), i = F(nt().toString(N), H);
   return e + n + i + o + r;
 };
 p.slug = function() {
-  const e = (/* @__PURE__ */ new Date()).getTime().toString(36), n = p.fingerprint().slice(0, 1) + p.fingerprint().slice(-1), o = B().slice(-2), r = it().toString(36).slice(-4);
+  const e = (/* @__PURE__ */ new Date()).getTime().toString(36), n = p.fingerprint().slice(0, 1) + p.fingerprint().slice(-1), o = U().slice(-2), r = nt().toString(36).slice(-4);
   return e.slice(-2) + r + n + o;
 };
 p.globalCount = function() {
@@ -150,10 +150,10 @@ p.globalCount = function() {
   return p.globalCount = () => e, e;
 };
 p.fingerprint = function() {
-  return Q((navigator.mimeTypes.length + navigator.userAgent.length).toString(36) + p.globalCount().toString(36), 4);
+  return F((navigator.mimeTypes.length + navigator.userAgent.length).toString(36) + p.globalCount().toString(36), 4);
 };
-const Z = [];
-function _(...t) {
+const X = [];
+function P(...t) {
   if (h("config").test && window.console)
     for (const e of t)
       window.console.log(e);
@@ -168,13 +168,13 @@ function m(t, e) {
     o = t[n], r = e[n], t !== r && typeof r < "u" && r !== null && (t[n] = o === Object(o) && !y(o, "function") ? m(o, r) : r);
   return t;
 }
-function K(t) {
+function V(t) {
   return window.encodeURIComponent ? window.encodeURIComponent(t) : window.escape(t);
 }
-function Pt(t) {
+function Ct(t) {
   return window.decodeURIComponent ? window.decodeURIComponent(t) : window.unescape(t);
 }
-function X(t, e, n) {
+function z(t, e, n) {
   t.addEventListener ? t.addEventListener(e, n, !1) : t.attachEvent("on" + e, n);
 }
 function v(t, e, n) {
@@ -187,27 +187,27 @@ function v(t, e, n) {
   } catch {
   }
 }
-function _t() {
-  for (let t = 0; t < Z.length; t++)
-    Z[t]();
+function St() {
+  for (let t = 0; t < X.length; t++)
+    X[t]();
 }
-function tt(t) {
+function Y(t) {
   return document.cookie.match(t) && RegExp.$1 !== "" && RegExp.$1 !== "null" ? RegExp.$1 : null;
 }
-function $t(t, e) {
+function At(t, e) {
   const n = {};
   for (const o of e)
     t[o] && (n[o] = t[o]);
   return n;
 }
-function j(t) {
+function R(t) {
   return typeof t == "string" ? t.trim() : t;
 }
-function $(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];
 }
-function st(t) {
+function ot(t) {
   const e = /* @__PURE__ */ new WeakSet(), n = [];
   function o(r, i) {
     if (e.has(r)) {
@@ -222,7 +222,7 @@ function st(t) {
   }
   return o(t, ""), n;
 }
-function at(t) {
+function rt(t) {
   const e = /* @__PURE__ */ new WeakSet();
   function n(o) {
     if (e.has(o))
@@ -238,7 +238,7 @@ function at(t) {
     t
   );
 }
-function H(t, e) {
+function q(t, e) {
   if (t === e)
     return !0;
   if (t && e && typeof t == "object" && typeof e == "object") {
@@ -249,7 +249,7 @@ function H(t, e) {
       if (r !== e.length)
         return !1;
       for (let i = r; i-- !== 0; )
-        if (!H(t[i], e[i]))
+        if (!q(t[i], e[i]))
           return !1;
       return !0;
     }
@@ -267,13 +267,13 @@ function H(t, e) {
         return !1;
     for (let r = o; r-- !== 0; ) {
       const i = n[r];
-      if (!H(t[i], e[i]))
+      if (!q(t[i], e[i]))
         return !1;
     }
     return !0;
   }
 }
-const A = function(t, e = {}) {
+const S = function(t, e = {}) {
   const n = "o-tracking";
   if (typeof t != "string" || t === "") {
     const s = new Error("You must specify a name for the store.");
@@ -287,8 +287,8 @@ const A = function(t, e = {}) {
     load: function(s) {
       return window.localStorage.getItem(s);
     },
-    save: function(s, f) {
-      return window.localStorage.setItem(s, f);
+    save: function(s, u) {
+      return window.localStorage.setItem(s, u);
     },
     remove: function(s) {
       return i(s), window.localStorage.removeItem(s);
@@ -296,18 +296,18 @@ const A = function(t, e = {}) {
   };
   function o(s) {
     s = s + "=";
-    const f = window.document.cookie.split(";");
-    let l, u;
-    for (l = 0; l < f.length; l = l + 1)
-      if (u = f[l].replace(/^\s+|\s+$/g, ""), u.indexOf(s) === 0)
-        return Pt(u.substring(s.length, u.length));
+    const u = window.document.cookie.split(";");
+    let l, f;
+    for (l = 0; l < u.length; l = l + 1)
+      if (f = u[l].replace(/^\s+|\s+$/g, ""), f.indexOf(s) === 0)
+        return Ct(f.substring(s.length, f.length));
     return null;
   }
-  function r(s, f, l) {
-    let u, d = "";
-    y(l, "number") && (u = /* @__PURE__ */ new Date(), u.setTime(u.getTime() + l), d = "expires=" + u.toUTCString() + ";");
-    const xt = K(s) + "=" + K(f) + ";" + d + "path=/;" + (e.domain ? "domain=." + e.domain + ";" : "");
-    window.document.cookie = xt;
+  function r(s, u, l) {
+    let f, d = "";
+    y(l, "number") && (f = /* @__PURE__ */ new Date(), f.setTime(f.getTime() + l), d = "expires=" + f.toUTCString() + ";");
+    const bt = V(s) + "=" + V(u) + ";" + d + "path=/;" + (e.domain ? "domain=." + e.domain + ";" : "");
+    window.document.cookie = bt;
   }
   function i(s) {
     r(s, "", -1);
@@ -330,8 +330,8 @@ const A = function(t, e = {}) {
       else {
         const s = JSON.parse(c);
         this.data ? Object.assign(this.data, s) : this.data = s;
-        for (const f of Object.keys(s))
-          f !== "spoor-id" && i(f);
+        for (const u of Object.keys(s))
+          u !== "spoor-id" && i(u);
       }
     } catch (s) {
       v("oErrors", "log", {
@@ -341,31 +341,31 @@ const A = function(t, e = {}) {
     }
   return this;
 };
-A.prototype.read = function() {
+S.prototype.read = function() {
   return this.data;
 };
-A.prototype.write = function(t) {
+S.prototype.write = function(t) {
   this.data = t;
   let e;
   if (typeof this.data == "string")
     e = this.data;
   else {
-    if (at(this.data)) {
+    if (rt(this.data)) {
       const n = `o-tracking does not support circular references in the analytics data.
 Please remove the circular references in the data.
 Here are the paths in the data which are circular:
-` + JSON.stringify(st(this.data), void 0, 4);
+` + JSON.stringify(ot(this.data), void 0, 4);
       throw new Error(n);
     }
     e = JSON.stringify(this.data);
   }
   return this.storage.save(this.storageKey, e), this;
 };
-A.prototype.destroy = function() {
+S.prototype.destroy = function() {
   return this.data = null, this.storage.remove(this.storageKey), this;
 };
-let O, F;
-function Nt(t, e) {
+let O, B;
+function Pt(t, e) {
   const n = {
     storage: "cookie",
     name: "spoor-id",
@@ -374,46 +374,46 @@ function Nt(t, e) {
     // Set the store cookie domain to .ft.com for ft.com and all its subdomains
     domain: location.hostname.match(/^(?:.+\.)?ft\.com$/) ? "ft.com" : null
   };
-  e && (n.domain = e), F = new A(n.name, n);
-  let o = F.read();
-  return o || (o = t), ct(o);
+  e && (n.domain = e), B = new S(n.name, n);
+  let o = B.read();
+  return o || (o = t), it(o);
 }
-function ct(t) {
-  return O = t, O || (O = p()), F.write(O), O;
+function it(t) {
+  return O = t, O || (O = p()), B.write(O), O;
 }
-function Lt() {
+function _t() {
   return O;
 }
-let L;
-const It = {
+let $;
+const Nt = {
   storage: "best",
   name: "session",
   expires: 30 * 60 * 1e3
   // 30 minutes
 };
-function Dt(t) {
+function $t(t) {
   const e = /* @__PURE__ */ new Date();
-  e.setTime(e.getTime() + L.config.expires), L.write({
+  e.setTime(e.getTime() + $.config.expires), $.write({
     value: t,
     expiry: e.valueOf()
   });
 }
-function ft() {
-  const t = L.read();
+function st() {
+  const t = $.read();
   let e, n = !1;
   if (t) {
     const o = (/* @__PURE__ */ new Date()).valueOf();
     parseInt(t.expiry, 10) >= o ? e = t.value : (e = p(), n = !0);
   }
-  return e || (e = p(), n = !0), Dt(e), {
+  return e || (e = p(), n = !0), $t(e), {
     id: e,
     isNew: n
   };
 }
-function Tt(t) {
+function It(t) {
   y(t, "string") && (t = { name: t }), y(t) && (t = {});
-  const e = m(It, t);
-  return e.storage === "cookie" && t.name && (e.nameOverride = e.name), L = new A(e.name, e), ft();
+  const e = m(Nt, t);
+  return e.storage === "cookie" && t.name && (e.nameOverride = e.name), $ = new S(e.name, e), st();
 }
 function b(t) {
   if (y(t)) {
@@ -423,7 +423,7 @@ function b(t) {
       info: { module: "o-tracking" }
     }), e;
   }
-  return this.queue = [], this.storage = new A(t), this.storage.read() && (this.queue = this.storage.read()), this;
+  return this.queue = [], this.storage = new S(t), this.storage.read() && (this.queue = this.storage.read()), this;
 }
 b.prototype.all = function() {
   if (this.queue.length === 0)
@@ -473,7 +473,7 @@ b.prototype.shift = function() {
 b.prototype.save = function() {
   return this.storage.write(this.queue), this;
 };
-function Mt() {
+function Lt() {
   const t = new window.XMLHttpRequest();
   return {
     name: "xhr",
@@ -489,7 +489,7 @@ function Mt() {
     }
   };
 }
-function Rt() {
+function Dt() {
   let t, e;
   const n = new Promise((o, r) => {
     t = o, e = r;
@@ -504,39 +504,39 @@ function Rt() {
     }
   };
 }
-function jt() {
+function Rt() {
   const t = new Image(1, 1);
   return {
     name: "image",
     send: function(e, n) {
-      e = e.replace("https://spoor-api.ft.com/ingest", "https://spoor-api.ft.com/px.gif"), t.src = e + (e.indexOf("?") > -1 ? "&" : "?") + "data=" + K(n);
+      e = e.replace("https://spoor-api.ft.com/ingest", "https://spoor-api.ft.com/px.gif"), t.src = e + (e.indexOf("?") > -1 ? "&" : "?") + "data=" + V(n);
     },
     complete: function(e) {
       t.addEventListener ? (t.addEventListener("error", e), t.addEventListener("load", () => e())) : (t.attachEvent("onerror", e), t.attachEvent("onload", () => e()));
     }
   };
 }
-const et = {};
-function V(t) {
-  if (et.transport)
-    return et.transport;
+const G = {};
+function j(t) {
+  if (G.transport)
+    return G.transport;
   switch (t) {
     case "xhr":
-      return Mt;
+      return Lt;
     case "sendBeacon":
-      return Rt;
+      return Dt;
     case "image":
-      return jt;
+      return Rt;
     default:
       return;
   }
 }
 let g;
-function ut() {
+function at() {
   return (h("config") || {}).queue === !0 ? !1 : !!navigator.sendBeacon;
 }
-function lt(t, e) {
-  const n = t.queueTime, o = (/* @__PURE__ */ new Date()).getTime() - n, r = ut() ? V("sendBeacon")() : window.XMLHttpRequest && "withCredentials" in new window.XMLHttpRequest() ? V("xhr")() : V("image")(), i = t.callback, a = h("config") && h("config").system || {}, c = m(a, {
+function ct(t, e) {
+  const n = t.queueTime, o = (/* @__PURE__ */ new Date()).getTime() - n, r = at() ? j("sendBeacon")() : window.XMLHttpRequest && "withCredentials" in new window.XMLHttpRequest() ? j("xhr")() : j("image")(), i = t.callback, a = h("config") && h("config").system || {}, c = m(a, {
     version: h("version"),
     // Version of the tracking client e.g. '1.2'
     source: h("source"),
@@ -544,25 +544,25 @@ function lt(t, e) {
     transport: r.name
     // The transport method used.
   });
-  if (h("config").test || h("config").test_data ? c.is_live = !1 : c.is_live = !0, t = m({ system: c }, t), o > 1e3 && o < 12 * 30 * 24 * 60 * 60 * 1e3 && (t.time = t.time || {}, t.time.offset = o), delete t.callback, delete t.type, delete t.queueTime, _("user_callback", i), _("PreSend", t), at(t)) {
+  if (h("config").test || h("config").test_data ? c.is_live = !1 : c.is_live = !0, t = m({ system: c }, t), o > 1e3 && o < 12 * 30 * 24 * 60 * 60 * 1e3 && (t.time = t.time || {}, t.time.offset = o), delete t.callback, delete t.type, delete t.queueTime, P("user_callback", i), P("PreSend", t), rt(t)) {
     const l = `o-tracking does not support circular references in the analytics data.
 Please remove the circular references in the data.
 Here are the paths in the data which are circular:
-` + JSON.stringify(st(t), void 0, 4);
+` + JSON.stringify(ot(t), void 0, 4);
     throw new Error(l);
   }
   const s = JSON.stringify(t);
   r.complete(function(l) {
-    y(i, "function") && (i.call(t), _("calling user_callback")), l ? (t.queueTime = n, g.add(t).save(), v("oErrors", "log", {
+    y(i, "function") && (i.call(t), P("calling user_callback")), l ? (t.queueTime = n, g.add(t).save(), v("oErrors", "log", {
       error: l.message,
       info: { module: "o-tracking" }
     })) : e && e();
   });
-  let f = "https://spoor-api.ft.com/ingest";
-  t && t.category && t.action && (f += `?type=${t.category}:${t.action}`), r.send(f, s);
+  let u = "https://spoor-api.ft.com/ingest";
+  t && t.category && t.action && (u += `?type=${t.category}:${t.action}`), r.send(u, s);
 }
-function Jt(t) {
-  t.queueTime = (/* @__PURE__ */ new Date()).getTime(), ut() ? lt(t) : g.add(t).save(), _("AddedToQueue", g);
+function Mt(t) {
+  t.queueTime = (/* @__PURE__ */ new Date()).getTime(), at() ? ct(t) : g.add(t).save(), P("AddedToQueue", g);
 }
 function I(t = function() {
 }) {
@@ -586,56 +586,56 @@ function I(t = function() {
   const n = function() {
     I(), t();
   }, o = g.shift();
-  return o ? lt(o, n) : t();
+  return o ? ct(o, n) : t();
 }
-function Ut(t) {
-  Jt(t), I();
+function Tt(t) {
+  Mt(t), I();
 }
-function Vt() {
-  return g = new b("requests"), X(window, "online", function() {
+function jt() {
+  return g = new b("requests"), z(window, "online", function() {
     I();
   }), I(), g;
 }
-let D;
-function dt() {
-  return D = p(), D;
+let L;
+function ut() {
+  return L = p(), L;
 }
-function ht() {
-  return D || dt(), D;
+function ft() {
+  return L || ut(), L;
 }
-function qt(t, e = function() {
+function Jt(t, e = function() {
 }) {
-  const n = ft(), o = {
+  const n = st(), o = {
     callback: e,
     context: {
       id: t.id || p(),
       // Use a supplied id or generate one for this request
-      root_id: ht()
+      root_id: ft()
     },
     user: {
-      ft_session: tt(/FTSession=([^;]+)/),
-      ft_session_s: tt(/FTSession_s=([^;]+)/)
+      ft_session: Y(/FTSession=([^;]+)/),
+      ft_session_s: Y(/FTSession_s=([^;]+)/)
     },
     device: {
       spoor_session: n.id,
       spoor_session_is_new: n.isNew,
-      spoor_id: Lt()
+      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), _("Core.Track", o), Ut(o), o;
+  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;
 }
 const x = {
-  setRootID: dt,
-  getRootID: ht,
-  track: qt
-}, Bt = function() {
+  setRootID: ut,
+  getRootID: ft,
+  track: Jt
+}, Ut = function() {
   return {
     category: "event",
     action: "generic",
     context: {}
   };
 };
-function J(t, e) {
+function M(t, e) {
   if (y(t.detail.category) || y(t.detail.action)) {
     const r = "Missing category or action values";
     throw v("oErrors", "log", {
@@ -643,22 +643,22 @@ function J(t, e) {
       info: { module: "o-tracking" }
     }), r;
   }
-  const n = m(Bt(), {
+  const n = m(Ut(), {
     category: t.detail.category,
     action: t.detail.action,
     context: t.detail
   });
   delete n.context.category, delete n.context.action;
-  const o = Kt(t);
-  o && (n.context.component_name = o.getAttribute("data-o-component"), n.context.component_id = n.context.component_id || Ht(o)), x.track(n, e);
+  const o = Vt(t);
+  o && (n.context.component_name = o.getAttribute("data-o-component"), n.context.component_id = n.context.component_id || qt(o)), x.track(n, e);
 }
-function Kt(t) {
+function Vt(t) {
   const e = t.target || t.srcElement;
   if (e && e.getAttribute("data-o-component"))
     return e;
 }
-function Ht(t) {
-  const e = Ft(t);
+function qt(t) {
+  const e = Bt(t);
   if (typeof e > "u")
     return;
   const n = e[0], o = function(a) {
@@ -677,15 +677,15 @@ function Ht(t) {
     const c = a.nodeName.toLowerCase();
     return c.indexOf("#") === 0 ? i + "<" + c + ">" : i + "<" + c + ' id="' + (a.id || "") + '">';
   }, "");
-  return zt(r + "_siblingIndex=" + o);
+  return Kt(r + "_siblingIndex=" + o);
 }
-function Ft(t) {
+function Bt(t) {
   const e = [];
   for (; t; )
     e.push(t), t = t.parentElement;
   return e;
 }
-function zt(t) {
+function Kt(t) {
   let e = t.length, n = 1 ^ e, o = 0, r;
   for (; e >= 4; )
     r = t.charCodeAt(o) & 255 | (t.charCodeAt(++o) & 255) << 8 | (t.charCodeAt(++o) & 255) << 16 | (t.charCodeAt(++o) & 255) << 24, r = (r & 65535) * 1540483477 + (((r >>> 16) * 1540483477 & 65535) << 16), r ^= r >>> 24, r = (r & 65535) * 1540483477 + (((r >>> 16) * 1540483477 & 65535) << 16), n = (n & 65535) * 1540483477 + (((n >>> 16) * 1540483477 & 65535) << 16) ^ r, e -= 4, ++o;
@@ -702,12 +702,12 @@ function zt(t) {
   }
   return n ^= n >>> 13, n = (n & 65535) * 1540483477 + (((n >>> 16) * 1540483477 & 65535) << 16), n ^= n >>> 15, n >>> 0;
 }
-const Wt = function() {
-  X(window, "oTracking.event", J);
+const Ht = function() {
+  z(window, "oTracking.event", M);
 };
-J.init = Wt;
+M.init = Ht;
 C("page_has_already_been_viewed", !1);
-const Qt = function() {
+const Ft = function() {
   return {
     category: "page",
     action: "view",
@@ -717,23 +717,23 @@ const Qt = function() {
     }
   };
 };
-function U(t, e) {
-  t = m(Qt(), {
+function T(t, e) {
+  t = m(Ft(), {
     context: t
-  }), h("page_has_already_been_viewed") && x.setRootID(), C("page_has_already_been_viewed", !0), Xt(t) ? h("config").test && console.warn("A page event has already been sent for this page, refusing to send a duplicate page event.") : (x.track(t, e), _t());
+  }), h("page_has_already_been_viewed") && x.setRootID(), C("page_has_already_been_viewed", !0), zt(t) ? h("config").test && console.warn("A page event has already been sent for this page, refusing to send a duplicate page event.") : (x.track(t, e), St());
 }
-let nt = {};
-function Xt(t) {
+let Z = {};
+function zt(t) {
   const e = JSON.parse(JSON.stringify(t));
-  return delete e.context.id, delete e.context.root_id, H(nt, e) ? !0 : (nt = e, !1);
+  return delete e.context.id, delete e.context.root_id, q(Z, e) ? !0 : (Z = e, !1);
 }
-function Yt(t) {
-  U(t.detail);
+function Wt(t) {
+  T(t.detail);
 }
-const Gt = function() {
-  X(window, "oTracking.page", Yt);
+const Qt = function() {
+  z(window, "oTracking.page", Wt);
 };
-U.init = Gt;
+T.init = Qt;
 function E(t) {
   this.listenerMap = [{}, {}], t && this.root(t), this.handle = E.prototype.handle.bind(this), this._removedListeners = [];
 }
@@ -764,7 +764,7 @@ E.prototype.on = function(t, e, n, o) {
     throw new TypeError("Invalid event type: " + t);
   if (typeof e == "function" && (o = n, n = e, e = null), o === void 0 && (o = this.captureForType(t)), typeof n != "function")
     throw new TypeError("Handler must be a type of Function");
-  return r = this.rootElement, i = this.listenerMap[o ? 1 : 0], i[t] || (r && r.addEventListener(t, this.handle, o), i[t] = []), e ? /^[a-z]+$/i.test(e) ? (c = e, a = Zt) : /^#[a-z0-9\-_]+$/i.test(e) ? (c = e.slice(1), a = ee) : (c = e, a = Element.prototype.matches) : (c = null, a = te.bind(this)), i[t].push({
+  return r = this.rootElement, i = this.listenerMap[o ? 1 : 0], i[t] || (r && r.addEventListener(t, this.handle, o), i[t] = []), e ? /^[a-z]+$/i.test(e) ? (c = e, a = Xt) : /^#[a-z0-9\-_]+$/i.test(e) ? (c = e.slice(1), a = Gt) : (c = e, a = Element.prototype.matches) : (c = null, a = Yt.bind(this)), i[t].push({
     selector: e,
     handler: n,
     matcher: a,
@@ -789,11 +789,11 @@ E.prototype.off = function(t, e, n, o) {
 E.prototype.handle = function(t) {
   let e, n;
   const o = t.type;
-  let r, i, a, c, s = [], f;
+  let r, i, a, c, s = [], u;
   const l = "ftLabsDelegateIgnore";
   if (t[l] === !0)
     return;
-  switch (f = t.target, f.nodeType === 3 && (f = f.parentNode), f.correspondingUseElement && (f = f.correspondingUseElement), r = this.rootElement, i = t.eventPhase || (t.target !== t.currentTarget ? 3 : 2), i) {
+  switch (u = t.target, u.nodeType === 3 && (u = u.parentNode), u.correspondingUseElement && (u = u.correspondingUseElement), r = this.rootElement, i = t.eventPhase || (t.target !== t.currentTarget ? 3 : 2), i) {
     case 1:
       s = this.listenerMap[1][o];
       break;
@@ -804,17 +804,17 @@ E.prototype.handle = function(t) {
       s = this.listenerMap[0][o];
       break;
   }
-  let u = [];
-  for (n = s.length; f && n; ) {
+  let f = [];
+  for (n = s.length; u && n; ) {
     for (e = 0; e < n && (a = s[e], !!a); e++)
-      f.tagName && ["button", "input", "select", "textarea"].indexOf(f.tagName.toLowerCase()) > -1 && f.hasAttribute("disabled") ? u = [] : a.matcher.call(f, a.matcherParam, f) && u.push([t, f, a]);
-    if (f === r || (n = s.length, f = f.parentElement || f.parentNode, f instanceof HTMLDocument))
+      u.tagName && ["button", "input", "select", "textarea"].indexOf(u.tagName.toLowerCase()) > -1 && u.hasAttribute("disabled") ? f = [] : a.matcher.call(u, a.matcherParam, u) && f.push([t, u, a]);
+    if (u === r || (n = s.length, u = u.parentElement || u.parentNode, u instanceof HTMLDocument))
       break;
   }
   let d;
-  for (e = 0; e < u.length; e++)
-    if (!(this._removedListeners.indexOf(u[e][2]) > -1) && (c = this.fire.apply(this, u[e]), c === !1)) {
-      u[e][0][l] = !0, u[e][0].preventDefault(), d = !1;
+  for (e = 0; e < f.length; e++)
+    if (!(this._removedListeners.indexOf(f[e][2]) > -1) && (c = this.fire.apply(this, f[e]), c === !1)) {
+      f[e][0][l] = !0, f[e][0].preventDefault(), d = !1;
       break;
     }
   return d;
@@ -822,10 +822,10 @@ E.prototype.handle = function(t) {
 E.prototype.fire = function(t, e, n) {
   return n.handler.call(e, t, e);
 };
-function Zt(t, e) {
+function Xt(t, e) {
   return t.toLowerCase() === e.tagName.toLowerCase();
 }
-function te(t, e) {
+function Yt(t, e) {
   return this.rootElement === window ? (
     // Match the outer document (dispatched from document)
     e === document || // The <html> element (dispatched from document.body or document.documentElement)
@@ -833,113 +833,113 @@ function te(t, e) {
     e === window
   ) : this.rootElement === e;
 }
-function ee(t, e) {
+function Gt(t, e) {
   return t === e.id;
 }
 E.prototype.destroy = function() {
   this.off(), this.root();
 };
-const ne = (t, e, n) => {
+const Zt = (t, e, n) => {
   const o = Array.from(t.querySelectorAll(n)), r = o.findIndex((i) => i === e);
   if (r !== -1)
     return {
       siblings: o.length,
       position: r
     };
-}, pt = [
+}, lt = [
   "nodeName",
   "className",
   "id",
   "href",
   "text",
   "role"
-], oe = (t) => {
+], te = (t) => {
   const e = {};
-  for (const n of pt) {
+  for (const n of lt) {
     const o = t[n] || t.getAttribute(n) || t.hasAttribute(n);
-    o !== void 0 && (typeof o == "boolean" ? e[n] = o : e[n] = j(o));
+    o !== void 0 && (typeof o == "boolean" ? e[n] = o : e[n] = R(o));
   }
   return e;
-}, re = (t) => {
+}, ee = (t) => {
   try {
     const e = JSON.parse(t), n = Object.prototype.toString.call(e);
     return [n === "[object Object]" || n === "[object Array]", e];
   } catch {
     return [!1, null];
   }
-}, ie = (t) => {
-  const [e, n] = re(t);
+}, ne = (t) => {
+  const [e, n] = ee(t);
   return e ? n : t;
-}, se = (t, e) => (t.filter((n) => n.name.match(/^data-trackable|^data-o-|^aria-/i)).forEach((n) => {
+}, oe = (t, e) => (t.filter((n) => n.name.match(/^data-trackable|^data-o-|^aria-/i)).forEach((n) => {
   e[n.name] = n.value;
-}), e), ae = (t, e, n) => {
+}), e), re = (t, e, n) => {
   const o = {};
-  return n && pt.forEach((r) => {
+  return n && lt.forEach((r) => {
     typeof e[r] < "u" && r !== "id" && (o[r] = e[r]);
   }), t.filter((r) => r.name.match(/^data-trackable-context-/i)).forEach((r) => {
-    o[r.name.replace("data-trackable-context-", "")] = ie(r.value);
+    o[r.name.replace("data-trackable-context-", "")] = ne(r.value);
   }), o;
 };
-function mt(t) {
+function dt(t) {
   const e = document, n = t, o = n.getAttribute("data-trackable") ? `[data-trackable="${n.getAttribute("data-trackable")}"]` : n.nodeName, r = [], i = {};
   for (; t && t !== e; ) {
-    const a = oe(t), c = Array.from(t.attributes);
-    let s = se(c, a);
+    const a = te(t), c = Array.from(t.attributes);
+    let s = oe(c, a);
     s["data-trackable"] && (s = Object.assign(
       s,
-      ne(t, n, o)
+      Zt(t, n, o)
     )), r.push(s);
-    const f = ae(c, a, t === n);
-    $(f, i), t = t.parentNode;
+    const u = re(c, a, t === n);
+    _(u, i), t = t.parentNode;
   }
   return { trace: r, customContext: i };
 }
-let q;
-const ce = [
+let J;
+const ie = [
   "ctrlKey",
   "altKey",
   "shiftKey",
   "metaKey"
-], fe = (t) => {
+], se = (t) => {
   const e = {};
-  for (const n of ce)
+  for (const n of ie)
     if (t[n])
       try {
-        e[n] = j(t[n]);
+        e[n] = R(t[n]);
       } catch (o) {
         console.log(o);
       }
   return e;
-}, ue = (t) => (e, n) => {
+}, ae = (t) => (e, n) => {
   if (n.getAttribute("data-o-tracking-do-not-track") === "true")
     return;
-  const o = fe(e), { trace: r, customContext: i } = mt(n);
-  o.domPathTokens = r, o.url = window.document.location.href || null, o.source_id = x.getRootID(), $(i, o), t.context = o;
+  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(), _(i, o), t.context = o;
   const a = m(h("config"), t);
   x.track(a);
-}, le = (t, e) => {
+}, ce = (t, e) => {
   e = e || 'a, button, input, [role="button"]';
   const n = {
     action: "click",
     category: t || "o-tracking"
   };
-  q = q || new E(document.body), q.on("click", e, ue(n), !0);
+  J = J || new E(document.body), J.on("click", e, ae(n), !0);
   const o = new b("clicks");
-  gt(o);
+  ht(o);
 };
-function gt(t) {
+function ht(t) {
   const e = t.shift();
-  e && x.track(e, () => gt(t));
+  e && x.track(e, () => ht(t));
 }
-const de = {
-  init: le
-}, he = [
+const ue = {
+  init: ce
+}, fe = [
   "componentContentId",
   "type",
   "subtype",
   "component"
-], pe = (t, e, n) => {
-  const { trace: o, customContext: r } = mt(e);
+], le = (t, e, n) => {
+  const { trace: o, customContext: r } = dt(e);
   let i;
   if (n.getContextData) {
     if (typeof n.getContextData != "function")
@@ -947,11 +947,11 @@ const de = {
     const a = n.getContextData(e);
     if (typeof a != "object")
       throw new Error("opts.getContextData function should return {object}");
-    i = $t(a, he);
+    i = At(a, fe);
   } else
     i = {};
-  i.domPathTokens = o, i.url = window.document.location.href || null, $(r, i), t.context = i;
-}, me = (t = {}) => {
+  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.');
     return;
@@ -966,39 +966,39 @@ const de = {
           action: t.action || "view",
           category: t.category || "component"
         }, s = a.target;
-        pe(c, s, t), x.track(c), r.unobserve(s);
+        le(c, s, t), x.track(c), r.unobserve(s);
       }
     });
   }
   const r = new IntersectionObserver(o, { threshold: [1] });
   n.forEach((i) => r.observe(i));
-}, ge = {
-  init: me
-}, ye = J.init, we = U.init, Y = "4.5.4", yt = "o-tracking";
-function wt(t) {
+}, he = {
+  init: de
+}, pe = M.init, me = T.init, W = "4.5.4", pt = "o-tracking";
+function mt(t) {
   let e = h("config") || {};
-  e = m(e, t), C("config", e), e.user && e.user.user_id && ct(e.user.user_id);
+  e = m(e, t), C("config", e), e.user && e.user.user_id && it(e.user.user_id);
 }
-function be() {
-  k.initialised = !1, G("config"), G("page_sent");
+function ge() {
+  k.initialised = !1, Q("config"), Q("page_sent");
 }
-function Ee() {
-  return "oTracking version " + Y;
+function ye() {
+  return "oTracking version " + W;
 }
-function ve(t = {}) {
+function we(t = {}) {
   if (k.initialised)
     return k;
-  if (!!bt() && (t = xe(t)), Object.keys(t).length === 0 && t.constructor === Object)
+  if (!!gt() && (t = be(t)), Object.keys(t).length === 0 && t.constructor === Object)
     return null;
-  C("version", Y), C("source", yt), C("page_sent", !1);
+  C("version", W), C("source", pt), C("page_sent", !1);
   const n = t ? t.cookieDomain : "";
-  return Nt("", n), wt(t), Tt(t.session), Vt(), ye(), we(), k.initialised = !0, k;
+  return Pt("", n), mt(t), It(t.session), jt(), pe(), me(), k.initialised = !0, k;
 }
-function bt() {
+function gt() {
   return document.querySelector("script[data-o-tracking-config]");
 }
-function xe(t) {
-  const e = bt();
+function be(t) {
+  const e = gt();
   let n;
   if (e)
     n = e.textContent || e.innerText || e.innerHTML;
@@ -1023,151 +1023,165 @@ const k = {
    * @type {boolean}
    */
   initialised: !1,
-  version: Y,
-  updateConfig: wt,
-  source: yt,
-  destroy: be,
-  toString: Ee,
-  init: ve,
-  click: de,
-  event: J,
-  page: U,
-  view: ge,
+  version: W,
+  updateConfig: mt,
+  source: pt,
+  destroy: ge,
+  toString: ye,
+  init: we,
+  click: ue,
+  event: M,
+  page: T,
+  view: he,
   getRootID: x.getRootID
 };
-function Et() {
-  k.init(), document.removeEventListener("o.DOMContentLoaded", Et);
+function yt() {
+  k.init(), document.removeEventListener("o.DOMContentLoaded", yt);
 }
-typeof document < "u" && document.addEventListener("o.DOMContentLoaded", Et);
-const ke = (t, e, n) => {
+typeof document < "u" && document.addEventListener("o.DOMContentLoaded", yt);
+const Ee = (t, e, n) => {
   const o = Array.from(t.querySelectorAll(n)), r = o.findIndex((i) => i === e);
   if (r !== -1)
     return {
       siblings: o.length,
       position: r
     };
-}, vt = [
+}, wt = [
   "nodeName",
   "className",
   "id",
   "href",
   "text",
   "role"
-], Oe = (t) => {
+], ve = (t) => {
   const e = {};
-  for (const n of vt) {
+  for (const n of wt) {
     const o = t[n] || t.getAttribute(n) || t.hasAttribute(n);
-    o !== void 0 && (typeof o == "boolean" ? e[n] = o : e[n] = j(o));
+    o !== void 0 && (typeof o == "boolean" ? e[n] = o : e[n] = R(o));
   }
   return e;
-}, Ce = (t) => {
+}, xe = (t) => {
   try {
     const e = JSON.parse(t), n = Object.prototype.toString.call(e);
     return [n === "[object Object]" || n === "[object Array]", e];
   } catch {
     return [!1, null];
   }
-}, Se = (t) => {
-  const [e, n] = Ce(t);
+}, ke = (t) => {
+  const [e, n] = xe(t);
   return e ? n : t;
-}, Ae = (t, e) => (t.filter(
+}, Oe = (t, e) => (t.filter(
   (n) => n.name.match(/^data-trackable|^data-o-|^aria-/i)
 ).forEach((n) => {
   e[n.name] = n.value;
-}), e), Pe = (t, e, n) => {
+}), e), Ce = (t, e, n) => {
   const o = {};
-  return n && vt.forEach((r) => {
+  return n && wt.forEach((r) => {
     typeof e[r] < "u" && r !== "id" && (o[r] = e[r]);
   }), t.filter((r) => r.name.match(/^data-trackable-context-/i)).forEach((r) => {
-    o[r.name.replace("data-trackable-context-", "")] = Se(r.value);
+    o[r.name.replace("data-trackable-context-", "")] = ke(r.value);
   }), o;
 };
-function _e(t, e) {
+function Se(t, e) {
   const n = t, o = n.getAttribute("data-trackable") ? `[data-trackable="${n.getAttribute("data-trackable")}"]` : n.nodeName, r = [], i = {};
   for (; t && t !== e; ) {
-    const a = Oe(t), c = Array.from(t.attributes);
-    let s = Ae(c, a);
+    const a = ve(t), c = Array.from(t.attributes);
+    let s = Oe(c, a);
     s["data-trackable"] && (s = Object.assign(
       s,
-      ke(t, n, o)
+      Ee(t, n, o)
     )), r.push(s);
-    const f = Pe(c, a, t === n);
-    $(f, i), t = t.parentNode;
+    const u = Ce(c, a, t === n);
+    _(u, i), t = t.parentNode;
   }
   return { trace: r, customContext: i };
 }
-let S = "ccc-component", T = "interactive";
-const $e = ["ctrlKey", "altKey", "shiftKey", "metaKey"], Ne = (t) => {
-  const e = {};
-  for (const n of $e)
-    if (t[n])
-      try {
-        e[n] = j(t[n]);
-      } catch (o) {
-        console.log(o);
-      }
-  return e;
-}, Le = (t, e) => (n, o) => {
-  const r = Ne(n), { trace: i, customContext: a } = _e(o, e);
-  r.custom = o.dataset && o.dataset.custom ? JSON.parse(o.dataset.custom) : null, r.domPathTokens = i, r.component = {
-    id: S,
-    name: S,
-    type: "custom-code-component",
-    subtype: T
-  }, r.teamName = "djd", $(a, r), t.context = r, t.method = "ftCustomAnalytics", document.body.dispatchEvent(
-    new CustomEvent("oTracking.event", {
-      detail: t,
-      bubbles: !0,
-      composed: !0
-    })
-  );
-};
-function Ie(t, e) {
-  const n = {
-    category: "component",
-    action: "act",
-    context: {
-      component: {
-        id: S,
-        name: S,
+const Ae = ["ctrlKey", "altKey", "shiftKey", "metaKey"];
+class Pe {
+  constructor({
+    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.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) {
+    const n = {};
+    for (const o of Ae)
+      if (e[o])
+        try {
+          n[o] = R(e[o]);
+        } catch (r) {
+          console.log(r);
+        }
+    return n;
+  }
+  // Controller for handling click events
+  handleClickEvent(e, n) {
+    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.cccId,
+        name: this.cccName,
         type: "custom-code-component",
-        subtype: T
+        subtype: this.subtype
+      }, i.teamName = this.teamName, _(c, i), e.context = i, e.method = "ftCustomAnalytics", document.body.dispatchEvent(
+        new CustomEvent("oTracking.event", {
+          detail: e,
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    };
+  }
+  sendSpoorEvent(e, n) {
+    const o = {
+      category: "component",
+      action: "act",
+      context: {
+        component: {
+          id: this.cccId,
+          name: this.cccName,
+          type: "custom-code-component",
+          subtype: this.subtype
+        },
+        teamName: this.teamName,
+        trigger_action: e,
+        custom: n
       },
-      teamName: "djd",
-      trigger_action: t,
-      custom: e
-    },
-    method: "ftCustomAnalytics"
-  };
-  document.body.dispatchEvent(
-    new CustomEvent("oTracking.event", {
-      detail: n,
-      bubbles: !0,
-      composed: !0
-    })
-  );
-}
-function De(t, e, n, o) {
-  if (!M.isInitialised) {
-    M.isInitialised = !0, t && (S = t.id || S, T = t.subtype || T), k.init({ queue: !0, test: !0 });
-    const r = o || 'a, button, input, [role="button"]', i = {
-      action: "click",
-      category: n || "cta"
-    }, a = e == null ? void 0 : e.querySelector("#component-root");
-    e && new w(a).on(
-      "click",
-      r,
-      Le(i, a),
-      !0
+      method: "ftCustomAnalytics"
+    };
+    document.body.dispatchEvent(
+      new CustomEvent("oTracking.event", {
+        detail: o,
+        bubbles: !0,
+        composed: !0
+      })
     );
   }
+  init(e) {
+    var n;
+    if (!this.isInitialised) {
+      this.isInitialised = !0, this.cccId = e || this.cccId, k.init({ queue: !0, test: !0 });
+      const o = {
+        action: "click",
+        category: this.category
+      }, r = (n = this.shadowRoot) == null ? void 0 : n.querySelector("#component-root");
+      this.shadowRoot && new w(r).on(
+        "click",
+        this.elements,
+        this.handleClickEvent(o, r),
+        !0
+      );
+    }
+  }
 }
-const M = {
-  init: De,
-  isInitialised: !1,
-  sendSpoorEvent: Ie
-};
-class Te extends HTMLElement {
+class _e extends HTMLElement {
   constructor() {
     super(...arguments), this.RESERVED_ATTRS = /* @__PURE__ */ new Set([
       "iframe",
@@ -1188,14 +1202,19 @@ class Te extends HTMLElement {
     const e = this.shadowRoot ?? this.attachShadow({ mode: this.mode }), n = this.app, o = JSON.parse(this.getAttribute("data-component-props")), r = Object.fromEntries(
       [...this.attributes].filter((s) => !this.RESERVED_ATTRS.has(s.name)).map((s) => [s.name, s.value])
     );
-    (c = this.shadowRoot) == null || c.replaceChildren();
+    (c = this.shadowRoot) == null || c.replaceChildren(), this.tracking = new Pe({
+      name: `${this.getAttribute("path")}@${this.getAttribute("version")}`,
+      subtype: "interactive",
+      teamName: "djd",
+      shadowRoot: this.shadowRoot
+    });
     const { unmount: i, onmessage: a } = n(
       e,
       {
         ...r,
         data: o,
         port: this.channel.port2,
-        tracking: M
+        tracking: this.tracking
       },
       ...this.children
     ) || {};
@@ -1212,8 +1231,8 @@ class Te extends HTMLElement {
     if (!(!i || !a || !c)) {
       this.source = r ? `http://localhost:5173/src/${i}/index.jsx` : `https://www.ft.com/__component/${c}/${a}${n ? `@${n}` : "@latest"}/${i}/${i}.js`;
       try {
-        this.app = await new Promise((f, l) => {
-          const u = setTimeout(() => {
+        this.app = await new Promise((u, l) => {
+          const f = setTimeout(() => {
             this.dispatchEvent(
               new CustomEvent("ccc-timeout", {
                 bubbles: !0,
@@ -1231,17 +1250,17 @@ class Te extends HTMLElement {
             /* @vite-ignore */
           ).then(({ default: d }) => {
             if (d)
-              clearTimeout(u), f(d);
+              clearTimeout(f), u(d);
             else
-              throw new R(
+              throw new D(
                 "No component renderer default export found"
               );
-          }).catch((d) => l(new R(d)));
+          }).catch((d) => l(new D(d)));
         });
-      } catch (f) {
+      } catch (u) {
         console.error(
           `<custom-code-component> error during import from ${e}@${n}`
-        ), delete this.dataset.cccReady, this.dataset.cccError = "import-failure", this.dispatchEvent(new ErrorEvent("error", f)), console.error(f);
+        ), delete this.dataset.cccReady, this.dataset.cccError = "import-failure", this.dispatchEvent(new ErrorEvent("error", u)), console.error(u);
         return;
       }
       try {
@@ -1255,23 +1274,17 @@ class Te extends HTMLElement {
             }
           })
         ), this.dataset.cccReady = "true", delete this.dataset.cccError;
-      } catch (f) {
+      } catch (u) {
         console.info(
           `<custom-code-component> uncaught error during mount from ${e}@${n}`
-        ), console.error(f), this.dispatchEvent(new ErrorEvent("error", f)), this.dataset.cccError = "mount-error", delete this.dataset.cccReady;
+        ), console.error(u), this.dispatchEvent(new ErrorEvent("error", u)), this.dataset.cccError = "mount-error", delete this.dataset.cccReady;
       }
       try {
-        M.init(
-          {
-            id: this.getAttribute("path"),
-            subtype: "interactive"
-          },
-          this.shadowRoot
-        );
-      } catch (f) {
+        this.tracking.init(this.id);
+      } catch (u) {
         console.info(
           `Error initialising tracking on <custom-code-component> ${e}@${n}`
-        ), console.error(f);
+        ), console.error(u);
       }
     }
   }
@@ -1286,13 +1299,13 @@ class Te extends HTMLElement {
     this.channel.port1.postMessage(e);
   }
 }
-const Me = () => customElements.define("custom-code-component", Te);
-customElements && !customElements.get("custom-code-component") && Me();
-class R extends Error {
+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, R), this.name = "CCCImportError";
+    super(...e), Error.captureStackTrace && Error.captureStackTrace(this, D), this.name = "CCCImportError";
   }
 }
 export {
-  Me as init
+  Ne as init
 };