@financial-times/custom-code-component 1.10.5 → 1.11.1

package/dist/custom-code-component.js

@@ -145,7 +145,7 @@ const k = (o, t, e) => {
   (e) => e.name.match(/^data-trackable|^data-o-|^aria-/i)
 ).forEach((e) => {
   t[e.name] = e.value;
-}), t), x = (o, t, e) => {
+}), t), C = (o, t, e) => {
   const n = {};
   return e && E.forEach((s) => {
     typeof t[s] < "u" && s !== "id" && (n[s] = t[s]);
@@ -153,7 +153,7 @@ const k = (o, t, e) => {
     n[s.name.replace("data-trackable-context-", "")] = P(s.value);
   }), n;
 };
-function C(o, t) {
+function L(o, t) {
   const e = o, n = e.getAttribute("data-trackable") ? `[data-trackable="${e.getAttribute("data-trackable")}"]` : e.nodeName, s = [], i = {};
   for (; o && o !== t; ) {
     const a = A(o), r = Array.from(o.attributes);
@@ -162,12 +162,12 @@ function C(o, t) {
       h,
       k(o, e, n)
     )), s.push(h);
-    const c = x(r, a, o === e);
+    const c = C(r, a, o === e);
     b(c, i), o = o.parentNode;
   }
   return { trace: s, customContext: i };
 }
-const L = ["ctrlKey", "altKey", "shiftKey", "metaKey"];
+const x = ["ctrlKey", "altKey", "shiftKey", "metaKey"];
 class M {
   constructor({
     id: t = "00000000-0000-0000-0000-000000000000",
@@ -183,7 +183,7 @@ class M {
   // Get properties for the event (as opposed to properties of the clicked element)
   getEventProperties(t) {
     const e = {};
-    for (const n of L)
+    for (const n of x)
       if (t[n])
         try {
           e[n] = g(t[n]);
@@ -195,13 +195,13 @@ class M {
   // Controller for handling click events
   handleClickEvent(t, e) {
     return (n, s) => {
-      const i = this.getEventProperties(n), { trace: a, customContext: r } = C(s, e);
+      const i = this.getEventProperties(n), { trace: a, customContext: r } = L(s, e);
       i.custom = s.dataset && s.dataset.custom ? JSON.parse(s.dataset.custom) : null, i.domPathTokens = a, i.component = {
         id: this.cccId,
         name: this.cccName,
         type: "custom-code-component",
         subtype: this.subtype
-      }, i.teamName = this.teamName, b(r, i), t.context = i, t.method = "ftCustomAnalytics", document.body.dispatchEvent(
+      }, i.teamName = this.teamName, i.url = document.URL, b(r, i), i.method = "ftCustomAnalytics", t = { ...t, ...i }, document.body.dispatchEvent(
         new CustomEvent("oTracking.event", {
           detail: t,
           bubbles: !0,
@@ -214,17 +214,15 @@ class M {
     const n = {
       category: "component",
       action: "act",
-      context: {
-        component: {
-          id: this.cccId,
-          name: this.cccName,
-          type: "custom-code-component",
-          subtype: this.subtype
-        },
-        teamName: this.teamName,
-        trigger_action: t,
-        custom: e
+      component: {
+        id: this.cccId,
+        name: this.cccName,
+        type: "custom-code-component",
+        subtype: this.subtype
       },
+      teamName: this.teamName,
+      trigger_action: t,
+      custom: e,
       method: "ftCustomAnalytics"
     };
     document.body.dispatchEvent(
@@ -252,7 +250,7 @@ class M {
     }
   }
 }
-class O extends HTMLElement {
+class R extends HTMLElement {
   constructor() {
     super(...arguments), this.RESERVED_ATTRS = /* @__PURE__ */ new Set([
       "iframe",
@@ -370,13 +368,13 @@ class O extends HTMLElement {
     this.channel.port1.postMessage(t);
   }
 }
-const R = () => customElements.define("custom-code-component", O);
-customElements && !customElements.get("custom-code-component") && R();
+const O = () => customElements.define("custom-code-component", R);
+customElements && !customElements.get("custom-code-component") && O();
 class f extends Error {
   constructor(...t) {
     super(...t), Error.captureStackTrace && Error.captureStackTrace(this, f), this.name = "CCCImportError";
   }
 }
 export {
-  R as init
+  O as init
 };

package/package.json

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

package/src/tracking.ts

@@ -76,11 +76,12 @@ class Tracking {
         subtype: this.subtype,
       };
       context.teamName = this.teamName;
+      context.url = document.URL;
 
       assignIfUndefined(customContext, context);
 
-      eventData.context = context;
-      eventData.method = "ftCustomAnalytics";
+      context.method = "ftCustomAnalytics";
+      eventData = { ...eventData, ...context };
 
       // send spoor event
       document.body.dispatchEvent(
@@ -97,17 +98,15 @@ class Tracking {
     const eventData = {
       category: "component",
       action: "act",
-      context: {
-        component: {
-          id: this.cccId,
-          name: this.cccName,
-          type: "custom-code-component",
-          subtype: this.subtype,
-        },
-        teamName: this.teamName,
-        trigger_action: triggerAction,
-        custom: extraDetail,
+      component: {
+        id: this.cccId,
+        name: this.cccName,
+        type: "custom-code-component",
+        subtype: this.subtype,
       },
+      teamName: this.teamName,
+      trigger_action: triggerAction,
+      custom: extraDetail,
       method: "ftCustomAnalytics",
     };
 
@@ -135,7 +134,6 @@ class Tracking {
 
       if (this.shadowRoot) {
         const shadowDelegate = new Delegate(root);
-
         shadowDelegate.on(
           "click",
           this.elements,