govuk_publishing_components 32.1.0 → 33.1.0

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

@@ -1,331 +1,102 @@
-// = require govuk/vendor/polyfills/Element/prototype/closest.js
+//= require ../vendor/polyfills/closest.js
 window.GOVUK = window.GOVUK || {}
-window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {}
-window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analyticsModules || {};
+window.GOVUK.Modules = window.GOVUK.Modules || {};
 
-(function (analyticsModules) {
+(function (Modules) {
   'use strict'
 
-  var Ga4LinkTracker = {
-    init: function (config) {
-      if (window.dataLayer) {
-        config = config || {}
-        this.internalDomains = config.internalDomains || []
-        this.internalDomains.push(this.getHostname())
-        this.appendDomainsWithoutWWW(this.internalDomains)
-        this.internalDownloadPaths = config.internalDownloadPaths || ['/government/uploads/']
-        this.dedicatedDownloadDomains = config.dedicatedDownloadDomains || ['assets.publishing.service.gov.uk']
-        this.appendDomainsWithoutWWW(this.dedicatedDownloadDomains)
-        this.handleClick = this.handleClick.bind(this)
-        this.handleMousedown = this.handleMousedown.bind(this)
-
-        if (!config.disableListeners) {
-          document.querySelector('body').addEventListener('click', this.handleClick)
-          document.querySelector('body').addEventListener('contextmenu', this.handleClick)
-          document.querySelector('body').addEventListener('mousedown', this.handleMousedown)
-        }
-      }
-    },
-
-    stopTracking: function () {
-      document.querySelector('body').removeEventListener('click', this.handleClick)
-      document.querySelector('body').removeEventListener('contextmenu', this.handleClick)
-      document.querySelector('body').removeEventListener('mousedown', this.handleMousedown)
-    },
-
-    handleClick: function (event) {
-      var element = event.target
-
-      if (element.tagName !== 'A') {
-        element = element.closest('a')
-      }
-
-      if (!element) {
-        return
-      }
-
-      var href = element.getAttribute('href')
-
-      if (!href) {
-        return
-      }
-      var clickData = {}
-      var linkAttributes = element.getAttribute('data-ga4-link')
-      if (linkAttributes) {
-        clickData = JSON.parse(linkAttributes)
-
-        /* Since external links can't be determined in the template, we use populated-via-js as a signal
-        for our JavaScript to determine this value. */
-        if (clickData.external === 'populated-via-js' && clickData.url) {
-          clickData.external = this.isExternalLink(clickData.url) ? 'true' : 'false'
-        }
-
-        if (clickData.method === 'populated-via-js') {
-          clickData.method = this.getClickType(event)
-        }
-
-        if (clickData.index) {
-          clickData.index = parseInt(clickData.index)
-        }
+  function Ga4LinkTracker (module) {
+    this.module = module
+    this.trackingTrigger = 'data-ga4-link' // elements with this attribute get tracked
+    this.trackLinksOnly = this.module.hasAttribute('data-ga4-track-links-only')
+    this.limitToElementClass = this.module.getAttribute('data-ga4-limit-to-element-class')
+  }
 
-        if (clickData.index_total) {
-          clickData.index_total = parseInt(clickData.index_total)
-        }
-      } else if (this.isMailToLink(href)) {
-        clickData.event_name = 'navigation'
-        clickData.type = 'email'
-        clickData.external = 'true'
-        clickData.url = href
-        clickData.text = this.removeLinesAndExtraSpaces(element.textContent)
-        clickData.method = this.getClickType(event)
-      } else if (this.isDownloadLink(href)) {
-        clickData.event_name = 'file_download'
-        clickData.type = this.isPreviewLink(href) ? 'preview' : 'generic download'
-        clickData.external = this.isExternalLink(href) ? 'true' : 'false'
-        clickData.url = href
-        clickData.text = this.removeLinesAndExtraSpaces(element.textContent)
-        clickData.method = this.getClickType(event)
-      } else if (this.isExternalLink(href)) {
-        clickData.event_name = 'navigation'
-        clickData.type = 'generic link'
-        clickData.external = 'true'
-        clickData.url = href
-        clickData.text = this.removeLinesAndExtraSpaces(element.textContent)
-        clickData.method = this.getClickType(event)
-      }
+  Ga4LinkTracker.prototype.init = function () {
+    var consentCookie = window.GOVUK.getConsentCookie()
 
-      if (Object.keys(clickData).length > 0) {
-        if (clickData.url) {
-          clickData.url = this.removeCrossDomainParams(clickData.url)
-          clickData.link_domain = this.populateLinkDomain(clickData.url)
-          clickData.link_path_parts = this.populateLinkPathParts(clickData.url)
-        }
+    if (consentCookie && consentCookie.settings) {
+      this.startModule()
+    } else {
+      this.startModule = this.startModule.bind(this)
+      window.addEventListener('cookie-consent', this.startModule)
+    }
+  }
 
-        var schema = new window.GOVUK.analyticsGa4.Schemas().eventSchema()
-        schema.event = 'event_data'
+  // triggered by cookie-consent event, which happens when users consent to cookies
+  Ga4LinkTracker.prototype.startModule = function () {
+    if (window.dataLayer) {
+      this.handleClick = this.handleClick.bind(this)
+      this.handleMousedown = this.handleMousedown.bind(this)
 
-        // get attributes from the clickData object to send to GA
-        // only allow it if it already exists in the schema
-        for (var property in clickData) {
-          if (property in schema.event_data) {
-            schema.event_data[property] = clickData[property]
-          }
-        }
+      this.module.addEventListener('click', this.handleClick)
+      this.module.addEventListener('contextmenu', this.handleClick)
+      this.module.addEventListener('mousedown', this.handleMousedown)
+    }
+  }
 
-        window.GOVUK.analyticsGa4.core.sendData(schema)
+  Ga4LinkTracker.prototype.handleClick = function (event) {
+    var target = event.target
+    if (!this.trackLinksOnly) {
+      this.trackClick(event)
+    } else if (this.trackLinksOnly && target.closest('a')) {
+      if (!this.limitToElementClass) {
+        this.trackClick(event)
+      } else if (target.closest('.' + this.limitToElementClass)) {
+        this.trackClick(event)
       }
-    },
+    }
+  }
 
-    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
-      }
+  Ga4LinkTracker.prototype.handleMousedown = function (event) {
+    // 1 = middle mouse button
+    if (event.button === 1) {
+      this.handleClick(event)
+    }
+  }
 
-      if (path === '/' || path.length === 0) {
+  Ga4LinkTracker.prototype.trackClick = function (event) {
+    var target = window.GOVUK.analyticsGa4.core.trackFunctions.findTrackingAttributes(event.target, this.trackingTrigger)
+    if (target) {
+      var schema = new window.GOVUK.analyticsGa4.Schemas().eventSchema()
+
+      try {
+        var data = target.getAttribute(this.trackingTrigger)
+        data = JSON.parse(data)
+      } catch (e) {
+        // if there's a problem with the config, don't start the tracker
+        console.error('GA4 configuration error: ' + e.message, window.location)
         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
-    },
-
-    populateLinkDomain: function (href) {
-      // We always want mailto links to have an undefined link_domain
-      if (this.isMailToLink(href)) {
-        return undefined
-      }
-
-      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)[0]
-        return domain
-      }
-    },
-
-    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)
+      schema.event = 'event_data'
+      var text = data.text || event.target.textContent
+      data.text = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(text)
+      data.url = window.GOVUK.analyticsGa4.core.trackFunctions.removeCrossDomainParams(this.findLink(event.target).getAttribute('href'))
+      data.link_domain = window.GOVUK.analyticsGa4.core.trackFunctions.populateLinkDomain(data.url)
+      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'
+
+      // get attributes from the data attribute to send to GA
+      // only allow it if it already exists in the schema
+      for (var property in data) {
+        if (property in schema.event_data) {
+          schema.event_data[property] = data[property]
         }
       }
-    },
-
-    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
-    },
-
-    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'
-      }
-    },
-
-    handleMousedown: function (event) {
-      // 1 = middle mouse button
-      if (event.button === 1) {
-        this.handleClick(event)
-      }
-    },
-
-    isMailToLink: function (href) {
-      return href.substring(0, 7) === 'mailto:'
-    },
-
-    isDownloadLink: function (href) {
-      if (this.isInternalLink(href) && this.hrefPointsToDownloadPath(href)) {
-        return true
-      }
-
-      var result = false
-      for (var i = 0; i < this.dedicatedDownloadDomains.length; i++) {
-        var downloadDomain = this.dedicatedDownloadDomains[i]
-        if (this.hrefPointsToDomain(href, downloadDomain)) {
-          result = true
-        }
-      }
-      return result
-    },
-
-    isInternalLink: function (href) {
-      if (this.hrefIsRelative(href) || this.hrefIsAnchor(href)) {
-        return true
-      }
-      var result = false
-      for (var i = 0; i < this.internalDomains.length; i++) {
-        var internalDomain = this.internalDomains[i]
-        if (this.hrefPointsToDomain(href, internalDomain)) {
-          result = true
-        }
-      }
-      return result
-    },
-
-    isExternalLink: function (href) {
-      return !this.isInternalLink(href)
-    },
 
-    isPreviewLink: function (href) {
-      /*  Regex looks for:
-      1. The file extension period (the character '.')
-      2. any alphanumeric characters (so we can match any file type such as jpg, pdf, mp4.)
-      3. the presence of '/preview'.
-      For example, .csv/preview or .mp4/preview will be matched.
-      Regex is used over JS string methods as this should work with anchor links, query string parameters and files that may have 'preview' in their name.
-      */
-      var previewRegex = /\.\w+\/preview/i
-      return previewRegex.test(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 + '/'
-      }
-      var httpDomain = 'http://' + domain
-      var httpsDomain = 'https://' + domain
-      var schemaRelativeDomain = '//' + domain
-      return this.stringStartsWith(href, domain) ||
-      this.stringStartsWith(href, httpDomain) ||
-      this.stringStartsWith(href, httpsDomain) ||
-      this.stringStartsWith(href, schemaRelativeDomain)
-    },
-
-    hrefPointsToDownloadPath: function (href) {
-      var result = false
-      for (var i = 0; i < this.internalDownloadPaths.length; i++) {
-        var internalDownloadPath = this.internalDownloadPaths[i]
-        if (href.indexOf(internalDownloadPath) !== -1) {
-          result = true
-        }
-      }
-      return result
-    },
-
-    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
-    },
-
-    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] === '#'
-    },
-
-    getHostname: function () {
-      return window.location.hostname
-    },
-
-    getProtocol: function () {
-      return window.location.protocol
-    },
-
-    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, '')
+      window.GOVUK.analyticsGa4.core.sendData(schema)
+    }
+  }
 
-        // 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
+  Ga4LinkTracker.prototype.findLink = function (target) {
+    if (target.tagName === 'A') {
+      return target
+    } else {
+      return target.closest('a')
     }
   }
 
-  analyticsModules.Ga4LinkTracker = Ga4LinkTracker
-})(window.GOVUK.analyticsGa4.analyticsModules)
+  Modules.Ga4LinkTracker = Ga4LinkTracker
+})(window.GOVUK.Modules)

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

@@ -27,10 +27,10 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
             schema_name: this.getMetaContent('schema-name'),
             content_id: this.getMetaContent('content-id'),
 
-            section: this.getMetaContent('section'),
+            browse_topic: this.getMetaContent('section'),
             taxon_slug: this.getMetaContent('taxon-slug'),
             taxon_id: this.getMetaContent('taxon-id'),
-            themes: this.getMetaContent('themes'),
+            taxonomy_level1: this.getMetaContent('themes'),
             taxon_slugs: this.getMetaContent('taxon-slugs'),
             taxon_ids: this.getMetaContent('taxon-ids'),
 

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

@@ -0,0 +1,140 @@
+// = require govuk/vendor/polyfills/Element/prototype/closest.js
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {}
+window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analyticsModules || {};
+
+(function (analyticsModules) {
+  'use strict'
+
+  var Ga4SpecialistLinkTracker = {
+    init: function (config) {
+      if (window.dataLayer) {
+        config = config || {}
+        this.internalDownloadPaths = config.internalDownloadPaths || ['/government/uploads/']
+        this.dedicatedDownloadDomains = config.dedicatedDownloadDomains || ['assets.publishing.service.gov.uk']
+        window.GOVUK.analyticsGa4.core.trackFunctions.appendDomainsWithoutWWW(this.dedicatedDownloadDomains)
+        this.handleClick = this.handleClick.bind(this)
+        this.handleMousedown = this.handleMousedown.bind(this)
+
+        document.querySelector('body').addEventListener('click', this.handleClick)
+        document.querySelector('body').addEventListener('contextmenu', this.handleClick)
+        document.querySelector('body').addEventListener('mousedown', this.handleMousedown)
+      }
+    },
+
+    stopTracking: function () {
+      document.querySelector('body').removeEventListener('click', this.handleClick)
+      document.querySelector('body').removeEventListener('contextmenu', this.handleClick)
+      document.querySelector('body').removeEventListener('mousedown', this.handleMousedown)
+    },
+
+    handleClick: function (event) {
+      var element = event.target
+
+      if (element.tagName !== 'A') {
+        element = element.closest('a')
+      }
+
+      if (!element) {
+        return
+      }
+
+      // don't track this link if it's already being tracked by the other link tracker
+      if (element.closest('[data-ga4-link]')) {
+        return
+      }
+
+      var href = element.getAttribute('href')
+
+      if (!href) {
+        return
+      }
+      var clickData = {}
+      if (window.GOVUK.analyticsGa4.core.trackFunctions.isMailToLink(href)) {
+        clickData.event_name = 'navigation'
+        clickData.type = 'email'
+        clickData.external = 'true'
+      } else if (this.isDownloadLink(href)) {
+        clickData.event_name = 'file_download'
+        clickData.type = this.isPreviewLink(href) ? 'preview' : 'generic download'
+        clickData.external = window.GOVUK.analyticsGa4.core.trackFunctions.isExternalLink(href) ? 'true' : 'false'
+      } else if (window.GOVUK.analyticsGa4.core.trackFunctions.isExternalLink(href)) {
+        clickData.event_name = 'navigation'
+        clickData.type = 'generic link'
+        clickData.external = 'true'
+      }
+
+      if (Object.keys(clickData).length > 0) {
+        clickData.url = href
+        if (clickData.url) {
+          clickData.url = window.GOVUK.analyticsGa4.core.trackFunctions.removeCrossDomainParams(clickData.url)
+          clickData.link_domain = window.GOVUK.analyticsGa4.core.trackFunctions.populateLinkDomain(clickData.url)
+          clickData.link_path_parts = window.GOVUK.analyticsGa4.core.trackFunctions.populateLinkPathParts(clickData.url)
+        }
+
+        clickData.text = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(element.textContent)
+        clickData.method = window.GOVUK.analyticsGa4.core.trackFunctions.getClickType(event)
+
+        var schema = new window.GOVUK.analyticsGa4.Schemas().eventSchema()
+        schema.event = 'event_data'
+
+        // get attributes from the clickData object to send to GA
+        // only allow it if it already exists in the schema
+        for (var property in clickData) {
+          if (property in schema.event_data) {
+            schema.event_data[property] = clickData[property]
+          }
+        }
+
+        window.GOVUK.analyticsGa4.core.sendData(schema)
+      }
+    },
+
+    handleMousedown: function (event) {
+      // 1 = middle mouse button
+      if (event.button === 1) {
+        this.handleClick(event)
+      }
+    },
+
+    isDownloadLink: function (href) {
+      if (window.GOVUK.analyticsGa4.core.trackFunctions.isInternalLink(href) && this.hrefPointsToDownloadPath(href)) {
+        return true
+      }
+
+      var result = false
+      for (var i = 0; i < this.dedicatedDownloadDomains.length; i++) {
+        var downloadDomain = this.dedicatedDownloadDomains[i]
+        if (window.GOVUK.analyticsGa4.core.trackFunctions.hrefPointsToDomain(href, downloadDomain)) {
+          result = true
+        }
+      }
+      return result
+    },
+
+    isPreviewLink: function (href) {
+      /*  Regex looks for:
+      1. The file extension period (the character '.')
+      2. any alphanumeric characters (so we can match any file type such as jpg, pdf, mp4.)
+      3. the presence of '/preview'.
+      For example, .csv/preview or .mp4/preview will be matched.
+      Regex is used over JS string methods as this should work with anchor links, query string parameters and files that may have 'preview' in their name.
+      */
+      var previewRegex = /\.\w+\/preview/i
+      return previewRegex.test(href)
+    },
+
+    hrefPointsToDownloadPath: function (href) {
+      var result = false
+      for (var i = 0; i < this.internalDownloadPaths.length; i++) {
+        var internalDownloadPath = this.internalDownloadPaths[i]
+        if (href.indexOf(internalDownloadPath) !== -1) {
+          result = true
+        }
+      }
+      return result
+    }
+  }
+
+  analyticsModules.Ga4SpecialistLinkTracker = Ga4SpecialistLinkTracker
+})(window.GOVUK.analyticsGa4.analyticsModules)

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

@@ -7,6 +7,9 @@ var initFunction = function () {
   var consentCookie = window.GOVUK.getConsentCookie()
 
   if (consentCookie && consentCookie.usage) {
+    window.GOVUK.analyticsGa4.vars.internalDomains = []
+    window.GOVUK.analyticsGa4.vars.internalDomains.push(window.GOVUK.analyticsGa4.core.trackFunctions.getHostname())
+    window.GOVUK.analyticsGa4.core.trackFunctions.appendDomainsWithoutWWW(window.GOVUK.analyticsGa4.vars.internalDomains)
     window.GOVUK.analyticsGa4.core.load()
 
     var analyticsModules = window.GOVUK.analyticsGa4.analyticsModules

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

@@ -3,6 +3,7 @@
 //= require ./analytics-ga4/ga4-schemas
 //= require ./analytics-ga4/pii-remover
 //= require ./analytics-ga4/ga4-page-views
+//= require ./analytics-ga4/ga4-specialist-link-tracker
 //= require ./analytics-ga4/ga4-link-tracker
 //= require ./analytics-ga4/ga4-event-tracker
 //= require ./analytics-ga4/ga4-ecommerce-tracker

data/app/assets/javascripts/govuk_publishing_components/components/accordion.js

@@ -43,9 +43,10 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
 
     // look for data attributes to put onto the 'show/hide all' link
     var showAllAttributes = this.$module.getAttribute('data-show-all-attributes')
+    var showAll
     if (showAllAttributes) {
       try {
-        var showAll = this.$module.querySelector(this.showAllControls)
+        showAll = this.$module.querySelector(this.showAllControls)
         var values = JSON.parse(showAllAttributes)
         var keys = Object.keys(values)
         for (var i = 0; i < keys.length; i++) {
@@ -55,6 +56,16 @@ window.GOVUK.Modules.GovukAccordion = window.GOVUKFrontend.Accordion;
         console.error('Could not read accordion data attributes error: ' + e.message, window.location)
       }
     }
+
+    // if GA4 is enabled, set attributes on 'show all sections' for tracking using ga4-event-tracker
+    var dataModule = this.$module.getAttribute('data-module')
+    var isGa4Enabled = dataModule ? dataModule.indexOf('ga4-event-tracker') !== -1 : false
+    if (isGa4Enabled) {
+      var indexTotal = this.$module.querySelectorAll('.govuk-accordion__section').length
+      var showAllAttributesGa4 = { event_name: 'select_content', type: 'accordion', index: 0, index_total: indexTotal }
+      showAll = this.$module.querySelector(this.showAllControls)
+      showAll.setAttribute('data-ga4-event', JSON.stringify(showAllAttributesGa4))
+    }
   }
 
   // Navigate to and open accordions with anchored content on page load if a hash is present

data/app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js

@@ -28,15 +28,31 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       if (xhr.readyState === 4) {
         if (xhr.status === 200) {
           var responseText = xhr.responseText
-          // if response text exists and is JSON parse-able, parse the response and get the button html
+          // if response text exists and is JSON parse-able, parse the response and update the button html
           if (responseText && this.responseIsJSON(responseText)) {
-            var newButton = JSON.parse(responseText).button_html
-            var html = document.createElement('div')
-            html.innerHTML = newButton
-            // test that the html returned contains the button component; if yes, swap the button for the updated version
-            var responseButtonContainer = html.querySelector('form.gem-c-single-page-notification-button')
-            if (responseButtonContainer) {
-              this.$module.parentNode.replaceChild(responseButtonContainer, this.$module)
+            var active = JSON.parse(responseText).active
+
+            var customSubscribeText = this.$module.getAttribute('data-button-text-subscribe')
+            var customUnsubscribeText = this.$module.getAttribute('data-button-text-unsubscribe')
+            // Only set custom button text if both text items are provided
+            var customText = customSubscribeText && customUnsubscribeText
+
+            // Append '-[button-location]' to the tracking data attribute value if data-button-location is set
+            var optionalButtonLocation = this.$module.getAttribute('data-button-location') ? '-' + this.$module.getAttribute('data-button-location') : ''
+
+            // If response returns active, user has subscribed to notifications
+            if (active === true) {
+              this.$module.setAttribute('data-track-action', 'Unsubscribe-button' + optionalButtonLocation)
+
+              if (customText) {
+                this.$module.querySelector('.gem-c-single-page-notication-button__text').textContent = customUnsubscribeText
+              }
+            } else {
+              this.$module.setAttribute('data-track-action', 'Subscribe-button' + optionalButtonLocation)
+
+              if (customText) {
+                this.$module.querySelector('.gem-c-single-page-notication-button__text').textContent = customSubscribeText
+              }
             }
           }
         }