Remove jQuery from custom dimensions

alphagov · Dec 3, 2021 · 0a16469 · 0a16469
1 parent 6300be5
commit 0a16469
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 26 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 
 ## Unreleased
 
+* Remove jQuery from custom dimensions ([PR #2473](https://github.com/alphagov/govuk_publishing_components/pull/2473))
 * Use the correct mixins for applying font in the big number component ([PR #2494](https://github.com/alphagov/govuk_publishing_components/pull/2494))
 * Remove use of govuk-font from the big number component ([PR #2493](https://github.com/alphagov/govuk_publishing_components/pull/2493))
 * Add `margin_bottom` option to success alert ([PR #2492](https://github.com/alphagov/govuk_publishing_components/pull/2492))

diff --git a/app/assets/javascripts/govuk_publishing_components/analytics/custom-dimensions.js b/app/assets/javascripts/govuk_publishing_components/analytics/custom-dimensions.js
@@ -1,4 +1,4 @@
-/* global GOVUK, $ */
+/* global GOVUK */
 
 (function () {
   'use strict'
@@ -7,21 +7,40 @@
 
   CustomDimensions.getAndExtendDefaultTrackingOptions = function (extraOptions) {
     var trackingOptions = this.customDimensions()
-    return $.extend(trackingOptions, extraOptions)
+    return this.extend(trackingOptions, extraOptions)
   }
 
   CustomDimensions.customDimensions = function () {
-    var dimensions = $.extend(
+    var dimensions = this.extend(
       {},
       customDimensionsFromBrowser(),
       customDimensionsFromMetaTags(),
       customDimensionsFromDom(),
       abTestCustomDimensions()
     )
 
-    return $.each(dimensions, function (key, value) {
-      dimensions[key] = new GOVUK.Analytics.PIISafe(String(value))
-    })
+    for (var key in dimensions) {
+      dimensions[key] = new GOVUK.Analytics.PIISafe(String(dimensions[key]))
+    }
+    return dimensions
+  }
+
+  CustomDimensions.extend = function (out) {
+    out = out || {}
+
+    for (var i = 1; i < arguments.length; i++) {
+      if (!arguments[i]) {
+        continue
+      }
+
+      for (var key in arguments[i]) {
+        if (Object.prototype.hasOwnProperty.call(arguments[i], key)) {
+          out[key] = arguments[i][key]
+        }
+      }
+    }
+
+    return out
   }
 
   function customDimensionsFromBrowser () {
@@ -70,52 +89,59 @@
       'spelling-suggestion': { dimension: 81 }
     }
 
-    var $metas = $('meta[name^="govuk:"]')
+    var metas = document.querySelectorAll("meta[name^='govuk']")
     var customDimensions = {}
     var tags = {}
 
-    $metas.each(function () {
-      var $meta = $(this)
-      var key = $meta.attr('name').split('govuk:')[1]
-
-      var dimension = dimensionMappings[key]
+    for (var i = 0; i < metas.length; i++) {
+      var meta = metas[i]
+      var metaKey = meta.getAttribute('name').split('govuk:')[1]
+      var dimension = dimensionMappings[metaKey]
       if (dimension) {
-        tags[key] = $meta.attr('content')
+        tags[metaKey] = meta.getAttribute('content')
       }
-    })
+    }
 
-    $.each(dimensionMappings, function (key, dimension) {
-      var value = tags[key] || dimension.defaultValue
+    for (var key in dimensionMappings) {
+      var value = tags[key] || dimensionMappings[key].defaultValue
       if (typeof value !== 'undefined') {
-        customDimensions['dimension' + dimension.dimension] = value
+        customDimensions['dimension' + dimensionMappings[key].dimension] = value
       }
-    })
+    }
 
     return customDimensions
   }
 
   function customDimensionsFromDom () {
+    var mainLang = document.getElementById('content')
+    if (mainLang) {
+      mainLang = mainLang.getAttribute('lang')
+    }
+    var globalBar = document.querySelector('[data-module="global-bar"]') || false
+    if (globalBar) {
+      globalBar = globalBar.style.display !== 'none'
+    }
     return {
       dimension26: GOVUK.PageContent.getNumberOfSections(),
       dimension27: GOVUK.PageContent.getNumberOfLinks(),
-      dimension23: $('main[id="content"]').attr('lang') || 'unknown',
-      dimension38: $('[data-module="global-bar"]').is(':visible') && 'Global Banner viewed'
+      dimension23: mainLang || 'unknown',
+      dimension38: globalBar && 'Global Banner viewed'
     }
   }
 
   function abTestCustomDimensions () {
-    var $abMetas = $('meta[name^="govuk:ab-test"]')
+    var abMetas = document.querySelectorAll("meta[name^='govuk:ab-test']")
     var customDimensions = {}
 
-    $abMetas.each(function () {
-      var $meta = $(this)
-      var dimension = parseInt($meta.data('analytics-dimension'))
-      var testNameAndBucket = $meta.attr('content')
+    for (var i = 0; i < abMetas.length; i++) {
+      var meta = abMetas[i]
+      var dimension = parseInt(meta.getAttribute('data-analytics-dimension'))
+      var testNameAndBucket = meta.getAttribute('content')
 
       if (dimension) {
         customDimensions['dimension' + dimension] = testNameAndBucket
       }
-    })
+    }
 
     return customDimensions
   }