@ons/design-system 67.0.3 → 67.0.5

package/js/analytics.js

@@ -1,22 +1,25 @@
 import domready from './domready';
 
-export let trackEvent = (event, data) => {
-  console.log(`[Analytics disabled] Event: ${event}`); // eslint-disable-line no-console
-  console.log(data); // eslint-disable-line no-console
+export let trackEvent = () => {
+  console.log('Google analytics not connected'); // eslint-disable-line no-console
 };
+setTimeout(() => {
+  if (window.google_tag_manager !== 'undefined') {
+    console.log('GA active');
+    window.dataLayer = window.dataLayer || [];
+    trackEvent = (data) => {
+      console.log('Data sent to Data Layer');
+      window.dataLayer.push({ data });
+    };
+  }
+}, 300);
 
-if (typeof window.ga !== 'undefined') {
-  trackEvent = (evt, data) => {
-    window.ga(evt, data);
-  };
-}
-
-export const trackElement = (el) => {
-  return trackEvent('send', {
-    hitType: 'event',
-    eventCategory: el.getAttribute('data-ga-category') || '',
-    eventAction: el.getAttribute('data-ga-action') || '',
-    eventLabel: el.getAttribute('data-ga-label') || '',
+export const trackElement = (el, type) => {
+  return trackEvent({
+    event_type: type,
+    event_category: el.getAttribute('data-ga-category') || '',
+    event_action: el.getAttribute('data-ga-action') || '',
+    event_label: el.getAttribute('data-ga-label') || '',
   });
 };
 
@@ -25,27 +28,26 @@ export default function initAnalytics() {
 
   const interval = window.setInterval(() => {
     trackVisibleElements = trackVisibleElements.filter((element) => {
-      return element ? trackElement(element) && false : true;
+      return element ? trackElement(element, 'visible') && false : true;
     });
     if (trackVisibleElements.length === 0) {
       window.clearInterval(interval);
     }
   }, 200);
 
-  [...document.querySelectorAll('[data-ga=error]')].map(trackElement);
-
   document.body.addEventListener('click', ({ target }) => {
     if (target.getAttribute('data-ga') === 'click') {
-      trackElement(target);
+      trackElement(target, target.getAttribute('data-ga'));
     }
   });
+  [...document.querySelectorAll('[data-ga=error]')].map((element) => trackElement(element, 'error'));
 
   const afterPrint = () => {
-    return trackEvent('send', {
-      hitType: 'event',
-      eventCategory: 'Print Intent',
-      eventAction: 'Print Intent',
-      eventLabel: window.location.pathname.split('/').slice(-3).join('/'),
+    return trackEvent({
+      event_tracked: 'true',
+      event_category: 'Print Intent',
+      event_action: 'Print Intent',
+      event_label: window.location.pathname.split('/').slice(-3).join('/'),
     });
   };
 

package/js/main.js

@@ -1,5 +1,6 @@
 import './inpagelink.dom';
 import './print-button';
+import './analytics';
 import './cookies-settings.dom';
 import '../components/mutually-exclusive/mutually-exclusive.dom';
 import '../components/textarea/textarea.dom';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ons/design-system",
   "description": "ONS Design System built CSS, JS, and Nunjucks templates",
-  "version": "67.0.3",
+  "version": "67.0.5",
   "main": "index.js",
   "license": "MIT",
   "author": {
@@ -33,18 +33,15 @@
   "lint-staged": {
     "*.js": [
       "prettier --print-width 140 --single-quote --parser babel --write",
-      "eslint --fix",
-      "git add"
+      "eslint --fix"
     ],
     "*.md": [
       "prettier --write",
-      "remark",
-      "git add"
+      "remark"
     ],
     "*.scss": [
       "prettier --print-width 140 --single-quote --parser scss --write",
-      "yarn run stylelint-fix",
-      "git add"
+      "yarn run stylelint-fix"
     ]
   },
   "browserslist": [
@@ -102,7 +99,7 @@
     "jest-environment-jsdom": "^29.6.1",
     "jest-puppeteer": "^9.0.0",
     "lighthouse": "^11.0.0",
-    "lint-staged": "^8.1.0",
+    "lint-staged": "^15.2.0",
     "lodash": "^4.17.21",
     "mdn-polyfills": "^5.14.0",
     "normalize.css": "^8.0.1",