govuk_publishing_components 32.1.0 → 33.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c43bb9be56d4b486f1307f54c8afde28338f6e2e5e1da7cb0fcc3de5135d501e
-  data.tar.gz: 00cec842aa8b242b7eb85aaa9c7d92e6160e08ea2b1ebe4aec988c04b6cd0c7e
+  metadata.gz: 4e788fa8e962e9665a5c978857dd72563e92394a2b437020e143242e48eac153
+  data.tar.gz: 47ebd5cd998e31cf0899e6a4dfa83949466fa1f9e357edecfb5551ca6c4b7ee3
 SHA512:
-  metadata.gz: eaf661b0cf8beb915a3785cd80bbf9eba5e86c8de5a8bc5687baab61e69a3e1dff0018bab7036ee50ed4b98b8a0365e8d93654d121a803b5ed9289172eedfa7d
-  data.tar.gz: 01ab80117be5494596b4d0050c560050d167772cb887a79b3af86440dc7071a2aa9c87229279ba932a89e5bd9bb0d56cf4d70d5028486114d1435dacfb99b288
+  metadata.gz: 55773e69567c5797c93ce788fb226f8d8ca9dcc256b12b5c6dd6caca421c5419d20f98dda3db8a8dc3baa5606915b5a0975ee738ceea752cb174feec9ce2bc5e
+  data.tar.gz: '093545166981ef4a4c15dd7864bfe6a3017df0a7c5a61bad7c925e1834fcfaec3e2acc9be675ae184f63213882902e20b2190bc0393ab22327b5a6f16d344593'

data/app/assets/javascripts/component_guide/accessibility-test.js

@@ -24,7 +24,6 @@
     })
 
     var axeOptions = {
-      include: [selector],
       rules: axeRules
     }
 

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-core.js

@@ -1,3 +1,4 @@
+//= require ../vendor/polyfills/closest.js
 window.GOVUK = window.GOVUK || {}
 window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
 
@@ -47,6 +48,180 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
 
     getGemVersion: function () {
       return window.GOVUK.analyticsGa4.vars.gem_version || 'not found'
+    },
+
+    trackFunctions: {
+      findTrackingAttributes: function (clicked, trackingTrigger) {
+        if (clicked.hasAttribute('[' + trackingTrigger + ']')) {
+          return clicked
+        } else {
+          return clicked.closest('[' + trackingTrigger + ']')
+        }
+      },
+
+      // create an object to split up long URLs and get around the 100 character limit on GTM data
+      // this gets reassembled in GA4
+      populateLinkPathParts: function (href) {
+        var path = ''
+        if (this.hrefIsRelative(href) || this.isMailToLink(href)) {
+          path = href
+        } else {
+          // This regex matches a protocol and domain name at the start of a string such as https://www.gov.uk, http://gov.uk, //gov.uk
+          path = href.replace(/^(http:||https:)?(\/\/)([^\/]*)/, '') // eslint-disable-line no-useless-escape
+        }
+
+        if (path === '/' || path.length === 0) {
+          return
+        }
+
+        /*
+        This will create an object with 5 keys that are indexes ("1", "2", etc.)
+        The values will be each part of the link path split every 100 characters, or undefined.
+        For example: {"1": "/hello/world/etc...", "2": "/more/path/text...", "3": undefined, "4": undefined, "5": undefined}
+        Undefined values are needed to override the persistent object in GTM so that any values from old pushes are overwritten.
+        */
+        var parts = path.match(/.{1,100}/g)
+        var obj = {}
+        for (var i = 0; i < 5; i++) {
+          obj[(i + 1).toString()] = parts[i]
+        }
+        return obj
+      },
+
+      hrefIsRelative: function (href) {
+        // Checks that a link is relative, but is not a protocol relative url
+        return href[0] === '/' && href[1] !== '/'
+      },
+
+      hrefIsAnchor: function (href) {
+        return href[0] === '#'
+      },
+
+      isMailToLink: function (href) {
+        return href.substring(0, 7) === 'mailto:'
+      },
+
+      getClickType: function (event) {
+        switch (event.type) {
+          case 'click':
+            if (event.ctrlKey) {
+              return 'ctrl click'
+            } else if (event.metaKey) {
+              return 'command/win click'
+            } else if (event.shiftKey) {
+              return 'shift click'
+            } else {
+              return 'primary click'
+            }
+          case 'mousedown':
+            return 'middle click'
+          case 'contextmenu':
+            return 'secondary click'
+        }
+      },
+
+      isInternalLink: function (href) {
+        var internalDomains = window.GOVUK.analyticsGa4.vars.internalDomains
+        if (this.hrefIsRelative(href) || this.hrefIsAnchor(href)) {
+          return true
+        }
+        var result = false
+        for (var i = 0; i < internalDomains.length; i++) {
+          var internalDomain = internalDomains[i]
+          if (this.hrefPointsToDomain(href, internalDomain)) {
+            result = true
+          }
+        }
+        return result
+      },
+
+      isExternalLink: function (href) {
+        return !this.isInternalLink(href)
+      },
+
+      hrefPointsToDomain: function (href, domain) {
+        /* Add a trailing slash to prevent an edge case such
+        as the href www.gov.uk.domain.co.uk being detected as an internal link,
+        if we were checking for 'www.gov.uk' instead of 'www.gov.uk/' */
+        if (domain.substring(domain.length) !== '/') {
+          domain = domain + '/'
+        }
+
+        /* If the href doesn't end in a slash, we add one.
+        This fixes an edge case where the <a href> is exactly `https://www.gov.uk`
+        but these checks would only look for `https://www.gov.uk/` */
+        if (href.substring(href.length) !== '/') {
+          href = href + '/'
+        }
+        // matches the domain preceded by https:// http:// or //
+        var regex = new RegExp('^((http)*(s)*(:)*//)(' + domain + ')', 'g')
+        return regex.test(href)
+      },
+
+      removeLinesAndExtraSpaces: function (text) {
+        text = text.trim()
+        text = text.replace(/(\r\n|\n|\r)/gm, ' ') // Replace line breaks with 1 space
+        text = text.replace(/\s+/g, ' ') // Replace instances of 2+ spaces with 1 space
+        return text
+      },
+
+      removeCrossDomainParams: function (href) {
+        if (href.indexOf('_ga') !== -1 || href.indexOf('_gl') !== -1) {
+          // _ga & _gl are values needed for cross domain tracking, but we don't want them included in our click tracking.
+          href = href.replaceAll(/_g[al]=([^&]*)/g, '')
+
+          // The following code cleans up inconsistencies such as gov.uk/&&, gov.uk/?&hello=world, gov.uk/?, and gov.uk/&.
+          href = href.replaceAll(/(&&)+/g, '&')
+          href = href.replace('?&', '?')
+          if (this.stringEndsWith(href, '?') || this.stringEndsWith(href, '&')) {
+            href = href.substring(0, href.length - 1)
+          }
+        }
+        return href
+      },
+
+      stringStartsWith: function (string, stringToFind) {
+        return string.substring(0, stringToFind.length) === stringToFind
+      },
+
+      stringEndsWith: function (string, stringToFind) {
+        return string.substring(string.length - stringToFind.length, string.length) === stringToFind
+      },
+
+      populateLinkDomain: function (href) {
+        // We always want mailto links to have an undefined link_domain
+        if (this.isMailToLink(href)) {
+          return undefined
+        }
+
+        if (this.hrefIsRelative(href) || this.hrefIsAnchor(href)) {
+          return this.getProtocol() + '//' + this.getHostname()
+        } else {
+          // This regex matches a protocol and domain name at the start of a string such as https://www.gov.uk, http://gov.uk, //gov.uk
+          var domainRegex = /^(http:||https:)?(\/\/)([^\/]*)/ // eslint-disable-line no-useless-escape
+          var domain = domainRegex.exec(href)[0]
+          return domain
+        }
+      },
+
+      getProtocol: function () {
+        return window.location.protocol
+      },
+
+      getHostname: function () {
+        return window.location.hostname
+      },
+
+      appendDomainsWithoutWWW: function (domainsArrays) {
+        // Add domains with www. removed, in case site hrefs are marked up without www. included.
+        for (var i = 0; i < domainsArrays.length; i++) {
+          var domain = domainsArrays[i]
+          if (this.stringStartsWith(domain, 'www.')) {
+            var domainWithoutWww = domain.replace('www.', '')
+            domainsArrays.push(domainWithoutWww)
+          }
+        }
+      }
     }
   }
 

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-ecommerce-tracker.js

@@ -50,7 +50,7 @@
       var schema = this.populateEcommerceSchema(searchResultsBlock, false, null)
 
       this.clearPreviousEcommerceObject()
-      window.dataLayer.push(schema)
+      GOVUK.analyticsGa4.core.sendData(schema)
     },
 
     handleClick: function (event) {
@@ -62,7 +62,7 @@
         var schema = this.populateEcommerceSchema(searchResultsBlock, true, searchResult)
 
         this.clearPreviousEcommerceObject()
-        window.dataLayer.push(schema)
+        GOVUK.analyticsGa4.core.sendData(schema)
       }
     },
 
@@ -97,7 +97,7 @@
         })
 
         ecommerceObject.event_data = {
-          external: GOVUK.analyticsGa4.analyticsModules.Ga4LinkTracker.isExternalLink(searchResult.getAttribute('data-ecommerce-path')) ? 'true' : 'false'
+          external: GOVUK.analyticsGa4.core.trackFunctions.isExternalLink(searchResult.getAttribute('data-ecommerce-path')) ? 'true' : 'false'
         }
       } else {
         for (var i = 0; i < ecommerceRows.length; i++) {
@@ -127,7 +127,7 @@
     },
 
     clearPreviousEcommerceObject: function () {
-      window.dataLayer.push({ search_results: { ecommerce: null } })
+      GOVUK.analyticsGa4.core.sendData({ search_results: { ecommerce: null } })
     },
 
     getResultsCount: function (searchResultsBlock) {

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.js

@@ -1,4 +1,4 @@
-// = require govuk/vendor/polyfills/Element/prototype/closest.js
+//= require ../vendor/polyfills/closest.js
 window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
@@ -7,7 +7,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   function Ga4EventTracker (module) {
     this.module = module
-    this.trackingTrigger = 'data-ga4' // elements with this attribute get tracked
+    this.trackingTrigger = 'data-ga4-event' // elements with this attribute get tracked
   }
 
   Ga4EventTracker.prototype.init = function () {
@@ -29,7 +29,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   Ga4EventTracker.prototype.trackClick = function (event) {
-    var target = this.findTrackingAttributes(event.target)
+    var target = window.GOVUK.analyticsGa4.core.trackFunctions.findTrackingAttributes(event.target, this.trackingTrigger)
     if (target) {
       var schema = new window.GOVUK.analyticsGa4.Schemas().eventSchema()
 
@@ -51,8 +51,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         }
       }
 
-      /* Ensure it only tracks aria-expanded in an accordion or element with data-ga4-expandable on it. */
-      if (target.closest('.gem-c-accordion') || target.closest('[data-ga4-expandable]')) {
+      /* Ensure it only tracks aria-expanded in an element with data-ga4-expandable on it. */
+      if (target.closest('[data-ga4-expandable]')) {
         var ariaExpanded = this.getClosestAttribute(target, 'aria-expanded')
       }
 
@@ -88,14 +88,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
-  Ga4EventTracker.prototype.findTrackingAttributes = function (clicked) {
-    if (clicked.hasAttribute('[' + this.trackingTrigger + ']')) {
-      return clicked
-    } else {
-      return clicked.closest('[' + this.trackingTrigger + ']')
-    }
-  }
-
   // check if an attribute exists or contains the attribute
   Ga4EventTracker.prototype.getClosestAttribute = function (clicked, attribute) {
     var isAttributeOnElement = clicked.getAttribute(attribute)