govuk_publishing_components 35.13.1 → 35.14.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1337364c8c59cc2f98de9c4919d17bbb17356257fcc90eb90f25e15db301a0ae
-  data.tar.gz: 70b99e1a524455dc905f457addfb78aa46f0a4fa7be0a69c64a5e34952228be3
+  metadata.gz: cbe4c3f60d3220a9d2b715392ba0bdd2f6bce4f92153fff876e8a0b608361161
+  data.tar.gz: 94bd59d7a23b8e3cec4882814d7fb0140f81f0bd53bc23f0e475700ba8c489f8
 SHA512:
-  metadata.gz: 9a85f01e30436be8cb8f2131f851353e28a8cbad3c0269758789991491ad5ed232ae1e2e9d782e2fa8349c4863c38faadb254a788abb416e3b4ba35f32d196d7
-  data.tar.gz: 103018230befe8fca5796df4f9d2ebff20f255584253d37d5e3aa2c9cd997b7a17a6fdb719932c758f31647a84fb1c85329fc33082bf68ac1ca99fa48fcd7b36
+  metadata.gz: 47f46ab14ccabebf2a3a3c0da9bc03f9b8207d1e54b6a0c4eb8830eb87b5ce200dd606fd2de50c3804d61f222518c560b046ff77b0de87e635a84a653d77d758
+  data.tar.gz: c51c0a0407bfa84b24ba4d5dfb281f9c31657f1b18e5afe687198c401dbb0f05dc795d7c27ecdf9fbbfe8413cc82a18f28016d77f3d4248351780e0731a61e55

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

@@ -169,10 +169,10 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
       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, '')
+          href = href.replace(/_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(/(&&)+/g, '&')
           href = href.replace('?&', '?')
           if (this.stringEndsWith(href, '?') || this.stringEndsWith(href, '&')) {
             href = href.substring(0, href.length - 1)
@@ -241,7 +241,8 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
 
         try {
           var ga4LinkData = JSON.parse(module.getAttribute('data-ga4-link'))
-          ga4LinkData.index_total = totalLinks
+          // use index_total if it already exists, otherwise calculate it and set it
+          ga4LinkData.index_total = ga4LinkData.index_total || totalLinks
           module.setAttribute('data-ga4-link', JSON.stringify(ga4LinkData))
         } catch (e) {
           // if there's a problem with the config, don't start the tracker

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

@@ -84,12 +84,13 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var labelText = input.label.innerText || input.label.textContent
       var inputType = elem.getAttribute('type')
       var inputNodename = elem.nodeName
+      var inputTypes = ['text', 'search', 'email', 'number']
 
       if (inputType === 'checkbox' && elem.checked) {
         input.answer = labelText
       } else if (inputNodename === 'SELECT' && elem.options[elem.selectedIndex].value) {
         input.answer = elem.options[elem.selectedIndex].text
-      } else if ((inputType === 'text' || inputType === 'search') && elem.value) {
+      } else if (inputTypes.indexOf(inputType) !== -1 && elem.value) {
         if (this.includeTextInputValues) {
           var PIIRemover = new window.GOVUK.analyticsGa4.PIIRemover()
           input.answer = PIIRemover.stripPIIWithOverride(elem.value, true, true)

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

@@ -29,6 +29,9 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
             content_id: this.getMetaContent('content-id'),
 
             browse_topic: this.getMetaContent('section'),
+            navigation_page_type: this.getMetaContent('navigation-page-type'),
+            navigation_list_type: this.getMetaContent('navigation-list-type'),
+            step_navs: this.getMetaContent('stepnavs'),
             taxonomy_level1: this.getMetaContent('themes'),
             taxonomy_main: this.getMetaContent('taxon-slug'),
             taxonomy_main_id: this.getMetaContent('taxon-id'),
@@ -50,7 +53,9 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
             /* The existence of a referrer parameter indicates that the page has been dynamically updated via an AJAX request
             and therefore we can use it to set the dynamic property appropriately. This value is used by PA's to differentiate
             between fresh page loads and dynamic page updates. */
-            dynamic: referrer ? 'true' : 'false'
+            dynamic: referrer ? 'true' : 'false',
+            emergency_banner: document.querySelector('[data-ga4-emergency-banner]') ? 'true' : undefined,
+            phase_banner: this.getElementAttribute('data-ga4-phase-banner') || undefined
           }
         }
         window.GOVUK.analyticsGa4.core.sendData(data)
@@ -88,6 +93,13 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
       }
     },
 
+    getElementAttribute: function (attributeName) {
+      var el = document.querySelector('[' + attributeName + ']')
+      if (el) {
+        return el.getAttribute(attributeName)
+      }
+    },
+
     getLanguage: function () {
       var content = document.getElementById('content')
       if (content) {

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

@@ -29,7 +29,10 @@
         link_domain: this.undefined,
         link_path_parts: this.undefined,
         tool_name: this.undefined,
-        percent_scrolled: this.undefined
+        percent_scrolled: this.undefined,
+        video_current_time: this.undefined,
+        video_duration: this.undefined,
+        video_percent: this.undefined
       }
     }
   }

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

@@ -60,6 +60,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       window.addEventListener('scroll', this.scrollEvent)
       this.resizeEvent = this.onResize.bind(this)
       window.addEventListener('resize', this.resizeEvent)
+      this.resetEvent = this.onReset.bind(this)
+      window.addEventListener('dynamic-page-update', this.resetEvent)
 
       // check if the page height changes e.g. accordion opened
       this.interval = window.setInterval(function () {
@@ -115,6 +117,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         data.type = node.eventData.type
         // following will be undefined if tracking percentages
         data.text = node.eventData.text
+        data.section = node.eventData.text
         data.index = node.eventData.index
         // following will be undefined if tracking headings
         data.percent_scrolled = node.eventData.percent_scrolled
@@ -131,6 +134,14 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     return scroll <= top && (scroll + this.windowHeight) >= bottom
   }
 
+  // if reset, we set all nodes 'alreadySeen' to false
+  // used when the page content is dynamically updated e.g. search
+  Ga4ScrollTracker.prototype.onReset = function () {
+    for (var i = 0; i < this.trackedNodes.length; i++) {
+      this.trackedNodes[i].alreadySeen = false
+    }
+  }
+
   Ga4ScrollTracker.Heading = function (config) {
     this.config = config
   }

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

@@ -0,0 +1,88 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {}
+window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analyticsModules || {};
+
+(function (analyticsModules) {
+  'use strict'
+
+  var VideoTracker = {
+    init: function () {
+      this.handlers = {}
+    },
+
+    configureVideo: function (event) {
+      var player = event.target
+      var videoId = player.id
+      var duration = player.getDuration()
+      var percentages = [25, 50, 75]
+
+      for (var i = 0; i < percentages.length; i++) {
+        var percent = percentages[i]
+        var position = (duration / 100) * percent
+        this.handlers['video-' + videoId + '-' + percent + '-percent-begin'] = position
+        // interval is once a second, so end point must be at least one second beyond begin point
+        this.handlers['video-' + videoId + '-' + percent + '-percent-end'] = position + 2
+      }
+    },
+
+    trackVideo: function (event, state) {
+      var videoTracker = window.GOVUK.analyticsGa4.analyticsModules.VideoTracker
+      var player = event.target
+      var videoId = player.id
+      clearInterval(videoTracker.handlers['video-' + videoId])
+
+      if (state === 'VideoUnstarted') {
+        videoTracker.handlers['video-' + videoId] = setInterval(videoTracker.checkProgress, 1000, player)
+        videoTracker.sendData(player, 'start', 0) // VideoUnstarted seems to only happen the first time video is played
+      } else if (state === 'VideoPlaying') {
+        videoTracker.handlers['video-' + videoId] = setInterval(videoTracker.checkProgress, 1000, player)
+      } else if (state === 'VideoEnded') {
+        if (!videoTracker.handlers['video-' + videoId + '-100']) {
+          videoTracker.sendData(player, 'complete', 100)
+          videoTracker.handlers['video-' + videoId + '-100'] = true
+        }
+      }
+    },
+
+    checkProgress: function (player) {
+      var videoId = player.id
+      var videoTracker = window.GOVUK.analyticsGa4.analyticsModules.VideoTracker
+      var pos = player.getCurrentTime()
+      var percentages = [25, 50, 75]
+
+      // this looks really clunky and long hand
+      // but we have to do this once a second so doing the minimum before dropping out
+      // of an if statement is more efficient than combining all these statements into one
+      for (var i = 0; i < percentages.length; i++) {
+        if (pos >= videoTracker.handlers['video-' + videoId + '-' + percentages[i] + '-percent-begin']) {
+          if (pos < videoTracker.handlers['video-' + videoId + '-' + percentages[i] + '-percent-end']) {
+            if (!videoTracker.handlers['video-' + videoId + '-' + percentages[i]]) {
+              videoTracker.sendData(player, 'progress', percentages[i])
+              videoTracker.handlers['video-' + videoId + '-' + percentages[i]] = true
+            }
+            return
+          }
+        }
+      }
+    },
+
+    sendData: function (player, event, position) {
+      var data = {}
+      data.event_name = 'video_' + event
+      data.type = 'video'
+      data.url = player.getVideoUrl()
+      data.text = player.videoTitle
+      data.action = event
+      data.video_current_time = Math.round(player.getCurrentTime())
+      data.video_duration = Math.ceil(player.getDuration()) // number returned from the API varies, so round up
+      data.video_percent = position
+
+      var schemas = new window.GOVUK.analyticsGa4.Schemas()
+      var schema = schemas.mergeProperties(data, 'event_data')
+
+      window.GOVUK.analyticsGa4.core.sendData(schema)
+    }
+  }
+
+  analyticsModules.VideoTracker = VideoTracker
+})(window.GOVUK.analyticsGa4.analyticsModules)

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

@@ -11,4 +11,5 @@
 //= require ./analytics-ga4/ga4-auto-tracker
 //= require ./analytics-ga4/ga4-smart-answer-results-tracker
 //= require ./analytics-ga4/ga4-scroll-tracker
+//= require ./analytics-ga4/ga4-video-tracker
 //= require ./analytics-ga4/init-ga4

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

@@ -116,6 +116,9 @@
             // https://github.com/alphagov/govuk_publishing_components/pull/908#discussion_r302913995
             var videoTitle = options.title
             event.target.getIframe().title = videoTitle + ' (video)'
+            if (window.GOVUK.analyticsGa4.analyticsModules.VideoTracker) {
+              window.GOVUK.analyticsGa4.analyticsModules.VideoTracker.configureVideo(event)
+            }
           },
           onStateChange: function (event) {
             var eventData = event.data
@@ -140,6 +143,10 @@
 
               window.GOVUK.analytics.trackEvent(tracking.category, tracking.action, tracking.label)
             }
+
+            if (window.GOVUK.analyticsGa4.analyticsModules.VideoTracker) {
+              window.GOVUK.analyticsGa4.analyticsModules.VideoTracker.trackVideo(event, states[eventData])
+            }
           }
         }
       })

data/app/assets/stylesheets/govuk_publishing_components/components/_select.scss

@@ -2,5 +2,6 @@
 @import "govuk/components/select/select";
 
 .gem-c-select__select--full-width {
-  width: 100%;
+  min-width: 100%;
+  max-width: 100%;
 }

data/app/views/govuk_publishing_components/components/_attachment.html.erb

@@ -11,6 +11,7 @@
 
   container_class_names = %w[gem-c-attachment govuk-!-display-none-print]
   container_class_names << shared_helper.get_margin_bottom if local_assigns.key?(:margin_bottom)
+  ga4_link = { 'event_name': 'navigation', 'type': 'attachment' }
 
   case attachment.type
   when "file"
@@ -38,13 +39,14 @@
         class: "gem-c-attachment__attribute",
       )
     end
+
+    ga4_link[:event_name] = 'file_download'
+
   when "html"
     attributes << tag.span(
       "HTML",
       class: "gem-c-attachment__attribute",
     )
-    data_attributes[:module] ? data_attributes[:module] << " ga4-link-tracker" : data_attributes[:module] = "ga4-link-tracker"
-    data_attributes[:ga4_link] = { "event_name": "navigation", "type": "attachment" }.to_json
   when "external"
     attributes << tag.span(
       attachment.url,
@@ -53,7 +55,7 @@
   end
 
 %>
-<%= tag.section class: class_names(container_class_names) do %>
+<%= tag.section class: class_names(container_class_names), data: { module: "ga4-link-tracker", ga4_track_links_only: "", ga4_link: ga4_link } do %>
   <%= tag.div class: "gem-c-attachment__thumbnail" do %>
     <%= link_to attachment.url,
                 class: "govuk-link",

data/app/views/govuk_publishing_components/components/_emergency_banner.html.erb

@@ -7,6 +7,7 @@
   link_text ||= "More information"
   campaign_class ||= nil
   homepage ||= false
+  ga4_tracking ||= false
 
   emergency_banner_helper = GovukPublishingComponents::Presenters::EmergencyBannerHelper.new()
 
@@ -28,9 +29,25 @@
   description_classes = %w[gem-c-emergency-banner__description]
   description_classes << "gem-c-emergency-banner__description--homepage" if homepage
 
+
+  data_attributes = {
+    "nosnippet": true,
+  }
+
+  if ga4_tracking
+    data_attributes[:ga4_emergency_banner] = ""
+    data_attributes[:module] = "ga4-link-tracker"
+    data_attributes[:ga4_track_links_only] = ""
+    data_attributes[:ga4_set_indexes] = ""
+    data_attributes[:ga4_link] = {
+      event_name: "navigation",
+      type: "emergency banner",
+      section: heading,
+    }.to_json
+  end
 %>
 
-<%= content_tag('section', class: banner_classes, "aria-labelledby": "emergency-banner-heading", "data-nosnippet": true ) do %>
+<%= content_tag('section', class: banner_classes, "aria-labelledby": "emergency-banner-heading", data: data_attributes) do %>
   <div class="govuk-width-container">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">

data/app/views/govuk_publishing_components/components/_phase_banner.html.erb

@@ -5,6 +5,7 @@ app_name ||= nil
 phase ||= nil
 message ||= nil
 inverse ||= false
+ga4_tracking ||= false
 
 unless message.present?
   if phase == "beta"
@@ -16,9 +17,24 @@ end
 
 container_css_classes = %w(gem-c-phase-banner govuk-phase-banner)
 container_css_classes << "gem-c-phase-banner--inverse" if inverse
+
+data_attributes = {}
+
+if ga4_tracking
+  data_attributes[:ga4_phase_banner] = phase
+  data_attributes[:module] = "ga4-link-tracker"
+  data_attributes[:ga4_track_links_only] = ""
+  data_attributes[:ga4_set_indexes] = ""
+  data_attributes[:ga4_link] = {
+    event_name: "navigation",
+    type: "phase banner",
+    section: Nokogiri::HTML(message).text,
+  }.to_json
+end
+
 %>
 
-<%= tag.div class: container_css_classes do %>
+<%= tag.div class: container_css_classes, data: data_attributes do %>
   <%= tag.p class: "govuk-phase-banner__content" do %>
     <%= tag.strong app_name, class: "govuk-phase-banner__content__app-name" if app_name %>
     <%= tag.strong phase, class: "govuk-tag govuk-phase-banner__content__tag" if phase %>

data/app/views/govuk_publishing_components/components/docs/emergency_banner.yml

@@ -45,3 +45,13 @@ examples:
       short_description: "1491 to 1547"
       link: "https://www.gov.uk/"
       homepage: true
+  with_ga4_tracking:
+    description: |
+      Enables GA4 tracking on the banner. This includes link tracking on the component itself, and allows pageviews to record the presence of the banner on page load.
+    data:
+      campaign_class: "notable-death"
+      heading: "His Royal Highness Henry VIII"
+      short_description: "1491 to 1547"
+      link: "https://www.gov.uk/"
+      homepage: true
+      ga4_tracking: true

data/app/views/govuk_publishing_components/components/docs/phase_banner.yml

@@ -32,3 +32,11 @@ examples:
       app_name: Skittles Maker
       phase: beta
       inverse: true
+  with_ga4_tracking:
+    description: |
+      Enables GA4 tracking on the banner. This includes link tracking on the component itself, and allows pageviews to record the presence of the banner on page load.
+    data:
+      app_name: Skittles Maker
+      phase: beta
+      inverse: true
+      ga4_tracking: true

data/app/views/layouts/govuk_publishing_components/application.html.erb

@@ -6,7 +6,7 @@
   <% else %>
     <%= render "govuk_publishing_components/components/layout_header", {
       environment: GovukPublishingComponents::AppHelpers::Environment.current_acceptance_environment,
-      product_name: GovukPublishingComponents::Config.component_guide_title,
+      product_name: "#{GovukPublishingComponents::Config.component_guide_title} #{GovukPublishingComponents::VERSION}",
       href: component_guide_path
     } %>
     <div class="govuk-width-container app-width-container--wide">

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "35.13.1".freeze
+  VERSION = "35.14.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 35.13.1
+  version: 35.14.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-08-01 00:00:00.000000000 Z
+date: 2023-08-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -451,6 +451,7 @@ files:
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-scroll-tracker.js
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-smart-answer-results-tracker.js
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-specialist-link-tracker.js
+- app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-video-tracker.js
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4/init-ga4.js
 - app/assets/javascripts/govuk_publishing_components/analytics-ga4/pii-remover.js
 - app/assets/javascripts/govuk_publishing_components/analytics.js
@@ -1467,7 +1468,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.17
+rubygems_version: 3.4.18
 signing_key: 
 specification_version: 4
 summary: A gem to document components in GOV.UK frontend applications