govuk_publishing_components 32.1.0 → 35.0.0

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

@@ -0,0 +1,131 @@
+// = 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 another tracker (e.g. the link tracker or ecommerce tracker)
+      if (element.closest('[data-ga4-link]') || element.closest('[data-ga4-ecommerce-path]')) {
+        return
+      }
+
+      var href = element.getAttribute('href')
+
+      if (!href) {
+        return
+      }
+      var data = {}
+      if (window.GOVUK.analyticsGa4.core.trackFunctions.isMailToLink(href)) {
+        data.event_name = 'navigation'
+        data.type = 'email'
+        data.external = 'true'
+      } else if (this.isDownloadLink(href)) {
+        data.event_name = 'file_download'
+        data.type = this.isPreviewLink(href) ? 'preview' : 'generic download'
+        data.external = window.GOVUK.analyticsGa4.core.trackFunctions.isExternalLink(href) ? 'true' : 'false'
+      } else if (window.GOVUK.analyticsGa4.core.trackFunctions.isExternalLink(href)) {
+        data.event_name = 'navigation'
+        data.type = 'generic link'
+        data.external = 'true'
+      }
+
+      if (Object.keys(data).length > 0) {
+        data.url = href
+        if (data.url) {
+          data.url = window.GOVUK.analyticsGa4.core.trackFunctions.removeCrossDomainParams(data.url)
+          data.link_domain = window.GOVUK.analyticsGa4.core.trackFunctions.populateLinkDomain(data.url)
+          data.link_path_parts = window.GOVUK.analyticsGa4.core.trackFunctions.populateLinkPathParts(data.url)
+        }
+
+        data.text = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(element.textContent)
+        data.method = window.GOVUK.analyticsGa4.core.trackFunctions.getClickType(event)
+
+        var schemas = new window.GOVUK.analyticsGa4.Schemas()
+        var schema = schemas.mergeProperties(data, 'event_data')
+        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

@@ -2,21 +2,26 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {}
 
 var initFunction = function () {
-  // to be added: digital identity consent mechanism
-
   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
     for (var property in analyticsModules) {
       var module = analyticsModules[property]
       if (typeof module.init === 'function') {
-        module.init()
+        try {
+          module.init()
+        } catch (e) {
+          // if there's a problem with the module, catch the error to allow other modules to start
+          console.warn('Error starting analytics module ' + property + ': ' + e.message, window.location)
+        }
       }
     }
-    // to be added: cross domain tracking code
   } else {
     window.addEventListener('cookie-consent', window.GOVUK.analyticsGa4.init)
   }

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

@@ -4,7 +4,8 @@
   var GOVUK = global.GOVUK || {}
   var EMAIL_PATTERN = /[^\s=/?&#]+(?:@|%40)[^\s=/?&]+/g
   var POSTCODE_PATTERN = /\b[A-PR-UWYZ][A-HJ-Z]?[0-9][0-9A-HJKMNPR-Y]?(?:[\s+]|%20)*[0-9](?!refund)[ABD-HJLNPQ-Z]{2,3}\b/gi
-  var DATE_PATTERN = /\d{4}(-?)\d{2}(-?)\d{2}/g
+  var DATE_PATTERN_NUMERIC = /\d{4}(-?)\d{2}(-?)\d{2}/g
+  var DATE_PATTERN_STRING = /\d{1,2}\s(January|February|March|April|May|June|July|August|September|October|November|December)\s\d{4}/g
   var ESCAPE_REGEX_PATTERN = /[|\\{}()[\]^$+*?.]/g
 
   // specific URL parameters to be redacted from accounts URLs
@@ -85,7 +86,8 @@
     stripped = this.stripQueryStringParameters(stripped)
 
     if (this.stripDatePII === true) {
-      stripped = stripped.replace(DATE_PATTERN, '[date]')
+      stripped = stripped.replace(DATE_PATTERN_NUMERIC, '[date]')
+      stripped = stripped.replace(DATE_PATTERN_STRING, '[date]')
     }
     if (this.stripPostcodePII === true) {
       stripped = stripped.replace(POSTCODE_PATTERN, '[postcode]')

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

@@ -3,7 +3,11 @@
 //= 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
+//= 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/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: { index_section: 0, index_section_count: 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/cookie-banner.js

@@ -76,7 +76,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   CookieBanner.prototype.setCookieConsent = function () {
     if (this.$acceptCookiesButton.getAttribute('data-cookie-types') === 'all') {
-      this.$module.cookieBannerConfirmationMessageText.insertAdjacentHTML('afterbegin', 'You have accepted additional cookies. ')
+      this.$module.querySelector('.gem-c-cookie-banner__confirmation-message__accepted').hidden = false
     }
     window.GOVUK.approveAllCookieTypes()
     this.$module.showConfirmationMessage()
@@ -92,7 +92,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   CookieBanner.prototype.rejectCookieConsent = function () {
-    this.$module.cookieBannerConfirmationMessageText.insertAdjacentHTML('afterbegin', 'You have rejected additional cookies. ')
+    this.$module.querySelector('.gem-c-cookie-banner__confirmation-message__rejected').hidden = false
     this.$module.showConfirmationMessage()
     this.$module.cookieBannerConfirmationMessage.focus()
     window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })

data/app/assets/javascripts/govuk_publishing_components/components/image-card.js

@@ -0,0 +1,19 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function ImageCard ($module) {
+    this.$module = $module
+    this.$module.youtubeLink = this.$module.querySelector('.gem-c-image-card__image-wrapper div')
+  }
+
+  ImageCard.prototype.init = function () {
+    var ytLink = new window.GOVUK.GovspeakYoutubeLinkEnhancement(
+      this.$module.youtubeLink,
+      'gem-c-govspeak__youtube-video gem-c-image-card__youtube-video-embed'
+    )
+    ytLink.init()
+  }
+
+  Modules.ImageCard = ImageCard
+})(window.GOVUK.Modules)

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'
@@ -92,32 +89,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     return closestPrevious(previousElement, elementType)
   }
 
-  // When moving from one screen size to another (eg mobile to desktop) we need
-  // to find out whether a submenu is open so the parent menu can be kept open.
-  var hasSubMenusOpen = function ($menu) {
-    return $menu.querySelectorAll('button[aria-expanded="true"]').length > 0
-  }
-
-  // Detect the current viewport width. Return the string `desktop` or `mobile` so it can be interpolated to access the
-  // `data-toggle-{desktop|mobile}-group` attribute.
-  //
-  // Use `matchedia` which mitigates issues in modern browsers when scrollbars are forced in MacOS (using `document.documentElement.clientWidth`
-  // for viewport width detection has issues in Chrome and Firefox, and `window.innerWidth` has issues in Safari).
-  //
-  //  Fall back to `document.documentElement.clientWidth` for legacy browsers.
-  var windowSize = function () {
-    var viewport = false
-    if (typeof window.matchMedia === 'function') {
-      viewport = window.matchMedia('(min-width:' + SETTINGS.breakpoint.desktop + 'px)').matches
-    } else {
-      viewport = document.documentElement.clientWidth >= SETTINGS.breakpoint.desktop
-    }
-    return viewport ? 'desktop' : 'mobile'
-  }
   function SuperNavigationMegaMenu ($module) {
     this.$module = $module
-    this.$navigationToggle = this.$module.querySelector('#super-navigation-menu-toggle')
-    this.$navigationMenu = this.$module.querySelector('#super-navigation-menu')
     this.$searchToggle = this.$module.querySelector('#super-search-menu-toggle')
     this.$searchMenu = this.$module.querySelector('#super-search-menu')
 
@@ -132,55 +105,13 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     )
 
     this.hiddenButtons = this.$module.querySelectorAll('button[hidden]')
-
-    this.lastWindowSize = null
-  }
-
-  SuperNavigationMegaMenu.prototype.windowSize = windowSize
-
-  SuperNavigationMegaMenu.prototype.updateStates = function () {
-    if (this.windowSize() === 'mobile' && this.lastWindowSize !== 'mobile') {
-      this.$navigationToggle.removeAttribute('hidden')
-
-      // Hides navigation menu unless a submenu is open - this could be common
-      // as the desktop view has the navigation submenu as top level in the
-      // menu.
-      if (!hasSubMenusOpen(this.$navigationMenu)) {
-        hide(this.$navigationToggle, this.$navigationMenu)
-      }
-
-      this.$module.style.marginBottom = '0'
-    }
-
-    // Hide the navigation toggle button and show the navigation submenu:
-    if (this.windowSize() === 'desktop' && this.lastWindowSize !== 'desktop') {
-      this.$navigationToggle.setAttribute('hidden', 'hidden')
-      this.$navigationMenu.removeAttribute('hidden')
-    }
-
-    // The dropdown menu height is only needed when in desktop mode as this is
-    // when the dropdown menu is using `absolute` positioning. This requires
-    // JavaScript to work out the height and make space for the dropdown menu.
-    if (windowSize() === 'desktop') {
-      // 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'
-    }
-
-    this.lastWindowSize = this.windowSize()
   }
 
   SuperNavigationMegaMenu.prototype.buttonHandler = function (event) {
     var $target = closestParentIncluding(event.target, 'button')
     var $targetMenu = this.$module.querySelector('#' + $target.getAttribute('aria-controls'))
 
-    var toggleGroupAttribute = 'data-toggle-' + this.windowSize() + '-group'
+    var toggleGroupAttribute = 'data-toggle-desktop-group'
     var toggleGroupName = $target.getAttribute(toggleGroupAttribute)
     var toggleGroupList = this.$module.querySelectorAll('[' + toggleGroupAttribute + '="' + toggleGroupName + '"]')
 
@@ -193,10 +124,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
 
     toggle($target, $targetMenu)
-
-    if (this.windowSize() === 'desktop') {
-      this.$module.style.marginBottom = $targetMenu.offsetHeight + 'px'
-    }
   }
 
   SuperNavigationMegaMenu.prototype.init = function () {
@@ -217,6 +144,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       $element.removeAttribute('hidden')
 
       var closestSiblingLink = closestPrevious($element, 'a')
+
       if (closestSiblingLink) {
         closestSiblingLink.setAttribute('hidden', 'hidden')
       }
@@ -235,13 +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()
-
-    this.lastWindowSize = this.windowSize()
-
-    // 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/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
+              }
             }
           }
         }

data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js

@@ -36,6 +36,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     this.$module.uniqueId = this.$module.getAttribute('data-id') || false
 
+    this.$module.dataModule = this.$module.getAttribute('data-module')
+    this.$module.isGa4Enabled = this.$module.dataModule ? this.$module.dataModule.indexOf('ga4-event-tracker') !== -1 : false
+
     if (this.$module.uniqueId) {
       this.$module.sessionStoreLink = this.$module.sessionStoreLink + '_' + this.$module.uniqueId
     }
@@ -78,6 +81,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     this.$module.insertBefore(showAll, steps)
     this.$module.showOrHideAllButton = this.$module.querySelectorAll('.js-step-controls-button')[0]
+
+    // if GA4 is enabled, set attributes on 'show all sections' for tracking using ga4-event-tracker
+    if (this.$module.isGa4Enabled) {
+      var showAllAttributesGa4 = { event_name: 'select_content', type: 'step by step', index: 0, index_total: this.$module.totalSteps }
+      this.$module.showOrHideAllButton.setAttribute('data-ga4-event', JSON.stringify(showAllAttributesGa4))
+    }
   }
 
   Gemstepnav.prototype.addShowHideToggle = function () {
@@ -174,13 +183,26 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         '<span class="js-step-title">' +
           '<button ' +
             'class="gem-c-step-nav__button gem-c-step-nav__button--title js-step-title-button" ' +
-            'aria-expanded="false" aria-controls="' + contentId + '">' +
+            'aria-expanded="false" aria-controls="' + contentId + '"' + '>' +
               '<span class="gem-c-step-nav____title-text-focus">' +
                   '<span class="gem-c-step-nav__title-text js-step-title-text">' + titleText + '</span>' +
                   '<span class="govuk-visually-hidden gem-c-step-nav__section-heading-divider">, </span>' +
               '</span>' +
           '</button>' +
         '</span>'
+
+      if (this.$module.isGa4Enabled) {
+        var ga4JSON = {
+          event_name: 'select_content',
+          type: 'step by step',
+          text: titleText.trim(),
+          index: i + 1,
+          index_total: this.$module.totalSteps
+        }
+
+        var button = thisel.querySelector('.js-step-title-button')
+        button.setAttribute('data-ga4-event', JSON.stringify(ga4JSON))
+      }
     }
   }
 

data/app/assets/javascripts/govuk_publishing_components/dependencies.js

@@ -5,5 +5,18 @@
 // = require ./modules.js
 
 document.addEventListener('DOMContentLoaded', function () {
+  window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {}
+  window.GOVUK.analyticsVars = window.GOVUK.analyticsVars || {}
+
+  // if statements ensure these functions don't execute during testing
+  if (typeof window.GOVUK.loadAnalytics !== 'undefined') {
+    if (typeof window.GOVUK.analyticsGa4.vars === 'undefined') {
+      window.GOVUK.loadAnalytics.loadGa4()
+    }
+    if (typeof window.GOVUK.analyticsVars.gaProperty === 'undefined') {
+      window.GOVUK.loadAnalytics.loadUa()
+    }
+  }
+
   window.GOVUK.modules.start()
 })

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js

@@ -3,8 +3,9 @@
   window.GOVUK = window.GOVUK || {}
   var GOVUK = window.GOVUK || {}
 
-  var YoutubeLinkEnhancement = function ($element) {
+  var YoutubeLinkEnhancement = function ($element, $classOverride) {
     this.$element = $element
+    this.$classOverride = typeof $classOverride !== 'undefined' ? $classOverride : 'gem-c-govspeak__youtube-video'
   }
 
   YoutubeLinkEnhancement.prototype.init = function () {
@@ -70,7 +71,7 @@
     var parentContainer = parentPara.parentNode
 
     var youtubeVideoContainer = document.createElement('div')
-    youtubeVideoContainer.className += 'gem-c-govspeak__youtube-video'
+    youtubeVideoContainer.className += this.$classOverride
     youtubeVideoContainer.innerHTML = '<span id="' + elementId + '" data-video-id="' + id + '"></span>'
 
     options.title = $link.textContent

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 || {}

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

@@ -0,0 +1,116 @@
+//= require govuk_publishing_components/analytics
+//= require govuk_publishing_components/analytics-ga4
+//= require govuk_publishing_components/analytics/linked-domains
+
+window.GOVUK.loadAnalytics = {
+  productionDomains: [
+    'www.gov.uk',
+    'www-origin.publishing.service.gov.uk',
+    'assets.publishing.service.gov.uk'
+  ],
+  stagingDomains: [
+    'www.staging.publishing.service.gov.uk',
+    'www-origin.staging.publishing.service.gov.uk',
+    'assets.staging.publishing.service.gov.uk'
+  ],
+  integrationDomains: [
+    'www.integration.publishing.service.gov.uk',
+    'www-origin.integration.publishing.service.gov.uk',
+    'assets.integration.publishing.service.gov.uk'
+  ],
+  developmentDomains: [
+    'localhost', '127.0.0.1', '0.0.0.0'
+  ],
+
+  // For Universal Analytics' cross domain tracking. linkedDomains is defined by the require statement at the top of the file.
+  linkedDomains: window.GOVUK.analytics.linkedDomains,
+
+  ga4EnvironmentVariables: {
+    // initialiseGA4 is used to enable/disable GA4 on specific environments
+    production: {
+      initialiseGA4: true
+    },
+    staging: {
+      initialiseGA4: true,
+      auth: 'oJWs562CxSIjZKn_GlB5Bw',
+      preview: 'env-5'
+    },
+    integration: {
+      initialiseGA4: true,
+      auth: 'C7iYdcsOlYgGmiUJjZKrHQ',
+      preview: 'env-4'
+    },
+    development: {
+      initialiseGA4: true,
+      auth: 'bRiZ-jiEHtw6hHpGd6dF9w',
+      preview: 'env-3'
+    }
+  },
+
+  loadUa: function (currentDomain) {
+    currentDomain = currentDomain || window.location.hostname
+
+    // Universal Analytics variables
+    window.GOVUK.analyticsVars = window.GOVUK.analyticsVars || {}
+    window.GOVUK.analyticsVars.primaryLinkedDomains = ['account.gov.uk']
+    window.GOVUK.analyticsVars.linkedDomains = this.linkedDomains
+    window.GOVUK.analyticsVars.gaProperty = 'UA-UNSET'
+    window.GOVUK.analyticsVars.gaPropertyCrossDomain = 'UA-UNSET'
+
+    if (this.arrayContains(currentDomain, this.productionDomains)) {
+      window.GOVUK.analyticsVars.gaProperty = 'UA-26179049-1'
+      window.GOVUK.analyticsVars.gaPropertyCrossDomain = 'UA-145652997-1'
+    } else if (this.arrayContains(currentDomain, this.stagingDomains)) {
+      window.GOVUK.analyticsVars.gaProperty = 'UA-26179049-20'
+      window.GOVUK.analyticsVars.gaPropertyCrossDomain = 'UA-145652997-1'
+    } else if (this.arrayContains(currentDomain, this.integrationDomains)) {
+      window.GOVUK.analyticsVars.gaProperty = 'UA-26179049-22'
+      window.GOVUK.analyticsVars.gaPropertyCrossDomain = 'UA-145652997-1'
+    }
+
+    // Load universal analytics
+    if (typeof window.GOVUK.analyticsInit !== 'undefined') {
+      window.GOVUK.analyticsInit()
+    }
+  },
+
+  loadGa4: function (currentDomain) {
+    currentDomain = currentDomain || window.location.hostname
+    var environment = ''
+
+    // Categorise current environment
+    if (this.arrayContains(currentDomain, this.productionDomains)) {
+      environment = 'production'
+    } else if (this.arrayContains(currentDomain, this.stagingDomains)) {
+      environment = 'staging'
+    } else if (this.arrayContains(currentDomain, this.integrationDomains)) {
+      environment = 'integration'
+    } else if (this.arrayContains(currentDomain, this.developmentDomains) || currentDomain.indexOf('.dev.gov.uk') !== -1) {
+      environment = 'development'
+    }
+
+    // If we recognise the environment (i.e. the string isn't empty), load in GA4
+    if (environment) {
+      // If analytics-ga4.js exists and our detected environment has 'initialiseGA4' set to true, load GA4.
+      if (typeof window.GOVUK.analyticsGa4.init !== 'undefined' && this.ga4EnvironmentVariables[environment].initialiseGA4) {
+        window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {}
+        window.GOVUK.analyticsGa4.vars = window.GOVUK.analyticsGa4.vars || {}
+        window.GOVUK.analyticsGa4.vars.id = 'GTM-MG7HG5W'
+        window.GOVUK.analyticsGa4.vars.auth = this.ga4EnvironmentVariables[environment].auth
+        window.GOVUK.analyticsGa4.vars.preview = this.ga4EnvironmentVariables[environment].preview
+        window.GOVUK.analyticsGa4.vars.environment = environment // Used for testing and debugging
+
+        window.GOVUK.analyticsGa4.vars.gem_version = 'not found'
+        var gemMeta = document.querySelector('meta[name="govuk:components_gem_version"]')
+        if (gemMeta) {
+          window.GOVUK.analyticsGa4.vars.gem_version = gemMeta.getAttribute('content')
+        }
+        window.GOVUK.analyticsGa4.init()
+      }
+    }
+  },
+
+  arrayContains: function (valueToFind, array) {
+    return array.indexOf(valueToFind) !== -1
+  }
+}