govuk_publishing_components 34.10.1 → 34.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 135e634f4b00ec7ed1030e313d6ee52f1202a0a6a2c83be7722d1a20dac4463b
-  data.tar.gz: a41d77bfdef86a922c417c9d53e0c98b8d9f87bf942e38c477518b5ac6fffc28
+  metadata.gz: 934271a78157ee0a0bb1cf67c27e26479cc353bfbd4199e67c2f8e0bbd49ccea
+  data.tar.gz: 0236a04b735e8760f829fb4e40b9d3f563723f4f1fbd611a21e4ff0b43ebd9b3
 SHA512:
-  metadata.gz: cf937ba2e03913a679decc84d49dbef881ee1647af4235311c39a2bcfbabdbc838c10f10f5ca2ad67fa42832bb9c0c91c614797c13faa6fd0fb109d83df40f90
-  data.tar.gz: 3f8857da3f7227d59d765e0fdb92fea13d4abc0978af9ed07b005c2877e20be68d41f40b1450688adaa4b3f781e5d6b2303feb97928776f2644daed474735e33
+  metadata.gz: 8063218c1329d2fd1b471dd966be393c46a330586d5707d575ec9f1d505d5d00027eaf95b33b5d8a6b38e32d5c745ef0c0907eb02dea5716a85e8d9dafb289a9
+  data.tar.gz: 98eb64a82d50e1869e28f0148965de3cba56061232c67b4fadef488b616a0ee398860bc9e726d0972ccce38ff8afcc215afe6233768f639c452fb6f475fe36f7

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

@@ -40,6 +40,12 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
     },
 
     trackFunctions: {
+
+      getDomainRegex: function () {
+        // 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
+        return /^(http:||https:)?(\/\/)([^\/]*)/ // eslint-disable-line no-useless-escape
+      },
+
       findTrackingAttributes: function (clicked, trackingTrigger) {
         if (clicked.hasAttribute('[' + trackingTrigger + ']')) {
           return clicked
@@ -82,12 +88,10 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
       },
 
       hrefIsRelative: function (href) {
-        // Checks that a link is relative, but is not a protocol relative url
-        return href[0] === '/' && href[1] !== '/'
-      },
+        // Checks that a href is relative by the lack of http:, https:// or // at the start of the href.
+        var domain = this.getDomainRegex().exec(href)
 
-      hrefIsAnchor: function (href) {
-        return href[0] === '#'
+        return !domain
       },
 
       isMailToLink: function (href) {
@@ -115,7 +119,7 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
 
       isInternalLink: function (href) {
         var internalDomains = window.GOVUK.analyticsGa4.vars.internalDomains
-        if (this.hrefIsRelative(href) || this.hrefIsAnchor(href)) {
+        if (this.hrefIsRelative(href)) {
           return true
         }
         var result = false
@@ -187,12 +191,10 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
           return undefined
         }
 
-        if (this.hrefIsRelative(href) || this.hrefIsAnchor(href)) {
+        if (this.hrefIsRelative(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)
+          var domain = this.getDomainRegex().exec(href)
           if (domain) {
             return domain[0]
           }
@@ -216,6 +218,117 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
             domainsArrays.push(domainWithoutWww)
           }
         }
+      },
+
+      // The index and index_total properties are usually set by the application's templating engine however in instances where this isn't possible,
+      // we use JavaScript to calculate the index_total and append it to data-ga4-link and add an index property to each link
+      setIndexes: function (module) {
+        var links = module.querySelectorAll('a')
+        var totalLinks = 0
+        for (var i = 0; i < links.length; i++) {
+          var link = links[i]
+          // Only index links that are not search results
+          if (!link.getAttribute('data-ga4-ecommerce-path')) {
+            totalLinks++
+            link.setAttribute('data-ga4-index', totalLinks)
+          }
+        }
+
+        var ga4LinkData = JSON.parse(module.getAttribute('data-ga4-link'))
+        ga4LinkData.index_total = totalLinks
+        module.setAttribute('data-ga4-link', JSON.stringify(ga4LinkData))
+      }
+    },
+
+    ecommerceHelperFunctions: {
+      clearEcommerceObject: function () {
+        window.GOVUK.analyticsGa4.core.sendData({ search_results: { ecommerce: null } })
+      },
+
+      getIndex: function (element, startPosition) {
+        var index = element.getAttribute('data-ecommerce-index')
+
+        if (!index) {
+          return null
+        }
+
+        return parseInt(index) + startPosition - 1
+      },
+
+      getResultCount: function (element, id) {
+        var resultCount = element.querySelector('#' + id)
+
+        if (!resultCount) {
+          return null
+        }
+
+        // In order to extract the number of results from resultCount (which is a string at this point (e.g. '12,345 results')), we remove the comma and
+        // split string at the space character so it can be parsed as an integer
+        resultCount = resultCount.textContent.replace(',', '')
+        resultCount = resultCount.split(' ')[0]
+
+        return parseInt(resultCount)
+      },
+
+      populateEcommerceSchema: function (data) {
+        var element = data.element
+        var resultsId = data.resultsId
+        var isClickEvent = data.event !== undefined
+        var isSearchResult = element.getAttribute('data-search-query')
+
+        var ecommerceSchema = new window.GOVUK.analyticsGa4.Schemas().ecommerceSchema()
+        var PIIRemover = new window.GOVUK.analyticsGa4.PIIRemover()
+        var DEFAULT_LIST_TITLE = 'Smart answer results'
+
+        if (isSearchResult) {
+          // Limiting to 100 characters to avoid noise from extra long search queries and to stop the size of the payload going over 8k limit.
+          var searchQuery = PIIRemover.stripPII(element.getAttribute('data-search-query')).substring(0, 100).toLowerCase()
+          var variant = element.getAttribute('data-ecommerce-variant')
+          DEFAULT_LIST_TITLE = 'Site search results'
+        }
+
+        var items = element.querySelectorAll('[data-ga4-ecommerce-path]')
+        var listTitle = element.getAttribute('data-list-title') || DEFAULT_LIST_TITLE
+        var startPosition = parseInt(element.getAttribute('data-ecommerce-start-index'), 10)
+
+        ecommerceSchema.event = 'search_results'
+        ecommerceSchema.search_results.event_name = isClickEvent ? 'select_item' : 'view_item_list'
+        ecommerceSchema.search_results.results = window.GOVUK.analyticsGa4.core.ecommerceHelperFunctions.getResultCount(element, resultsId)
+        ecommerceSchema.search_results.term = searchQuery || undefined
+        ecommerceSchema.search_results.sort = variant || undefined
+
+        if (isClickEvent) {
+          var target = data.event.target
+          ecommerceSchema.search_results.ecommerce.items.push({
+            item_id: target.getAttribute('data-ga4-ecommerce-path'),
+            item_name: target.textContent,
+            item_list_name: listTitle,
+            index: window.GOVUK.analyticsGa4.core.ecommerceHelperFunctions.getIndex(target, startPosition)
+          })
+
+          ecommerceSchema.event_data = {
+            external: window.GOVUK.analyticsGa4.core.trackFunctions.isExternalLink(target.getAttribute('data-ga4-ecommerce-path')) ? 'true' : 'false'
+          }
+        } else {
+          for (var i = 0; i < items.length; i++) {
+            var item = items[i]
+            var path = item.getAttribute('data-ga4-ecommerce-path')
+
+            // If the element does not have a data-ecommerce-index attribute, we set one so that we can use it later when setting the index property
+            // on the ecommerce object.
+            if (!item.getAttribute('data-ecommerce-index')) {
+              item.setAttribute('data-ecommerce-index', i + 1)
+            }
+
+            ecommerceSchema.search_results.ecommerce.items.push({
+              item_id: path,
+              item_list_name: listTitle,
+              index: window.GOVUK.analyticsGa4.core.ecommerceHelperFunctions.getIndex(item, startPosition)
+            })
+          }
+        }
+
+        return ecommerceSchema
       }
     }
   }

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

@@ -1,4 +1,4 @@
-// = require govuk/vendor/polyfills/Element/prototype/closest.js
+//= require govuk/vendor/polyfills/Element/prototype/closest.js
 ;(function (global) {
   'use strict'
 
@@ -6,9 +6,6 @@
   GOVUK.analyticsGa4 = GOVUK.analyticsGa4 || {}
 
   GOVUK.analyticsGa4.Ga4EcommerceTracker = {
-    PIIRemover: new GOVUK.analyticsGa4.PIIRemover(),
-    DEFAULT_LIST_TITLE: 'Site search results',
-
     init: function (referrer) {
       if (window.dataLayer) {
         /* The referrer parameter is only passed to the init() function as a result of an AJAX request
@@ -37,7 +34,7 @@
         }
 
         for (var i = 0; i < this.searchResultsBlocks.length; i++) {
-          this.trackSearchResults(this.searchResultsBlocks[i])
+          this.trackResults(this.searchResultsBlocks[i])
 
           if (isNewPageLoad) {
             this.searchResultsBlocks[i].addEventListener('click', this.handleClick.bind(this))
@@ -46,101 +43,29 @@
       }
     },
 
-    trackSearchResults: function (searchResultsBlock) {
-      var schema = this.populateEcommerceSchema(searchResultsBlock, false, null)
+    trackResults: function (searchResultsBlock) {
+      var ecommerceSchema = GOVUK.analyticsGa4.core.ecommerceHelperFunctions.populateEcommerceSchema({
+        element: searchResultsBlock,
+        resultsId: 'js-result-count'
+      })
 
-      this.clearPreviousEcommerceObject()
-      GOVUK.analyticsGa4.core.sendData(schema)
+      GOVUK.analyticsGa4.core.ecommerceHelperFunctions.clearEcommerceObject()
+      GOVUK.analyticsGa4.core.sendData(ecommerceSchema)
     },
 
     handleClick: function (event) {
-      var searchResultsBlock = event.target.closest('[data-ga4-ecommerce]')
-      var isSearchResult = event.target.getAttribute('data-ecommerce-path')
-
-      if (isSearchResult) {
-        var searchResult = event.target
-        var schema = this.populateEcommerceSchema(searchResultsBlock, true, searchResult)
+      if (event.target.getAttribute('data-ga4-ecommerce-path')) {
+        var searchResultsBlock = event.target.closest('[data-ga4-ecommerce]')
 
-        this.clearPreviousEcommerceObject()
-        GOVUK.analyticsGa4.core.sendData(schema)
-      }
-    },
-
-    populateEcommerceSchema: function (searchResultsBlock, searchResultClicked, searchResult) {
-      // Limiting to 100 characters to avoid noise from extra long search queries and to stop the size of the payload going over 8k limit.
-      var searchQuery = this.PIIRemover.stripPII(searchResultsBlock.getAttribute('data-search-query')).substring(0, 100).toLowerCase()
-      var variant = searchResultsBlock.getAttribute('data-ecommerce-variant') || undefined
-      var ecommerceRows = searchResultsBlock.querySelectorAll('[data-ecommerce-row]')
-      var listTitle = searchResultsBlock.getAttribute('data-list-title') || this.DEFAULT_LIST_TITLE
-      var startPosition = parseInt(searchResultsBlock.getAttribute('data-ecommerce-start-index'), 10)
-
-      var ecommerceObject = {
-        event: 'search_results',
-        search_results: {
-          event_name: searchResultClicked && searchResult ? 'select_item' : 'view_item_list',
-          term: searchQuery,
-          sort: variant,
-          results: this.getResultsCount(searchResultsBlock),
-          ecommerce: {
-            items: []
-          }
-        }
-      }
-
-      // Populate items array
-      if (searchResultClicked && searchResult) {
-        ecommerceObject.search_results.ecommerce.items.push({
-          item_id: searchResult.getAttribute('data-ecommerce-path'),
-          item_name: searchResult.textContent,
-          item_list_name: listTitle,
-          index: this.getIndex(searchResult, startPosition)
+        var ecommerceSchema = GOVUK.analyticsGa4.core.ecommerceHelperFunctions.populateEcommerceSchema({
+          element: searchResultsBlock,
+          resultsId: 'js-result-count',
+          event: event
         })
 
-        ecommerceObject.event_data = {
-          external: GOVUK.analyticsGa4.core.trackFunctions.isExternalLink(searchResult.getAttribute('data-ecommerce-path')) ? 'true' : 'false'
-        }
-      } else {
-        for (var i = 0; i < ecommerceRows.length; i++) {
-          var ecommerceRow = ecommerceRows[i]
-          var path = ecommerceRow.getAttribute('data-ecommerce-path')
-
-          /* If the element does not have a data-ecommerce-index attribute, we set one so that we can use it later when setting the index property
-          on the ecommerce object. This for loop will always run on page load and so data-ecommerce-index will be available when we use it in the
-          initial if block above that checks if a search result has been clicked. */
-          if (!ecommerceRow.getAttribute('data-ecommerce-index')) {
-            ecommerceRow.setAttribute('data-ecommerce-index', i + 1)
-          }
-
-          ecommerceObject.search_results.ecommerce.items.push({
-            item_id: path,
-            item_list_name: listTitle,
-            index: this.getIndex(ecommerceRow, startPosition)
-          })
-        }
-      }
-
-      return ecommerceObject
-    },
-
-    getIndex: function (element, startPosition) {
-      return parseInt(element.getAttribute('data-ecommerce-index')) + startPosition - 1
-    },
-
-    clearPreviousEcommerceObject: function () {
-      GOVUK.analyticsGa4.core.sendData({ search_results: { ecommerce: null } })
-    },
-
-    getResultsCount: function (searchResultsBlock) {
-      // This returns a string e.g. '12,345 results'. Therefore to extract the number, we need to remove the comma and split the string at the space
-      var resultsCount = searchResultsBlock.querySelector('#js-result-count')
-
-      if (!resultsCount) {
-        return null
+        GOVUK.analyticsGa4.core.ecommerceHelperFunctions.clearEcommerceObject()
+        GOVUK.analyticsGa4.core.sendData(ecommerceSchema)
       }
-
-      resultsCount = resultsCount.textContent.replace(',', '')
-      resultsCount = resultsCount.split(' ')[0]
-      return parseInt(resultsCount)
     }
   }
 

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

@@ -32,6 +32,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       this.module.addEventListener('click', this.handleClick)
       this.module.addEventListener('contextmenu', this.handleClick)
       this.module.addEventListener('mousedown', this.handleMousedown)
+
+      if (this.module.hasAttribute('data-ga4-set-indexes')) {
+        window.GOVUK.analyticsGa4.core.trackFunctions.setIndexes(this.module)
+      }
     }
   }
 
@@ -56,6 +60,13 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   Ga4LinkTracker.prototype.trackClick = function (event) {
+    var element = event.target
+
+    // don't track this link if it's already being tracked by the ecommerce tracker
+    if (element.closest('[data-ga4-ecommerce-path]')) {
+      return
+    }
+
     var target = window.GOVUK.analyticsGa4.core.trackFunctions.findTrackingAttributes(event.target, this.trackingTrigger)
     if (target) {
       try {
@@ -75,6 +86,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       data.link_path_parts = window.GOVUK.analyticsGa4.core.trackFunctions.populateLinkPathParts(data.url)
       data.method = window.GOVUK.analyticsGa4.core.trackFunctions.getClickType(event)
       data.external = window.GOVUK.analyticsGa4.core.trackFunctions.isExternalLink(data.url) ? 'true' : 'false'
+      data.index = event.target.getAttribute('data-ga4-index') ? parseInt(event.target.getAttribute('data-ga4-index')) : data.index || undefined
 
       var schemas = new window.GOVUK.analyticsGa4.Schemas()
       var schema = schemas.mergeProperties(data, 'event_data')

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

@@ -29,6 +29,22 @@
     }
   }
 
+  Schemas.prototype.ecommerceSchema = function () {
+    return {
+      event: this.undefined,
+      search_results: {
+        event_name: this.undefined,
+        term: this.undefined,
+        sort: this.undefined,
+        results: this.undefined,
+        ecommerce: {
+          items: []
+        }
+      },
+      event_data: this.undefined
+    }
+  }
+
   // get attributes from the data attribute to send to GA
   // only allow it if it already exists in the schema
   Schemas.prototype.mergeProperties = function (data, eventAttribute) {

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-smart-answer-results-tracker.js

@@ -0,0 +1,57 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {}
+window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
+
+(function (Modules) {
+  'use strict'
+
+  function Ga4SmartAnswerResultsTracker (module) {
+    this.module = module
+  }
+
+  Ga4SmartAnswerResultsTracker.prototype.init = function () {
+    var consentCookie = window.GOVUK.getConsentCookie()
+
+    if (consentCookie && consentCookie.settings) {
+      this.startModule()
+    } else {
+      this.startModule = this.startModule.bind(this)
+      window.addEventListener('cookie-consent', this.startModule)
+    }
+  }
+
+  // triggered by cookie-consent event, which happens when users consent to cookies
+  Ga4SmartAnswerResultsTracker.prototype.startModule = function () {
+    // only run this code if the dataLayer exists and an element with a data-ga4-ecommerce-path
+    // attribute exists as this indicates that ecommerce tracking is required
+    if (window.dataLayer && this.module.querySelector('[data-ga4-ecommerce-path]')) {
+      this.trackResults()
+      this.module.addEventListener('click', this.handleClick.bind(this))
+    }
+  }
+
+  Ga4SmartAnswerResultsTracker.prototype.trackResults = function () {
+    var ecommerceSchema = window.GOVUK.analyticsGa4.core.ecommerceHelperFunctions.populateEcommerceSchema({
+      element: this.module,
+      resultsId: 'ga4-ecommerce-result-count'
+    })
+
+    window.GOVUK.analyticsGa4.core.ecommerceHelperFunctions.clearEcommerceObject()
+    window.GOVUK.analyticsGa4.core.sendData(ecommerceSchema)
+  }
+
+  Ga4SmartAnswerResultsTracker.prototype.handleClick = function (event) {
+    if (event.target.getAttribute('data-ga4-ecommerce-path')) {
+      var ecommerceSchema = window.GOVUK.analyticsGa4.core.ecommerceHelperFunctions.populateEcommerceSchema({
+        element: this.module,
+        resultsId: 'ga4-ecommerce-result-count',
+        event: event
+      })
+
+      window.GOVUK.analyticsGa4.core.ecommerceHelperFunctions.clearEcommerceObject()
+      window.GOVUK.analyticsGa4.core.sendData(ecommerceSchema)
+    }
+  }
+
+  Modules.Ga4SmartAnswerResultsTracker = Ga4SmartAnswerResultsTracker
+})(window.GOVUK.Modules)

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

@@ -39,8 +39,8 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
         return
       }
 
-      // don't track this link if it's already being tracked by the other link tracker
-      if (element.closest('[data-ga4-link]')) {
+      // don't track this link if it's already being tracked by the another tracker (e.g. the link tracker or ecommerce tracker)
+      if (element.closest('[data-ga4-link]') || element.closest('[data-ga4-ecommerce-path]')) {
         return
       }
 

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

@@ -9,4 +9,5 @@
 //= require ./analytics-ga4/ga4-ecommerce-tracker
 //= require ./analytics-ga4/ga4-form-tracker
 //= require ./analytics-ga4/ga4-auto-tracker
+//= require ./analytics-ga4/ga4-smart-answer-results-tracker
 //= require ./analytics-ga4/init-ga4

data/app/assets/javascripts/govuk_publishing_components/components/layout-super-navigation-header.js

@@ -5,9 +5,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
   var SETTINGS = {
-    breakpoint: {
-      desktop: 769
-    },
     label: {
       hide: 'data-text-for-hide',
       show: 'data-text-for-show'
@@ -110,18 +107,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.hiddenButtons = this.$module.querySelectorAll('button[hidden]')
   }
 
-  SuperNavigationMegaMenu.prototype.updateStates = function () {
-    // Check whether any of the dropdown menus are open.
-    var $openButton = this.$module.querySelector('[aria-expanded="true"][data-toggle-desktop-group="top"]')
-    // Gets the open dropdown menu
-    var $openMenu = $openButton ? this.$module.querySelector('#' + $openButton.getAttribute('aria-controls')) : null
-    // If there is an open dropdown menu, get the height of the dropdown menu.
-    var margin = $openMenu ? $openMenu.offsetHeight : 0
-
-    // Make space for the dropdown menu.
-    this.$module.style.marginBottom = margin + 'px'
-  }
-
   SuperNavigationMegaMenu.prototype.buttonHandler = function (event) {
     var $target = closestParentIncluding(event.target, 'button')
     var $targetMenu = this.$module.querySelector('#' + $target.getAttribute('aria-controls'))
@@ -139,8 +124,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
 
     toggle($target, $targetMenu)
-
-    this.$module.style.marginBottom = $targetMenu.offsetHeight + 'px'
   }
 
   SuperNavigationMegaMenu.prototype.init = function () {
@@ -180,11 +163,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     //   - On desktop, this means hiding the navigation button, showing the
     //     second level navigation menu
     hide(this.$searchToggle, this.$searchMenu)
-    this.updateStates()
-
-    // The menu needs to be updated when the window is resized to make sure that
-    // the space needed for the dropdown menu is correct.
-    window.addEventListener('resize', this.updateStates.bind(this), { passive: true })
 
     this.$module.classList.add('js-module-initialised')
   }

data/app/assets/javascripts/govuk_publishing_components/lib/trigger-event.js

@@ -1,3 +1,4 @@
+// see https://github.com/alphagov/govuk_publishing_components/blob/main/docs/lib/trigger_event.md
 (function (root) {
   'use strict'
   window.GOVUK = window.GOVUK || {}