govuk_publishing_components 33.0.0 → 33.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 72c594630cfc9f9359ae29eaff51094d512f4060cff0ad23e96319f264b0bae6
-  data.tar.gz: d074f64d7b59bd3657e0e84c2a44f9de23a8a5db99e71e832b2eab98a617fb8e
+  metadata.gz: 4e788fa8e962e9665a5c978857dd72563e92394a2b437020e143242e48eac153
+  data.tar.gz: 47ebd5cd998e31cf0899e6a4dfa83949466fa1f9e357edecfb5551ca6c4b7ee3
 SHA512:
-  metadata.gz: 77cde1c322a721bc97a30a348e53b84d369c029afa32cd81fc7def30577aea67324f4c60ecc5c6f03e1c77dc3697d6a2ab5339a177c3946276ddcaa26bb72303
-  data.tar.gz: 7134f8030b4d16a4b4e38dc5ba6aa8d9c08aa0bc2ef319e7710b407685a8cbace2ce9c32c5330883cd93412690687387f5960246667a63a8808cc20949c02de1
+  metadata.gz: 55773e69567c5797c93ce788fb226f8d8ca9dcc256b12b5c6dd6caca421c5419d20f98dda3db8a8dc3baa5606915b5a0975ee738ceea752cb174feec9ce2bc5e
+  data.tar.gz: '093545166981ef4a4c15dd7864bfe6a3017df0a7c5a61bad7c925e1834fcfaec3e2acc9be675ae184f63213882902e20b2190bc0393ab22327b5a6f16d344593'

data/app/assets/javascripts/component_guide/accessibility-test.js

@@ -24,7 +24,6 @@
     })
 
     var axeOptions = {
-      include: [selector],
       rules: axeRules
     }
 

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

@@ -50,7 +50,7 @@
       var schema = this.populateEcommerceSchema(searchResultsBlock, false, null)
 
       this.clearPreviousEcommerceObject()
-      window.dataLayer.push(schema)
+      GOVUK.analyticsGa4.core.sendData(schema)
     },
 
     handleClick: function (event) {
@@ -62,7 +62,7 @@
         var schema = this.populateEcommerceSchema(searchResultsBlock, true, searchResult)
 
         this.clearPreviousEcommerceObject()
-        window.dataLayer.push(schema)
+        GOVUK.analyticsGa4.core.sendData(schema)
       }
     },
 
@@ -127,7 +127,7 @@
     },
 
     clearPreviousEcommerceObject: function () {
-      window.dataLayer.push({ search_results: { ecommerce: null } })
+      GOVUK.analyticsGa4.core.sendData({ search_results: { ecommerce: null } })
     },
 
     getResultsCount: function (searchResultsBlock) {

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 () {
@@ -169,12 +178,24 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var title = thisel.querySelectorAll('.js-step-title')[0]
       var contentId = thisel.querySelectorAll('.js-panel')[0].getAttribute('id')
       var titleText = title.textContent || title.innerText // IE8 fallback
+      var ga4Data = ''
+
+      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
+        }
+        ga4Data = "data-ga4-event='" + JSON.stringify(ga4JSON) + "'" // Construct GA4 data-attributes for ga4-event-tracker.
+      }
 
       title.outerHTML =
         '<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 + '" ' + ga4Data + '>' +
               '<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>' +

data/app/assets/javascripts/govuk_publishing_components/vendor/lux/lux-reporter.js

@@ -38,6 +38,8 @@
       errorBeaconUrl: getProperty(obj, "errorBeaconUrl", "https://lux.speedcurve.com/error/"),
       jspagelabel: getProperty(obj, "jspagelabel", undefined),
       label: getProperty(obj, "label", undefined),
+      maxBeaconUrlLength: getProperty(obj, "maxBeaconUrlLength", 8190),
+      maxBeaconUTEntries: getProperty(obj, "maxBeaconUTEntries", 20),
       maxErrors: getProperty(obj, "maxErrors", 5),
       maxMeasureTime: getProperty(obj, "maxMeasureTime", 60000),
       measureUntil: getProperty(obj, "measureUntil", "onload"),
@@ -276,6 +278,23 @@
     return Matching;
   }());
 
+  /**
+  * Fit an array of user timing delimited strings into a URL and return both the entries that fit and
+  * the remaining entries that didn't fit.
+  */
+  function fitUserTimingEntries(utValues, config, url) {
+    // Start with the maximum allowed UT entries per beacon
+    var beaconUtValues = utValues.slice(0, config.maxBeaconUTEntries);
+    var remainingUtValues = utValues.slice(config.maxBeaconUTEntries);
+    // Trim UT entries until they fit within the maximum URL length, ensuring at least one UT entry
+    // is included.
+    while ((url + "&UT=" + beaconUtValues.join(",")).length > config.maxBeaconUrlLength &&
+    beaconUtValues.length > 1) {
+      remainingUtValues.unshift(beaconUtValues.pop());
+    }
+    return [beaconUtValues, remainingUtValues];
+  }
+
   var LUX = window.LUX || {};
   var scriptEndTime = scriptStartTime;
   LUX = (function () {
@@ -288,7 +307,7 @@
     /// End
     // -------------------------------------------------------------------------
 
-    var SCRIPT_VERSION = "304";
+    var SCRIPT_VERSION = "305";
     var logger = new Logger();
     var globalConfig = fromObject(LUX);
     logger.logEvent(LogEvent.EvaluationStart, [SCRIPT_VERSION]);
@@ -382,7 +401,6 @@
     var gUid = refreshUniqueId(gSyncId); // cookie for this session ("Unique ID")
     var gCustomerDataTimeout; // setTimeout timer for sending a Customer Data beacon after onload
     var gMaxMeasureTimeout; // setTimeout timer for sending the beacon after a maximum measurement time
-    var gMaxQuerystring = 8190; // split the beacon querystring if it gets longer than this
     if (_sample()) {
       logger.logEvent(LogEvent.SessionIsSampled, [globalConfig.samplerate]);
     }
@@ -701,7 +719,7 @@
         }
         aUT.push(utParts.join("|"));
       }
-      return aUT.join(",");
+      return aUT;
     }
     // Return a string of Element Timing Metrics formatted for beacon querystring.
     function elementTimingValues() {
@@ -1406,8 +1424,28 @@
         clearTimeout(gMaxMeasureTimeout);
       }
     }
+    function _getBeaconUrl() {
+      var queryParams = [
+        "v=" + SCRIPT_VERSION,
+        "id=" + getCustomerId(),
+        "sid=" + gSyncId,
+        "uid=" + gUid,
+        "l=" + encodeURIComponent(_getPageLabel()),
+        "HN=" + encodeURIComponent(document.location.hostname),
+        "PN=" + encodeURIComponent(document.location.pathname),
+      ];
+      if (gFlags) {
+        queryParams.push("fl=" + gFlags);
+      }
+      var customerData = customerDataValues();
+      if (customerData) {
+        queryParams.push("CD=" + customerData);
+      }
+      return globalConfig.beaconUrl + "?" + queryParams.join("&");
+    }
     // Beacon back the LUX data.
     function _sendLux() {
+      var _a;
       clearMaxMeasureTimeout();
       var customerid = getCustomerId();
       if (!customerid ||
@@ -1425,9 +1463,7 @@
         // with LUX.markLoadTime()
         _markLoadTime();
       }
-      var sUT = userTimingValues(); // User Timing data
       var sET = elementTimingValues(); // Element Timing data
-      var sCustomerData = customerDataValues(); // customer data
       var sIx = ""; // Interaction Metrics
       if (!gbIxSent) {
         // It is possible for the IX beacon to be sent BEFORE the "main" window.onload LUX beacon.
@@ -1442,21 +1478,10 @@
       }
       // We want ALL beacons to have ALL the data used for query filters (geo, pagelabel, browser, & customerdata).
       // So we create a base URL that has all the necessary information:
-      var baseUrl = globalConfig.beaconUrl +
-        "?v=" +
-        SCRIPT_VERSION +
-        "&id=" +
-        customerid +
-        "&sid=" +
-        gSyncId +
-        "&uid=" +
-        gUid +
-        (sCustomerData ? "&CD=" + sCustomerData : "") +
-        "&l=" +
-        encodeURIComponent(_getPageLabel());
+      var baseUrl = _getBeaconUrl();
       var is = inlineTagSize("script");
       var ic = inlineTagSize("style");
-      var querystring =
+      var metricsQueryString =
         // only send Nav Timing and lux.js metrics on initial pageload (not for SPA page views)
         (gbNavSent ? "" : "&NT=" + getNavTiming()) +
         (gbFirstPV ? "&LJS=" + sLuxjs : "") +
@@ -1497,31 +1522,15 @@
         (sIx ? "&IX=" + sIx : "") +
         (typeof gFirstInputDelay !== "undefined" ? "&FID=" + gFirstInputDelay : "") +
         (sCPU ? "&CPU=" + sCPU : "") +
-        (gFlags ? "&fl=" + gFlags : "") +
         (sET ? "&ET=" + sET : "") + // element timing
-        "&HN=" +
-        encodeURIComponent(document.location.hostname) +
-        (DCLS !== false ? "&CLS=" + DCLS : "") +
-        "&PN=" +
-        encodeURIComponent(document.location.pathname);
-      // User Timing marks & measures
-      var sUT_remainder = "";
-      if (sUT) {
-        var curLen = baseUrl.length + querystring.length;
-        if (curLen + sUT.length <= gMaxQuerystring) {
-          // Add all User Timing
-          querystring += "&UT=" + sUT;
-        }
-        else {
-          // Only add a substring of User Timing
-          var avail_1 = gMaxQuerystring - curLen; // how much room is left in the querystring
-          var iComma = sUT.lastIndexOf(",", avail_1); // as many UT tuples as possible
-          querystring += "&UT=" + sUT.substring(0, iComma);
-          sUT_remainder = sUT.substring(iComma + 1);
-        }
-      }
+        (DCLS !== false ? "&CLS=" + DCLS : "");
+      // We add the user timing entries last so that we can split them to reduce the URL size if necessary.
+      var utValues = userTimingValues();
+      var _b = fitUserTimingEntries(utValues, globalConfig, baseUrl + metricsQueryString), beaconUtValues = _b[0], remainingUtValues = _b[1];
       // Send the MAIN LUX beacon.
-      var mainBeaconUrl = baseUrl + querystring;
+      var mainBeaconUrl = baseUrl +
+      metricsQueryString +
+      (beaconUtValues.length > 0 ? "&UT=" + beaconUtValues.join(",") : "");
       logger.logEvent(LogEvent.MainBeaconSent, [mainBeaconUrl]);
       _sendBeacon(mainBeaconUrl);
       // Set some states.
@@ -1529,34 +1538,9 @@
       gbNavSent = 1;
       gbIxSent = sIx ? 1 : 0;
       // Send other beacons for JUST User Timing.
-      var avail = gMaxQuerystring - baseUrl.length;
-      while (sUT_remainder) {
-        var sUT_cur = "";
-        if (sUT_remainder.length <= avail) {
-          // We can fit ALL the remaining UT params.
-          sUT_cur = sUT_remainder;
-          sUT_remainder = "";
-        }
-        else {
-          // We have to take a subset of the remaining UT params.
-          var iComma = sUT_remainder.lastIndexOf(",", avail); // as many UT tuples as possible
-          if (-1 === iComma) {
-            // Trouble: we have SO LITTLE available space we can not fit the first UT tuple.
-            // Try it anyway but find it by searching from the front.
-            iComma = sUT_remainder.indexOf(",");
-          }
-          if (-1 === iComma) {
-            // The is only one UT tuple left, but it is bigger than the available space.
-            // Take the whole tuple even tho it is too big.
-            sUT_cur = sUT_remainder;
-            sUT_remainder = "";
-          }
-          else {
-            sUT_cur = sUT_remainder.substring(0, iComma);
-            sUT_remainder = sUT_remainder.substring(iComma + 1);
-          }
-        }
-        var utBeaconUrl = baseUrl + "&UT=" + sUT_cur;
+      while (remainingUtValues.length) {
+        _a = fitUserTimingEntries(remainingUtValues, globalConfig, baseUrl), beaconUtValues = _a[0], remainingUtValues = _a[1];
+        var utBeaconUrl = baseUrl + "&UT=" + beaconUtValues.join(",");
         logger.logEvent(LogEvent.UserTimingBeaconSent, [utBeaconUrl]);
         _sendBeacon(utBeaconUrl);
       }
@@ -1574,26 +1558,10 @@
       }
       var sIx = ixValues(); // Interaction Metrics
       if (sIx) {
-        var sCustomerData = customerDataValues(); // customer data
-        var querystring = "?v=" +
-          SCRIPT_VERSION +
-          "&id=" +
-          customerid +
-          "&sid=" +
-          gSyncId +
-          "&uid=" +
-          gUid +
-          (sCustomerData ? "&CD=" + sCustomerData : "") +
-          "&l=" +
-          encodeURIComponent(_getPageLabel()) +
-          "&IX=" +
-          sIx +
-          (gFirstInputDelay ? "&FID=" + gFirstInputDelay : "") +
-          "&HN=" +
-          encodeURIComponent(document.location.hostname) +
-          "&PN=" +
-          encodeURIComponent(document.location.pathname);
-        var beaconUrl = globalConfig.beaconUrl + querystring;
+        var beaconUrl = _getBeaconUrl() +
+        "&IX=" +
+        sIx +
+        (typeof gFirstInputDelay !== "undefined" ? "&FID=" + gFirstInputDelay : "");
         logger.logEvent(LogEvent.InteractionBeaconSent, [beaconUrl]);
         _sendBeacon(beaconUrl);
         gbIxSent = 1;
@@ -1612,23 +1580,7 @@
       }
       var sCustomerData = customerDataValues(); // customer data
       if (sCustomerData) {
-        var querystring = "?v=" +
-          SCRIPT_VERSION +
-          "&id=" +
-          customerid +
-          "&sid=" +
-          gSyncId +
-          "&uid=" +
-          gUid +
-          "&CD=" +
-          sCustomerData +
-          "&l=" +
-          encodeURIComponent(_getPageLabel()) +
-          "&HN=" +
-          encodeURIComponent(document.location.hostname) +
-          "&PN=" +
-          encodeURIComponent(document.location.pathname);
-        var beaconUrl = globalConfig.beaconUrl + querystring;
+        var beaconUrl = _getBeaconUrl();
         logger.logEvent(LogEvent.CustomDataBeaconSent, [beaconUrl]);
         _sendBeacon(beaconUrl);
       }

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

@@ -15,10 +15,13 @@
   step_number = 0
 
   step_nav_helper = GovukPublishingComponents::Presenters::StepByStepNavHelper.new
+
+  ga4_tracking ||= false
 %>
 <% if steps %>
   <div
-    data-module="gemstepnav"
+    data-module="gemstepnav<% if ga4_tracking %> ga4-event-tracker<% end %>"
+    <%= "data-ga4-expandable" if ga4_tracking %>
     class="gem-c-step-nav js-hidden <% if small %>govuk-!-display-none-print<% end %> <% unless small %>gem-c-step-nav--large<% end %>"
     <%= "data-remember" if remember_last_step %>
     <%= "data-id=#{tracking_id}" if tracking_id %>

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

@@ -72,6 +72,40 @@ examples:
           ]
         }
       ]
+  with_google_analytics_4_tracking:
+    description: |
+      The ga4_tracking boolean allows you to add Google Analytics 4 (GA4) tracking to your component.
+      Setting this to true will add the `ga4-event-tracker` module to your component. The JavaScript will then add a `data-ga4-event` attribute and `data-ga4-expandable` attribute to the "Show all steps" button, and each clickable Step heading.
+      GA4 will then track these elements when they are expanded or collapsed.
+      `data-ga4-event` contains a JSON with event data relevant to our tracking. `data-ga4-expandable` enables the value of `aria-expanded` to be captured.
+      See the [ga4-event-tracker](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-event-tracker.md) docs for more information.
+    data:
+      ga4_tracking: true
+      steps: [
+        {
+          title: "Do something",
+          contents: [
+            {
+              type: 'paragraph',
+              text: 'This is a paragraph of text.'
+            },
+            {
+              type: 'paragraph',
+              text: 'This is also a paragraph of text that intentionally contains lots of words in order to fill the width of the page successfully to check layout and so forth.'
+            }
+          ],
+        },
+        {
+          title: "Do something thing else",
+          logic: "and",
+          contents: [
+            {
+              type: 'paragraph',
+              text: 'Some more text.'
+            },
+          ]
+        },
+      ]
   with_unique_tracking:
     description: |
       In order to identify the step by step navigation the component is part of, we need to track a unique ID of the navigation in Google Analytics. This ID should be the same across all pages that are linked from and are part of that navigation. Its value is included in any tracking events, specifically in dimension96. It refers to the ID of the step nav page.

data/app/views/govuk_publishing_components/components/feedback/_problem_form.html.erb

@@ -41,7 +41,7 @@
       <%= render "govuk_publishing_components/components/button", {
         text: t("components.feedback.send"),
         data_attributes: {
-          ga4: {
+          ga4_event: {
             event_name: "form_submit",
             type: "feedback",
             text: "Send",

data/app/views/govuk_publishing_components/components/feedback/_survey_signup_form.html.erb

@@ -28,7 +28,7 @@
       <%= render "govuk_publishing_components/components/button", {
         text: t("components.feedback.send_me_survey"),
         data_attributes: {
-          ga4: {
+          ga4_event: {
             event_name: "form_submit",
             type: "feedback",
             text: "Send me the survey",

data/lib/govuk_publishing_components/presenters/button_helper.rb

@@ -38,7 +38,8 @@ module GovukPublishingComponents
           @info_text_classes << margin_class
         end
         @rel = local_assigns[:rel]
-        @data_attributes = local_assigns[:data_attributes]
+        @data_attributes = local_assigns[:data_attributes]&.symbolize_keys || {}
+        @data_attributes[:module] = "govuk-button #{data_attributes[:module]}".strip if link?
         @margin_bottom = local_assigns[:margin_bottom]
         @inline_layout = local_assigns[:inline_layout]
         @target = local_assigns[:target]

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "33.0.0".freeze
+  VERSION = "33.1.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 33.0.0
+  version: 33.1.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-11-29 00:00:00.000000000 Z
+date: 2022-12-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config