govuk_publishing_components 35.13.2 → 35.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d89a426d686fe0891582f8851ff7b27c57a457b838dccd81aa07a4868a9a9975
-  data.tar.gz: b267048c6e6bd91689fcedbad4e16835de62ff50aee68e94684ec4533ad7c5ab
+  metadata.gz: 999c5822c246101234a2c8d42828e3ee8b17df824b0472c12b55df5c2d81c4be
+  data.tar.gz: e6d08b1e863e2ded1152342176e3e7c506f3a89baf06a1c3b2b45c7c73c46ce0
 SHA512:
-  metadata.gz: 9dcd81b321da508d0475825320afa9674bfbac1bf1ef73f5ce32ccd66d0f5225e08b569a9819ca34672c13e919e154e02570b51109613e53d9bc79945a0f3482
-  data.tar.gz: 24bf0744fc140a4644c5b12d0de816869298a1927a25e3b1e126d0644b4bae78cd6ae5409d194e48465429e049517440321d39b12edd1ee783e717f54446659f
+  metadata.gz: 6fe723d3ea44de844e2228dbbbcfa815148df3b96b94edb58acba736815ab6f92142bf5f3853d0da0d2bca8f730f765414ea7d1c05db738d18c830bfadc88235
+  data.tar.gz: c06d8fbd16d112658797943def5f8b817f5c2c7e0424381cf16e8fb5c920d47a4ed8e88411be7509793da277f0f2d2f609765b6eb37d49550352b19be310d10b

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)

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

@@ -17,7 +17,7 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
             location: this.getLocation(),
             /* If the init() function receives a referrer parameter, this indicates that it has been called as a part of an AJAX request and
             this.getReferrer() will not return the correct value. Therefore we need to rely on the referrer parameter. */
-            referrer: referrer ? this.PIIRemover.stripPIIWithOverride(referrer, true, true) : this.getReferrer(),
+            referrer: this.getReferrer(referrer),
             title: this.getTitle(),
             status_code: this.getStatusCode(),
 
@@ -53,7 +53,11 @@ 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,
+            devolved_nations_banner: this.getElementAttribute('data-ga4-devolved-nations-banner') || undefined,
+            cookie_banner: document.querySelector('[data-ga4-cookie-banner]') ? 'true' : undefined
           }
         }
         window.GOVUK.analyticsGa4.core.sendData(data)
@@ -61,11 +65,19 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
     },
 
     getLocation: function () {
-      return this.PIIRemover.stripPII(document.location.href)
+      return this.PIIRemover.stripPII(this.stripGaParam(document.location.href))
     },
 
-    getReferrer: function () {
-      return this.PIIRemover.stripPIIWithOverride(document.referrer, true, true)
+    getReferrer: function (referrer) {
+      referrer = this.stripGaParam(referrer || document.referrer)
+      return this.PIIRemover.stripPIIWithOverride(referrer, true, true)
+    },
+
+    // remove GA parameters of the form _ga=2320.021-012302 or _gl=02.10320.01230-123
+    stripGaParam: function (str) {
+      str = str.replace(/(_ga=[0-9.-]+)/g, '_ga=[id]')
+      str = str.replace(/(_gl=[0-9.-]+)/g, '_gl=[id]')
+      return str
     },
 
     getTitle: function () {
@@ -91,6 +103,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/components/cookie-banner.js

@@ -4,7 +4,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 (function (Modules) {
   function CookieBanner ($module) {
     this.$module = $module
-    this.$module.cookieBanner = document.querySelector('.gem-c-cookie-banner')
     this.$module.cookieBannerConfirmationMessage = this.$module.querySelector('.gem-c-cookie-banner__confirmation')
     this.$module.cookieBannerConfirmationMessageText = this.$module.querySelector('.gem-c-cookie-banner__confirmation-message')
   }
@@ -100,16 +99,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   CookieBanner.prototype.showConfirmationMessage = function () {
-    this.$cookieBannerHeader = document.querySelector('.govuk-cookie-banner__heading')
+    this.$cookieBannerHeader = this.$module.querySelector('.govuk-cookie-banner__heading')
     this.$cookieBannerHeader.hidden = true
 
-    this.$cookieBannerMainContent = document.querySelector('.gem-c-cookie-banner__content')
+    this.$cookieBannerMainContent = this.$module.querySelector('.gem-c-cookie-banner__content')
     this.$cookieBannerMainContent.hidden = true
 
-    this.$cookieBannerConfirmationButtons = document.querySelector('.js-confirmation-buttons')
+    this.$cookieBannerConfirmationButtons = this.$module.querySelector('.js-confirmation-buttons')
     this.$cookieBannerConfirmationButtons.hidden = true
 
-    this.$cookieBannerHideButton = document.querySelector('.js-hide-button')
+    this.$cookieBannerHideButton = this.$module.querySelector('.js-hide-button')
     this.$cookieBannerHideButton.hidden = false
   }
 

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss

@@ -693,7 +693,7 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
-.gem-c-layout-super-navigation-header__navigation-second-items--topics {
+.gem-c-layout-super-navigation-header__navigation-second-items--services-and-information {
   @include govuk-media-query($until: "desktop") {
     border-bottom: 1px solid govuk-colour("mid-grey");
   }

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,6 +39,9 @@
         class: "gem-c-attachment__attribute",
       )
     end
+
+    ga4_link[:event_name] = 'file_download'
+
   when "html"
     attributes << tag.span(
       "HTML",
@@ -51,7 +55,7 @@
   end
 
 %>
-<%= 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.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/_cookie_banner.html.erb

@@ -30,6 +30,8 @@
   services_cookies ||= nil
   css_classes = %w(gem-c-cookie-banner govuk-clearfix govuk-cookie-banner js-banner-wrapper)
   css_classes << "gem-c-cookie-banner--services" if services_cookies
+
+  ga4_tracking ||= false
 %>
 
 <div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" data-nosnippet role="region" aria-label="<%= title %>">
@@ -39,7 +41,14 @@
         <h2 class="govuk-cookie-banner__heading govuk-heading-m"><%= title %></h2>
         <div tabindex="-1" class="govuk-cookie-banner__content gem-c-cookie-banner__confirmation">
           <span class="gem-c-cookie-banner__content"><%= text %></span>
-          <p class="gem-c-cookie-banner__confirmation-message--accepted govuk-body" hidden><%= t("components.cookie_banner.confirmation_message.accepted") %>. <span class="gem-c-cookie-banner__confirmation-message"><%= confirmation_message %></span></p>
+          <p class="gem-c-cookie-banner__confirmation-message--accepted govuk-body" hidden
+          <% if ga4_tracking %>
+            data-ga4-cookie-banner <%# GA4 pageview JS looks for data-ga4-cookie-banner %>
+            data-module="ga4-link-tracker"
+            data-ga4-track-links-only
+            data-ga4-set-indexes
+            data-ga4-link="<%= { event_name: "navigation", type: "cookie banner", section: t("components.cookie_banner.confirmation_message.accepted", locale: :en) }.to_json %>"
+          <% end %>><%= t("components.cookie_banner.confirmation_message.accepted") %>. <span class="gem-c-cookie-banner__confirmation-message"><%= confirmation_message %></span></p>
           <p class="gem-c-cookie-banner__confirmation-message--rejected govuk-body" hidden><%= t("components.cookie_banner.confirmation_message.rejected") %>. <span class="gem-c-cookie-banner__confirmation-message"><%= confirmation_message %></span></p>
         </div>
       </div>
@@ -85,7 +94,26 @@
       <% end %>
     </div>
     <div hidden class="js-hide-button govuk-button-group">
-      <button class="gem-c-cookie-banner__hide-button govuk-button" data-hide-cookie-banner="true" data-module="gem-track-click" data-track-category="cookieBanner" data-track-action="Hide cookie banner"><%= t("components.cookie_banner.hide") %></button>
+      <%
+        button_data_module = "gem-track-click"
+        button_data_module << " ga4-event-tracker" if ga4_tracking
+
+        ga4_event = {
+          event_name: "select_content",
+          type: "cookie banner",
+          action: "closed",
+          section: t("components.cookie_banner.confirmation_message.accepted", locale: :en)
+        }.to_json if ga4_tracking
+      %>
+      <button
+        class="gem-c-cookie-banner__hide-button govuk-button"
+        data-hide-cookie-banner="true"
+        data-module="<%= button_data_module %>"
+        data-track-category="cookieBanner"
+        data-track-action="Hide cookie banner"
+        <% if ga4_tracking %> data-ga4-event="<%= ga4_event %>" <% end %>>
+          <%= t("components.cookie_banner.hide") %>
+        </button>
     </div>
   </div>
 </div>

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

@@ -6,10 +6,24 @@
 
   applies_to ||= t("components.devolved_nations.applies_to")
   heading_level ||= 2
+  ga4_tracking ||= false
+  data_attributes = {}
+
+  if ga4_tracking
+    data_attributes[:ga4_devolved_nations_banner] = devolved_nations_helper.ga4_applicable_nations_title_text(true)
+    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: "devolved nations banner",
+      section: t("components.devolved_nations.applies_to", locale: :en) + " " + devolved_nations_helper.ga4_applicable_nations_title_text,
+    }.to_json
+  end
 %>
 
 <% if national_applicability.any? { |k,v| v[:applicable] == true } %>
-  <%= tag.section class: "gem-c-devolved-nations" do %>
+  <%= tag.section class: "gem-c-devolved-nations", data: data_attributes do %>
     <%= content_tag(shared_helper.get_heading_level, class: "govuk-heading-s govuk-!-margin-bottom-0") do %>
       <%= applies_to %> <%= devolved_nations_helper.applicable_nations_title_text %>
     <% end %>

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/_layout_super_navigation_header.html.erb

@@ -217,11 +217,11 @@
                 end
               %>
 
-              <div class="<%= width_class %> gem-c-layout-super-navigation-header__column--<%= column[:label].downcase.sub(" ", "-") %>">
+              <div class="<%= width_class %> gem-c-layout-super-navigation-header__column--<%= column[:label].downcase.gsub(" ", "-") %>">
                 <h3 class="govuk-heading-m gem-c-layout-super-navigation-header__column-header">
                   <%= column[:label] %>
                 </h3>
-                <ul class="gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= column[:label].downcase.sub(" ", "-") %>">
+                <ul class="gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= column[:label].downcase.gsub(" ", "-") %>">
                   <% index_total = column[:menu_contents].length %>
                   <% column[:menu_contents].each_with_index do | item, index | %>
                       <%

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/cards.yml

@@ -20,7 +20,7 @@ uses_component_wrapper_helper: true
 examples:
   default:
     data:
-      heading: Topics
+      heading: Services and information
       items:
         - link:
             text: Benefits
@@ -109,7 +109,7 @@ examples:
 
       Override default subheading level by passing through `sub_heading_level` parameter (defaults to `<h3>`)
     data:
-      heading: Topics
+      heading: Services and information
       heading_level: 3
       sub_heading_level: 4
       items:

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

@@ -49,3 +49,8 @@ examples:
         cookie_preferences:
           text: How we use cookies
           href: "/cookies"
+  with_ga4_tracking:
+    description: |
+      Enables GA4 tracking on the banner. This includes link tracking on the "You have accepted cookies" section, and allows the pageview event that is sent when GA4 initialises to record the presence of the cookie acceptance message.
+    data:
+      ga4_tracking: true

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

@@ -89,3 +89,19 @@ examples:
       national_applicability:
         england:
           applicable: 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:
+      national_applicability:
+        england:
+          applicable: true
+        scotland:
+          applicable: true
+        wales:
+          applicable: true
+        northern_ireland:
+          applicable: false
+          alternative_url: /
+      type: detailed_guide
+      ga4_tracking: true

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/config/locales/en.yml

@@ -91,7 +91,7 @@ en:
       copyright_html: <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">© Crown copyright</a>
       licence_html: All content is available under the <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated
       navigation_links:
-      - title: Topics
+      - title: Services and information
         menu_contents:
         - text: Benefits
           href: "/browse/benefits"
@@ -171,7 +171,7 @@ en:
         href: "/browse"
         label: Menu
       navigation_links_columns:
-      - label: Topics
+      - label: Services and information
         size: 2
         menu_contents:
         - label: Benefits

data/lib/govuk_publishing_components/presenters/devolved_nations_helper.rb

@@ -8,17 +8,29 @@ module GovukPublishingComponents
         @type = local_assigns[:type] || "publication"
       end
 
-      def applicable_nations_title_text
+      def applicable_nations_title_text(use_english_translation = nil)
         @national_applicability
           .select { |_, v| v[:applicable] == true }
-          .map { |k, _| I18n.t("components.devolved_nations.#{k}") }
+          .map { |k, _| get_translation("components.devolved_nations.#{k}", use_english_translation) }
           .sort
           .to_sentence(
-            two_words_connector: I18n.t("components.devolved_nations.connectors.two_words"),
-            last_word_connector: I18n.t("components.devolved_nations.connectors.last_word"),
+            two_words_connector: get_translation("components.devolved_nations.connectors.two_words", use_english_translation),
+            last_word_connector: get_translation("components.devolved_nations.connectors.last_word", use_english_translation),
           )
       end
 
+      def get_translation(key, use_english_translation = nil)
+        return I18n.t(key, locale: :en) if use_english_translation
+
+        I18n.t(key)
+      end
+
+      def ga4_applicable_nations_title_text(remove_connector_word = nil)
+        return applicable_nations_title_text(true).gsub(" and", ",") if remove_connector_word
+
+        applicable_nations_title_text(true)
+      end
+
       def nations_with_urls
         @national_applicability
           .select do |_, v|

data/lib/govuk_publishing_components/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 35.13.2
+  version: 35.15.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-08-15 00:00:00.000000000 Z
+date: 2023-08-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -1468,7 +1468,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.18
+rubygems_version: 3.4.19
 signing_key: 
 specification_version: 4
 summary: A gem to document components in GOV.UK frontend applications