govuk_publishing_components 35.14.0 → 35.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cbe4c3f60d3220a9d2b715392ba0bdd2f6bce4f92153fff876e8a0b608361161
-  data.tar.gz: 94bd59d7a23b8e3cec4882814d7fb0140f81f0bd53bc23f0e475700ba8c489f8
+  metadata.gz: 999c5822c246101234a2c8d42828e3ee8b17df824b0472c12b55df5c2d81c4be
+  data.tar.gz: e6d08b1e863e2ded1152342176e3e7c506f3a89baf06a1c3b2b45c7c73c46ce0
 SHA512:
-  metadata.gz: 47f46ab14ccabebf2a3a3c0da9bc03f9b8207d1e54b6a0c4eb8830eb87b5ce200dd606fd2de50c3804d61f222518c560b046ff77b0de87e635a84a653d77d758
-  data.tar.gz: c51c0a0407bfa84b24ba4d5dfb281f9c31657f1b18e5afe687198c401dbb0f05dc795d7c27ecdf9fbbfe8413cc82a18f28016d77f3d4248351780e0731a61e55
+  metadata.gz: 6fe723d3ea44de844e2228dbbbcfa815148df3b96b94edb58acba736815ab6f92142bf5f3853d0da0d2bca8f730f765414ea7d1c05db738d18c830bfadc88235
+  data.tar.gz: c06d8fbd16d112658797943def5f8b817f5c2c7e0424381cf16e8fb5c920d47a4ed8e88411be7509793da277f0f2d2f609765b6eb37d49550352b19be310d10b

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(),
 
@@ -55,7 +55,9 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
             between fresh page loads and dynamic page updates. */
             dynamic: referrer ? 'true' : 'false',
             emergency_banner: document.querySelector('[data-ga4-emergency-banner]') ? 'true' : undefined,
-            phase_banner: this.getElementAttribute('data-ga4-phase-banner') || 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)
@@ -63,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 () {

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/_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/_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/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/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.14.0".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.14.0
+  version: 35.15.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-08-17 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