Add more analytics for breadcrumbs and gallery, add GA4 mock tracking

nationalarchives · Dec 10, 2024 · 4c718ef · 4c718ef
1 parent a484225
commit 4c718ef
Show file tree

Hide file tree

Showing 13 changed files with 2,828 additions and 5,022 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -3,6 +3,7 @@ import "../src/nationalarchives/font-awesome.scss";
 import { a11yConfig } from "./storybook-config";
 import { customViewports } from "./viewports";
 import Cookies from "../src/nationalarchives/lib/cookies.mjs";
+import { GA4 } from "../src/nationalarchives/analytics.mjs";
 
 document.documentElement.classList.add(
   "tna-template",
@@ -32,11 +33,28 @@ export const parameters = {
   },
 };
 
+class MockGA4Tracking extends GA4 {
+  constructor(documentScope) {
+    super({ documentScope });
+  }
+
+  pushToDataLayer(data) {
+    super.pushToDataLayer();
+    console.log(data);
+  }
+}
+
 export const decorators = [
   (Story, ctx) => {
     window.dataLayer = [];
     const cookies = new Cookies();
     cookies.deleteAll();
-    return Story();
+    const story = Story();
+    if (window && ctx.args.disableMockAnalytics !== true) {
+      setTimeout(() => {
+        new MockGA4Tracking(ctx.canvasElement);
+      }, 1);
+    }
+    return story;
   },
 ];
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Optional `data-tnacookiesdomain` and `data-tnacookiespath` attributes on the `<html>` element can be used to define the domain and path for cookies
+- Analytics added for breadcrumbs and gallery components
+- Allowed the document scope of an `EventTracker` instance to be changed
 
 ### Changed
 
@@ -22,6 +24,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Remove bottom margin of shifted hero components on smaller devices
+- Fixed `getXPathTo` on analytics helpers if the element has no parent node
+- Changed the incorrect `aria-selected` attribute on gallery items to `aria-current`
 
 ### Security
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,16 +47,16 @@
     "@babel/core": "^7.25.8",
     "@babel/preset-env": "^7.25.8",
     "@mdx-js/react": "^3.0.1",
-    "@storybook/addon-a11y": "^8.3.5",
-    "@storybook/addon-docs": "^8.3.5",
-    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-interactions": "^8.3.5",
-    "@storybook/addon-links": "^8.3.5",
-    "@storybook/addon-mdx-gfm": "^8.3.5",
-    "@storybook/html": "^8.3.5",
-    "@storybook/html-webpack5": "^8.3.5",
-    "@storybook/test": "^8.3.5",
-    "@storybook/test-runner": "^0.19.1",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-docs": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-mdx-gfm": "^8.4.7",
+    "@storybook/html": "^8.4.7",
+    "@storybook/html-webpack5": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/test-runner": "^0.20.1",
     "axe-playwright": "^2.0.3",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.2.1",
@@ -65,7 +65,7 @@
     "css-loader": "^7.1.2",
     "diff": "^7.0.0",
     "eslint": "^8.57.1",
-    "eslint-plugin-storybook": "^0.9.0",
+    "eslint-plugin-storybook": "^0.11.1",
     "glob": "^11.0.0",
     "html-validate": "^8.24.1",
     "jest-environment-jsdom": "^29.7.0",
@@ -76,10 +76,10 @@
     "sass": "^1.79.5",
     "sass-loader": "^16.0.2",
     "simple-nunjucks-loader": "^3.2.0",
-    "storybook": "^8.3.5",
+    "storybook": "^8.4.7",
     "style-loader": "^4.0.0",
     "stylelint": "^16.10.0",
-    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-config-standard-scss": "^14.0.0",
     "stylelint-order": "^6.0.4",
     "stylelint-selector-bem-pattern": "^4.0.1",
     "webpack": "^5.95.0",

diff --git a/src/nationalarchives/analytics.mjs b/src/nationalarchives/analytics.mjs
@@ -50,14 +50,16 @@ class EventTracker {
   prefix = "tna";
 
   /** @protected */
-  addTrackingCode = true;
+  document = document;
 
   constructor(options = {}) {
-    const { prefix = null, addTrackingCode = true } = options;
+    const { prefix = null, documentScope = document } = options;
     if (prefix) {
       this.prefix = prefix;
     }
-    this.addTrackingCode = addTrackingCode;
+    if (documentScope) {
+      this.document = documentScope;
+    }
   }
 
   start(initAll) {
@@ -108,7 +110,7 @@ class EventTracker {
   addListeners(scope, areaName, events, rootEventName = "") {
     let scopeArray;
     if (typeof scope === "string") {
-      scopeArray = Array.from(document.querySelectorAll(scope));
+      scopeArray = Array.from(this.document.querySelectorAll(scope));
     } else if (typeof scope === "object") {
       scopeArray = [scope];
     }
@@ -238,6 +240,9 @@ class EventTracker {
  * @public
  */
 class GA4 extends EventTracker {
+  /** @protected */
+  addTrackingCode = true;
+
   /** @protected */
   trackingCodeAdded = false;
 
@@ -257,8 +262,9 @@ class GA4 extends EventTracker {
       initAll = true,
       addTrackingCode = true,
     } = options;
-    super({ prefix, addTrackingCode });
+    super({ prefix });
     window.TNAFrontendAnalyticsGA4 = this;
+    this.addTrackingCode = addTrackingCode;
     window.dataLayer = window.dataLayer || [];
     if (id) {
       this.gTagId = id;

diff --git a/src/nationalarchives/components/breadcrumbs/analytics.js b/src/nationalarchives/components/breadcrumbs/analytics.js
@@ -4,13 +4,30 @@ export default [
   {
     scope: ".tna-breadcrumbs",
     areaName: "breadcrumbs",
+    rootEventName: "select_navigation",
     events: [
+      {
+        eventName: "click",
+        targetElement: "a.tna-breadcrumbs__link",
+        on: "click",
+        data: { state: "expand", value: valueGetters.html },
+        rootData: {
+          data_component_name: "Breadcrumb",
+          data_link_type: "Breadcrumb link",
+          data_link: valueGetters.text,
+        },
+      },
       {
         eventName: "click",
         targetElement:
           ".tna-breadcrumbs__item--expandable button.tna-breadcrumbs__link",
         on: "click",
         data: { state: "expand", value: valueGetters.html },
+        rootData: {
+          data_component_name: "Breadcrumb",
+          data_link_type: "Breadcrumb expand",
+          data_link: valueGetters.text,
+        },
       },
     ],
   },

diff --git a/src/nationalarchives/components/cookie-banner/cookie-banner.stories.js b/src/nationalarchives/components/cookie-banner/cookie-banner.stories.js
@@ -65,6 +65,7 @@ Standard.args = {
   cookiesUrl: "#",
   cookiesPath: "/tna-frontend/",
   classes: "tna-cookie-banner--demo",
+  disableMockAnalytics: true,
 };
 
 export const Accept = Template.bind({});
@@ -73,6 +74,7 @@ Accept.args = {
   cookiesUrl: "#",
   allowInsecure: true,
   classes: "tna-cookie-banner--demo",
+  disableMockAnalytics: true,
 };
 Accept.play = async ({ canvasElement }) => {
   const cookies = new Cookies({ newInstance: true });
@@ -115,6 +117,7 @@ Reject.args = {
   serviceName: "My service",
   cookiesUrl: "#",
   classes: "tna-cookie-banner--demo",
+  disableMockAnalytics: true,
 };
 Reject.play = async ({ canvasElement }) => {
   const cookies = new Cookies({ newInstance: true });
@@ -152,6 +155,7 @@ CustomPolicies.args = {
   cookiesUrl: "#",
   policies: "custom",
   classes: "tna-cookie-banner--demo",
+  disableMockAnalytics: true,
 };
 CustomPolicies.parameters = {
   chromatic: { disableSnapshot: true },
@@ -190,6 +194,7 @@ Existing.args = {
   cookiesUrl: "#",
   allowInsecure: true,
   classes: "tna-cookie-banner--demo",
+  disableMockAnalytics: true,
 };
 Existing.decorators = [
   (Story) => {

diff --git a/src/nationalarchives/components/gallery/analytics.js b/src/nationalarchives/components/gallery/analytics.js
@@ -4,6 +4,7 @@ export default [
   {
     scope: ".tna-gallery",
     areaName: "gallery",
+    rootEventName: "select_feature",
     events: [
       {
         eventName: "click",
@@ -12,6 +13,11 @@ export default [
         data: {
           value: valueGetters.text,
         },
+        rootData: {
+          data_component_name: "Gallery",
+          data_link_type: "Pagination thumbnail",
+          data_position: valueGetters.index,
+        },
       },
       {
         eventName: "click",
@@ -23,6 +29,11 @@ export default [
               ".tna-gallery__item:not([hidden]) .tna-gallery__item-header",
             ).innerText,
         },
+        rootData: {
+          data_component_name: "Gallery",
+          data_link_type: "Navigation button",
+          data_link: valueGetters.text,
+        },
       },
       {
         eventName: "click",
@@ -34,6 +45,11 @@ export default [
               ".tna-gallery__item:not([hidden]) .tna-gallery__item-header",
             ).innerText,
         },
+        rootData: {
+          data_component_name: "Gallery",
+          data_link_type: "Navigation button",
+          data_link: valueGetters.text,
+        },
       },
       {
         eventName: "keypress",
@@ -46,11 +62,21 @@ export default [
         eventName: "enter-fullscreen",
         targetElement: '.tna-gallery__options button[value="enter-fullscreen"]',
         on: "click",
+        rootData: {
+          data_component_name: "Gallery",
+          data_link_type: "Full screen button",
+          data_link: valueGetters.text,
+        },
       },
       {
         eventName: "exit-fullscreen",
         targetElement: '.tna-gallery__options button[value="exit-fullscreen"]',
         on: "click",
+        rootData: {
+          data_component_name: "Gallery",
+          data_link_type: "Full screen button",
+          data_link: valueGetters.text,
+        },
       },
       {
         eventName: "index",

diff --git a/src/nationalarchives/components/gallery/gallery.mjs b/src/nationalarchives/components/gallery/gallery.mjs
@@ -149,21 +149,18 @@ export class Gallery {
       }
       $item.setAttribute("tabindex", "-1");
     });
-    this.$navigationItems.forEach(($item /*, index*/) => {
+    this.$navigationItems.forEach(($item) => {
       if (id) {
         if ($item.getAttribute("aria-controls") === id) {
-          $item.setAttribute("aria-selected", "true");
-          // $item.setAttribute("tabindex", "0");
+          $item.setAttribute("aria-current", "true");
           if (this.isFullScreen()) {
             $item.scrollIntoView({ block: "nearest" });
           }
         } else {
-          $item.setAttribute("aria-selected", "false");
-          // $item.setAttribute("tabindex", "-1");
+          $item.setAttribute("aria-current", "false");
         }
       } else {
-        $item.setAttribute("aria-selected", "false");
-        // $item.setAttribute("tabindex", index === 0 ? "0" : "-1");
+        $item.setAttribute("aria-current", "false");
       }
     });
     if (this.allowGridIndex) {

diff --git a/src/nationalarchives/components/textarea/textarea.scss b/src/nationalarchives/components/textarea/textarea.scss
@@ -8,9 +8,8 @@ $textarea-vertical-padding: 0.25 !default;
 
 .tna-textarea {
   width: 100%;
-  min-height: #{($textarea-line-height * $textarea-minimum-lines-visible) + (
-      spacing.space($textarea-vertical-padding * 2)
-    )};
+  min-height: #{($textarea-line-height * $textarea-minimum-lines-visible) +
+    (spacing.space($textarea-vertical-padding * 2))};
   padding: spacing.space($textarea-vertical-padding) spacing.space(0.5);
 
   display: block;

diff --git a/src/nationalarchives/lib/analytics-helpers.mjs b/src/nationalarchives/lib/analytics-helpers.mjs
@@ -6,19 +6,23 @@ const getXPathTo = ($element) => {
     return $element.tagName;
   }
   let ix = 0;
-  const siblings = $element.parentNode.childNodes;
-  for (let i = 0; i < siblings.length; i++) {
-    const sibling = siblings[i];
-    if (sibling === $element)
-      return (
-        getXPathTo($element.parentNode) +
-        "/" +
-        $element.tagName +
-        "[" +
-        (ix + 1) +
-        "]"
-      );
-    if (sibling.nodeType === 1 && sibling.tagName === $element.tagName) ix++;
+  if ($element.parentNode) {
+    const siblings = $element.parentNode.childNodes;
+    for (let i = 0; i < siblings.length; i++) {
+      const sibling = siblings[i];
+      if (sibling === $element)
+        return (
+          getXPathTo($element.parentNode) +
+          "/" +
+          $element.tagName +
+          "[" +
+          (ix + 1) +
+          "]"
+        );
+      if (sibling.nodeType === 1 && sibling.tagName === $element.tagName) ix++;
+    }
+  } else {
+    return $element.tagName;
   }
 };
 

diff --git a/src/nationalarchives/tools/_colour.scss b/src/nationalarchives/tools/_colour.scss
@@ -57,7 +57,8 @@
 }
 
 @mixin colour-background-brand($brandColour, $important: false) {
-  background-color: #{brand-colour($brandColour)} if($important, !important, null);
+  background-color: #{brand-colour($brandColour)}
+    if($important, !important, null);
 }
 
 @mixin colour-border(

diff --git a/src/nationalarchives/utilities/typography/_index.scss b/src/nationalarchives/utilities/typography/_index.scss
@@ -434,9 +434,8 @@ small {
   }
 
   @include media.on-tiny {
-    padding: spacing.space(0.5) spacing.space(0.5) spacing.space(0.5) #{spacing.space(
-        1
-      )};
+    padding: spacing.space(0.5) spacing.space(0.5) spacing.space(0.5)
+      #{spacing.space(1)};
   }
 }