Add more component analytics

src/nationalarchives/analytics.mjs

@@ -5,17 +5,27 @@ import {
   valueGetters,
 } from "./lib/analytics-helpers.mjs";
 import BreadcrumbAnalytics from "./components/breadcrumbs/analytics.js";
+import CheckboxesAnalytics from "./components/checkboxes/analytics.js";
 import GlobalHeaderAnalytics from "./components/global-header/analytics.js";
 import HeaderAnalytics from "./components/header/analytics.js";
 import HeroAnalytics from "./components/hero/analytics.js";
 import PictureAnalytics from "./components/picture/analytics.js";
+import RadiosAnalytics from "./components/radios/analytics.js";
+import SearchFieldAnalytics from "./components/search-field/analytics.js";
+import TextInputAnalytics from "./components/text-input/analytics.js";
+import TextareaAnalytics from "./components/textarea/analytics.js";
 
 const componentAnalytics = [
   ...BreadcrumbAnalytics,
+  ...CheckboxesAnalytics,
   ...GlobalHeaderAnalytics,
   ...HeaderAnalytics,
   ...HeroAnalytics,
   ...PictureAnalytics,
+  ...RadiosAnalytics,
+  ...SearchFieldAnalytics,
+  ...TextInputAnalytics,
+  ...TextareaAnalytics,
 ];
 
 class EventTracker {
@@ -113,6 +123,10 @@ class EventTracker {
           typeof eventDataInit.state === "function"
             ? eventDataInit.state.call(this, $el, $scope, event)
             : eventDataInit.state || null,
+        group:
+          typeof eventDataInit.group === "function"
+            ? eventDataInit.group.call(this, $el, $scope, event)
+            : eventDataInit.group || null,
         scope: getXPathTo($scope),
         targetElement: targetElement,
         timestamp: new Date().toISOString(),

src/nationalarchives/components/checkboxes/analytics.js

@@ -0,0 +1,25 @@
+import { valueGetters } from "../../lib/analytics-helpers.mjs";
+
+export default [
+  {
+    scope: ".tna-checkboxes",
+    areaName: "checkboxes",
+    events: [
+      {
+        eventName: "toggle",
+        targetElement: ".tna-checkboxes__item input",
+        on: "change",
+        data: {
+          state: valueGetters.checked,
+          // eslint-disable-next-line no-unused-vars
+          value: ($el, $scope, event) => $el.parentNode.innerText,
+          // eslint-disable-next-line no-unused-vars
+          group: ($el, $scope, event) =>
+            $scope
+              .closest(".tna-form__group")
+              ?.querySelector(".tna-form__heading")?.innerText,
+        },
+      },
+    ],
+  },
+];

src/nationalarchives/components/radios/analytics.js

@@ -0,0 +1,25 @@
+import { valueGetters } from "../../lib/analytics-helpers.mjs";
+
+export default [
+  {
+    scope: ".tna-radios",
+    areaName: "radios",
+    events: [
+      {
+        eventName: "toggle",
+        targetElement: ".tna-radios__item input",
+        on: "change",
+        data: {
+          state: valueGetters.checked,
+          // eslint-disable-next-line no-unused-vars
+          value: ($el, $scope, event) => $el.parentNode.innerText,
+          // eslint-disable-next-line no-unused-vars
+          group: ($el, $scope, event) =>
+            $scope
+              .closest(".tna-form__group")
+              ?.querySelector(".tna-form__heading")?.innerText,
+        },
+      },
+    ],
+  },
+];

src/nationalarchives/components/search-field/analytics.js

@@ -0,0 +1,22 @@
+import { valueGetters } from "../../lib/analytics-helpers.mjs";
+
+export default [
+  {
+    scope: ".tna-search-field",
+    areaName: "search-field",
+    events: [
+      {
+        eventName: "blurred",
+        targetElement: ".tna-search-field__input",
+        on: "blur",
+        data: {
+          // eslint-disable-next-line no-unused-vars
+          value: valueGetters.value,
+          // eslint-disable-next-line no-unused-vars
+          group: ($el, $scope, event) =>
+            $scope.querySelector(".tna-form__heading")?.innerText,
+        },
+      },
+    ],
+  },
+];

src/nationalarchives/components/text-input/analytics.js

@@ -0,0 +1,23 @@
+import { valueGetters } from "../../lib/analytics-helpers.mjs";
+
+export default [
+  {
+    scope: ".tna-text-input",
+    areaName: "text-input",
+    events: [
+      {
+        eventName: "blurred",
+        on: "blur",
+        data: {
+          // eslint-disable-next-line no-unused-vars
+          value: valueGetters.value,
+          // eslint-disable-next-line no-unused-vars
+          group: ($el, $scope, event) =>
+            $scope
+              .closest(".tna-form__group")
+              ?.querySelector(".tna-form__heading")?.innerText,
+        },
+      },
+    ],
+  },
+];

src/nationalarchives/components/textarea/analytics.js

@@ -0,0 +1,23 @@
+import { valueGetters } from "../../lib/analytics-helpers.mjs";
+
+export default [
+  {
+    scope: ".tna-textarea",
+    areaName: "textarea",
+    events: [
+      {
+        eventName: "blurred",
+        on: "blur",
+        data: {
+          // eslint-disable-next-line no-unused-vars
+          value: valueGetters.value,
+          // eslint-disable-next-line no-unused-vars
+          group: ($el, $scope, event) =>
+            $scope
+              .closest(".tna-form__group")
+              ?.querySelector(".tna-form__heading")?.innerText,
+        },
+      },
+    ],
+  },
+];

src/nationalarchives/lib/analytics-helpers.mjs

@@ -56,6 +56,8 @@ const valueGetters = {
   html: ($el, $scope, event) => $el.innerHTML,
   // eslint-disable-next-line no-unused-vars
   value: ($el, $scope, event) => $el.value,
+  // eslint-disable-next-line no-unused-vars
+  checked: ($el, $scope, event) => ($el.checked ? "checked" : "unchecked"),
 };
 
 export { getXPathTo, getClosestHeading, valueGetters };