govuk_publishing_components 35.13.0 → 35.13.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b6417c1bd3d66d89500aac39c49427caa95791623fe26f1ee4844c025ef3f3c7
-  data.tar.gz: d21986e9895007dc2560b4aacd1eb28ff7f43251519029672b85d13d91211d94
+  metadata.gz: d89a426d686fe0891582f8851ff7b27c57a457b838dccd81aa07a4868a9a9975
+  data.tar.gz: b267048c6e6bd91689fcedbad4e16835de62ff50aee68e94684ec4533ad7c5ab
 SHA512:
-  metadata.gz: 7ca4a123db1c519256eb7ee46ff97e940d69c161f687611fb3b46915acee3454b995f2793e763ed82f5d87ae8a32d2df074b4c72587ca5c0a3c02ee858026a79
-  data.tar.gz: b1cc9c87e984de69229d5b6807d81eca27802b35a3be15caaaea249388fc0ce9934be7a4d75006e2a93c5374fc48738d9f8e8dbbc624955b2a14da78a01df8a8
+  metadata.gz: 9dcd81b321da508d0475825320afa9674bfbac1bf1ef73f5ce32ccd66d0f5225e08b569a9819ca34672c13e919e154e02570b51109613e53d9bc79945a0f3482
+  data.tar.gz: 24bf0744fc140a4644c5b12d0de816869298a1927a25e3b1e126d0644b4bae78cd6ae5409d194e48465429e049517440321d39b12edd1ee783e717f54446659f

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

@@ -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

@@ -21,6 +21,7 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
             title: this.getTitle(),
             status_code: this.getStatusCode(),
 
+            ab_test: this.getMetaContent('ab-test'),
             document_type: this.getMetaContent('format'),
             publishing_app: this.getMetaContent('publishing-app'),
             rendering_app: this.getMetaContent('rendering-app'),
@@ -28,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'),

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

@@ -43,8 +43,6 @@
       "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 +51,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: { 'event_name': 'navigation', 'type': 'attachment' } } do %>
   <%= tag.div class: "gem-c-attachment__thumbnail" do %>
     <%= link_to attachment.url,
                 class: "govuk-link",

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

@@ -8,7 +8,9 @@
 %>
 
 <% start_button_text = capture do %>
-  <%= button.text %>
+  <span>
+    <%= button.text %>
+  </span>
   <svg class="govuk-button__start-icon govuk-!-display-none-print" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" focusable="false" aria-hidden="true">
     <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
   </svg>

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "35.13.0".freeze
+  VERSION = "35.13.2".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 35.13.0
+  version: 35.13.2
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-07-27 00:00:00.000000000 Z
+date: 2023-08-15 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