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

package/dist/tracking.d.ts

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

package/package.json

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

package/src/custom-code-component.ts

@@ -5,7 +5,7 @@
 
 import { ContentTree } from "@financial-times/content-tree";
 import { BaseRenderer } from "../../ccc-sdk/src/renderers/AbstractBaseRenderer";
-import tracking from "./analytics";
+import Tracking from "./tracking";
 
 class FTCustomCodeComponent extends HTMLElement {
   app: typeof BaseRenderer.prototype.render;
@@ -24,6 +24,7 @@ class FTCustomCodeComponent extends HTMLElement {
   ]);
 
   source: string;
+  tracking: Tracking;
 
   async mount() {
     if (!this.app) {
@@ -45,6 +46,14 @@ class FTCustomCodeComponent extends HTMLElement {
     // Clear old children
     this.shadowRoot?.replaceChildren();
 
+    // Create tracking instance
+    this.tracking = new Tracking({
+      name: `${this.getAttribute("path")}@${this.getAttribute("version")}`,
+      subtype: "interactive",
+      teamName: "djd",
+      shadowRoot: this.shadowRoot as ShadowRoot,
+    });
+
     const { unmount, onmessage } =
       App(
         shadow,
@@ -52,7 +61,7 @@ class FTCustomCodeComponent extends HTMLElement {
           ...extraProps,
           data,
           port: this.channel.port2,
-          tracking,
+          tracking: this.tracking,
         },
         ...this.children
       ) || {};
@@ -162,13 +171,7 @@ class FTCustomCodeComponent extends HTMLElement {
     }
 
     try {
-      tracking.init(
-        {
-          id: this.getAttribute("path") as string,
-          subtype: "interactive",
-        },
-        this.shadowRoot
-      );
+      this.tracking.init(this.id);
     } catch (e) {
       console.info(
         `Error initialising tracking on <custom-code-component> ${path}@${componentVersionRange}`

package/src/tracking.ts

@@ -0,0 +1,145 @@
+import Delegate from "ftdomdelegate";
+import oTracking from "@financial-times/o-tracking";
+import { getTrace } from "./get-trace";
+import {
+  sanitise,
+  assignIfUndefined,
+} from "@financial-times/o-tracking/src/javascript/utils.js";
+
+const eventPropertiesToCollect = ["ctrlKey", "altKey", "shiftKey", "metaKey"];
+
+class Tracking {
+  cccId: string;
+  cccName: string;
+  subtype: string;
+  teamName: string;
+  shadowRoot: ShadowRoot | null;
+  category: string;
+  elements: string | string[];
+  isInitialised: boolean;
+
+  constructor({
+    id = "00000000-0000-0000-0000-000000000000",
+    name = "ccc-component",
+    subtype = "interactive",
+    teamName = "djd",
+    shadowRoot = null,
+    category = "cta",
+    elements = 'a, button, input, [role="button"]',
+  } = {}) {
+    this.cccId = id;
+    this.cccName = name;
+    this.subtype = subtype;
+    this.teamName = teamName;
+    this.shadowRoot = shadowRoot;
+    this.category = category;
+    this.elements = elements;
+    this.isInitialised = false;
+  }
+
+  // Get properties for the event (as opposed to properties of the clicked element)
+  getEventProperties(event) {
+    const eventProperties = {};
+    for (const property of eventPropertiesToCollect) {
+      if (event[property]) {
+        try {
+          eventProperties[property] = sanitise(event[property]);
+        } catch (e) {
+          console.log(e);
+        }
+      }
+    }
+    return eventProperties;
+  }
+
+  // Controller for handling click events
+  handleClickEvent(eventData, root) {
+    return (clickEvent, clickElement) => {
+      const context: any = this.getEventProperties(clickEvent);
+      const { trace, customContext } = getTrace(clickElement, root);
+      context.custom =
+        clickElement.dataset && clickElement.dataset.custom
+          ? JSON.parse(clickElement.dataset.custom)
+          : null;
+      context.domPathTokens = trace;
+      context.component = {
+        id: this.cccId,
+        name: this.cccName,
+        type: "custom-code-component",
+        subtype: this.subtype,
+      };
+      context.teamName = this.teamName;
+
+      assignIfUndefined(customContext, context);
+
+      eventData.context = context;
+      eventData.method = "ftCustomAnalytics";
+
+      // send spoor event
+      document.body.dispatchEvent(
+        new CustomEvent("oTracking.event", {
+          detail: eventData,
+          bubbles: true,
+          composed: true,
+        })
+      );
+    };
+  }
+
+  sendSpoorEvent(triggerAction, extraDetail) {
+    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,
+      },
+      method: "ftCustomAnalytics",
+    };
+
+    // send spoor event
+    document.body.dispatchEvent(
+      new CustomEvent("oTracking.event", {
+        detail: eventData,
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  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
+
+      const eventData = {
+        action: "click",
+        category: this.category,
+      };
+
+      const root = this.shadowRoot?.querySelector("#component-root");
+
+      if (this.shadowRoot) {
+        const shadowDelegate = new Delegate(root);
+
+        shadowDelegate.on(
+          "click",
+          this.elements,
+          this.handleClickEvent(eventData, root),
+          true
+        );
+      }
+    }
+  }
+}
+
+export default Tracking;

package/dist/analytics.d.ts

@@ -1,11 +0,0 @@
-declare function sendSpoorEvent(triggerAction: any, extraDetail: any): void;
-declare function init(templateObj: {
-    id?: string;
-    subtype?: string;
-}, shadowRoot?: ShadowRoot, category?: string, elements?: []): void;
-declare const tracking: {
-    init: typeof init;
-    isInitialised: boolean;
-    sendSpoorEvent: typeof sendSpoorEvent;
-};
-export default tracking;

package/src/analytics.ts

@@ -1,137 +0,0 @@
-import Delegate from "ftdomdelegate";
-import oTracking from "@financial-times/o-tracking";
-import { getTrace } from "./get-trace";
-import {
-  sanitise,
-  assignIfUndefined,
-} from "@financial-times/o-tracking/src/javascript/utils.js";
-
-// default values if nothing is passed into init
-let cccName = "ccc-component";
-let subtype = "interactive";
-
-const eventPropertiesToCollect = ["ctrlKey", "altKey", "shiftKey", "metaKey"];
-
-// Get properties for the event (as opposed to properties of the clicked element)
-// Available properties include mouse x- and y co-ordinates, for example.
-const getEventProperties = (event) => {
-  const eventProperties = {};
-  for (const property of eventPropertiesToCollect) {
-    if (event[property]) {
-      try {
-        eventProperties[property] = sanitise(event[property]);
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.log(e);
-      }
-    }
-  }
-
-  return eventProperties;
-};
-
-// Controller for handling click events
-const handleClickEvent = (eventData, root) => (clickEvent, clickElement) => {
-  const context = getEventProperties(clickEvent);
-  const { trace, customContext } = getTrace(clickElement, root);
-  context.custom =
-    clickElement.dataset && clickElement.dataset.custom
-      ? JSON.parse(clickElement.dataset.custom)
-      : null;
-  context.domPathTokens = trace;
-  context.component = {
-    id: cccName,
-    name: cccName,
-    type: "custom-code-component",
-    subtype,
-  };
-  context.teamName = "djd";
-
-  assignIfUndefined(customContext, context);
-
-  eventData.context = context;
-  eventData.method = "ftCustomAnalytics";
-
-  // send spoor event
-  document.body.dispatchEvent(
-    new CustomEvent("oTracking.event", {
-      detail: eventData,
-      bubbles: true,
-      composed: true,
-    })
-  );
-};
-
-function sendSpoorEvent(triggerAction, extraDetail) {
-  const eventData = {
-    category: "component",
-    action: "act",
-    context: {
-      component: {
-        id: cccName,
-        name: cccName,
-        type: "custom-code-component",
-        subtype,
-      },
-      teamName: "djd",
-      trigger_action: triggerAction,
-      custom: extraDetail,
-    },
-    method: "ftCustomAnalytics",
-  };
-
-  // send spoor event
-  document.body.dispatchEvent(
-    new CustomEvent("oTracking.event", {
-      detail: eventData,
-      bubbles: true,
-      composed: true,
-    })
-  );
-}
-
-function init(
-  templateObj: { id?: string; subtype?: string },
-  shadowRoot?: ShadowRoot,
-  category?: string,
-  elements?: []
-) {
-  if (!tracking.isInitialised) {
-    tracking.isInitialised = true;
-    if (templateObj) {
-      cccName = templateObj.id || cccName;
-      subtype = templateObj.subtype || subtype;
-    }
-
-    oTracking.init({ queue: true, test: true }); // @TODO: Flip this to false before using in production
-
-    const elementsToTrack = elements || 'a, button, input, [role="button"]';
-
-    // Note: `context` is the term o-tracking uses for the data that is sent to spoor
-    const eventData = {
-      action: "click",
-      category: category || "cta",
-    };
-
-    const root = shadowRoot?.querySelector("#component-root");
-
-    if (shadowRoot) {
-      const shadowDelegate = new Delegate(root);
-
-      shadowDelegate.on(
-        "click",
-        elementsToTrack,
-        handleClickEvent(eventData, root),
-        true
-      );
-    }
-  }
-}
-
-const tracking = {
-  init,
-  isInitialised: false,
-  sendSpoorEvent,
-};
-
-export default tracking;