govuk_publishing_components 34.13.0 → 34.14.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 21e3ffb5b58dc3b31d794d2582929eac560f6dbf9509bf79164e90718483ef18
-  data.tar.gz: 7c003248697419a6c54c6fdeba073fbce724390f266a54ba7e2a3149447f75d2
+  metadata.gz: c4137db9fa2f61ba41157832c2d8a959756eb36e11837e4d58654b264d68a3f0
+  data.tar.gz: a3eb50516bf440839af9b74e1fc5ab44e9fc21ee0afb7910cdb742d10a6d3182
 SHA512:
-  metadata.gz: 90c9c967e09f36e6c9c8fefed7db444427ff14568e800a6b9255dfb69eab7c6e81f78e6eb939958075645822f9d9ca93875c91a1f83b38be61e4951522a584f0
-  data.tar.gz: 5163288eb0c08e404376545724810b3854a5f745f6e4ad0fd1fe23a3ef82fa152ac14b1c2971df6b6f8e04563b0ddac4018ec218f5e6dabe85879481cbd39f28
+  metadata.gz: 3e780d3b9f9f2e72c471767c7be3bb611bae0eb7f2b211e19ae85b6fdae4338ae20d346c53b72c6d1b1d0e3d06447084eb389aeb64960df48b68d60bdaa4ed7e
+  data.tar.gz: 7cfd8703805c415ffad093fd18dc104d6d41c7e51305673c178b90778eb52bf3037b52ea2550cdb42c0ba4291d6e53c95c577800f2b8fe398ee503c1a3910b76

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

@@ -28,13 +28,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     if (window.dataLayer) {
       try {
         var data = this.module.getAttribute(this.trackingTrigger)
-        data = JSON.parse(data)
+        data = JSON.parse(data) || {}
       } catch (e) {
         // if there's a problem with the config, don't start the tracker
         console.error('GA4 configuration error: ' + e.message, window.location)
         return
       }
 
+      if (data.index) {
+        data.index = window.GOVUK.analyticsGa4.core.trackFunctions.createIndexObject(data.index)
+      }
       var schemas = new window.GOVUK.analyticsGa4.Schemas()
       var schema = schemas.mergeProperties(data, 'event_data')
 

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

@@ -237,6 +237,37 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
         var ga4LinkData = JSON.parse(module.getAttribute('data-ga4-link'))
         ga4LinkData.index_total = totalLinks
         module.setAttribute('data-ga4-link', JSON.stringify(ga4LinkData))
+      },
+
+      // index is given as a string of the form 1.2.3 or 1.2
+      // split this into named sub-parameters
+      createIndexObject: function (index) {
+        if (typeof index === 'undefined') {
+          return undefined
+        }
+        if (typeof index === 'object') {
+          return index
+        }
+
+        index = index.toString().split('.')
+        // this will soon include 'index_section_count'
+        // number of sections overall in the thing being tracked (but not yet in use)
+        switch (index.length) {
+          case 1:
+            return {
+              index_section: parseInt(index[0])
+            }
+          case 2:
+            return {
+              index_section: parseInt(index[0]),
+              index_link: parseInt(index[1])
+            }
+          case 3:
+            return {
+              index_section: parseInt(index[1]),
+              index_link: parseInt(index[2])
+            }
+        }
       }
     },
 

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

@@ -42,6 +42,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
       var text = data.text || event.target.textContent
       data.text = window.GOVUK.analyticsGa4.core.trackFunctions.removeLinesAndExtraSpaces(text)
+      data.index = window.GOVUK.analyticsGa4.core.trackFunctions.createIndexObject(data.index)
 
       var schemas = new window.GOVUK.analyticsGa4.Schemas()
       var schema = schemas.mergeProperties(data, 'event_data')

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

@@ -87,6 +87,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       data.method = window.GOVUK.analyticsGa4.core.trackFunctions.getClickType(event)
       data.external = window.GOVUK.analyticsGa4.core.trackFunctions.isExternalLink(data.url) ? 'true' : 'false'
       data.index = event.target.getAttribute('data-ga4-index') ? parseInt(event.target.getAttribute('data-ga4-index')) : data.index || undefined
+      data.index = window.GOVUK.analyticsGa4.core.trackFunctions.createIndexObject(data.index)
 
       var schemas = new window.GOVUK.analyticsGa4.Schemas()
       var schema = schemas.mergeProperties(data, 'event_data')

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

@@ -1,7 +1,10 @@
-<% prioritise_taxon_breadcrumbs ||= false %>
-<% breadcrumb_selector = GovukPublishingComponents::Presenters::BreadcrumbSelector.new(content_item, request, prioritise_taxon_breadcrumbs) %>
-<% inverse ||= false %>
-<% collapse_on_mobile ||= true unless local_assigns[:collapse_on_mobile].eql?(false) %>
+<% 
+  ga4_tracking ||= false
+  prioritise_taxon_breadcrumbs ||= false
+  breadcrumb_selector = GovukPublishingComponents::Presenters::BreadcrumbSelector.new(content_item, request, prioritise_taxon_breadcrumbs, ga4_tracking)
+  inverse ||= false
+  collapse_on_mobile ||= true unless local_assigns[:collapse_on_mobile].eql?(false) 
+%>
 
 <div class="gem-c-contextual-breadcrumbs">
   <% if breadcrumb_selector.step_by_step %>

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

@@ -10,7 +10,7 @@
 <div class="gem-c-contextual-sidebar">
   <% if navigation.content_tagged_to_a_reasonable_number_of_step_by_steps? %>
     <%# Rendering step by step related items because there are a few but not too many of them %>
-    <%= render 'govuk_publishing_components/components/step_by_step_nav_related', links: navigation.step_nav_helper.related_links %>
+    <%= render 'govuk_publishing_components/components/step_by_step_nav_related', links: navigation.step_nav_helper.related_links, ga4_tracking: ga4_tracking %>
   <% end %>
 
   <% if navigation.content_tagged_to_current_step_by_step? %>
@@ -26,7 +26,8 @@
     <%= render 'govuk_publishing_components/components/step_by_step_nav_related', {
       pretitle: t("components.contextual_sidebar.pretitle"),
       links: navigation.step_nav_helper.also_part_of_step_nav,
-      always_display_as_list: true
+      always_display_as_list: true,
+      ga4_tracking: ga4_tracking
     } %>
   <% end %>
 

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

@@ -3,12 +3,17 @@
 
   title ||= false
   path ||= false
+  ga4_tracking ||= false
   breadcrumbs = [
     { title: "Home", url: "/" },
     { title: title, url: path }
   ]
   breadcrumb_presenter = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs)
 
+  data = {}
+  data[:module] = "gem-track-click"
+  data[:module] << " ga4-link-tracker" if ga4_tracking
+
   tracking_id ||= false
   tracking_category ||= "stepNavHeaderClicked"
   tracking_action ||= "top"
@@ -30,7 +35,7 @@
     <%= raw JSON.pretty_generate(breadcrumb_presenter.structured_data) %>
   </script>
 
-  <%= tag.div class: classes, data: { module: "gem-track-click" } do %>
+  <%= tag.div(class: classes, data: data) do %>
     <strong class="gem-c-step-nav-header__part-of">Part of</strong>
     <% if path %>
       <a href="<%= path %>"
@@ -38,6 +43,9 @@
         data-track-category="<%= tracking_category %>"
         data-track-action="<%= tracking_action %>"
         data-track-label="<%= tracking_label %>"
+        <% if ga4_tracking %>
+          data-ga4-link='{"event_name":"navigation", "type":"super breadcrumb", "index":{"index_link": "1"}, "index_total":"1"}'
+        <% end %>
         <% if tracking_dimension_enabled %>
           data-track-dimension="<%= tracking_dimension %>"
           data-track-dimension-index="<%= tracking_dimension_index %>"

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

@@ -1,14 +1,17 @@
 <%
   add_gem_component_stylesheet("step-by-step-nav-related")
-
+  ga4_tracking ||= false
   links ||= []
   pretitle ||= t("components.step_by_step_nav_related.part_of")
   always_display_as_list ||= false
+  classes = %w(gem-c-step-nav-related)
+  classes << "gem-c-step-nav-related--singular" if links.length == 1
+  data = {}
+  data[:module] = "gem-track-click"
+  data[:module] << " ga4-link-tracker" if ga4_tracking
 %>
 <% if links.any? %>
-  <div
-    class="gem-c-step-nav-related <%= "gem-c-step-nav-related--singular" if links.length == 1 %>"
-    data-module="gem-track-click">
+  <%= tag.div(class: classes, data: data) do %>
     <h2 class="gem-c-step-nav-related__heading">
       <span class="gem-c-step-nav-related__pretitle"><%= pretitle %></span>
       <% if links.length == 1 && !always_display_as_list %>
@@ -19,14 +22,18 @@
             data-track-label="<%= links[0][:href] %>"
             data-track-dimension="<%= links[0][:text] %>"
             data-track-dimension-index="29"
-            data-track-options='{"dimension96" : "<%= links[0][:tracking_id] %>" }'>
+            data-track-options='{"dimension96" : "<%= links[0][:tracking_id] %>" }'
+            <% if ga4_tracking %>
+              data-ga4-link='{"event_name":"navigation", "type":"related content", "index":{"index_link": "1"}, "index_total":"1"}'
+            <% end %>
+          >
             <%= links[0][:text] %>
           </a>
         </h2>
       <% else %>
         </h2>
         <ul class="gem-c-step-nav-related__links">
-          <% links.each do |link| %>
+          <% links.each_with_index do |link, index| %>
             <li class="gem-c-step-nav-related__link-item">
               <a href="<%= link[:href] %>"
                 class="govuk-link"
@@ -35,12 +42,16 @@
                 data-track-label="<%= link[:href] %>"
                 data-track-dimension="<%= link[:text] %>"
                 data-track-dimension-index="29"
-                data-track-options='{"dimension96" : "<%= link[:tracking_id] %>" }'>
+                data-track-options='{"dimension96" : "<%= link[:tracking_id] %>" }'
+                <% if ga4_tracking %>
+                  data-ga4-link='{"event_name":"navigation", "type":"related content", "index":{"index_link": "<%= index + 1 %>"}, "index_total": "<%= links.length %>"}'
+                <% end %>
+              >
                 <%= link[:text] %>
               </a>
             </li>
           <% end %>
         </ul>
       <% end %>
-  </div>
-<% end %>
+  <% end %>
+<% end %>

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

@@ -32,3 +32,16 @@ examples:
       inverse: true
     context:
       dark_background: true
+  with_ga4_tracking:
+    description: |
+      Adds GA4 tracking to the step by step nav header component when it is rendered as a breadcrumb. See the 
+      [ga4-link-tracker documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md) for more information.
+      Note: tracking on regular breadcrumbs is enabled by default and does not require activating.
+    data:
+      ga4_tracking: true
+      content_item:
+        title: "A content item"
+        links:
+          part_of_step_navs:
+            - title: "Learn to drive a car: step by step"
+              base_path: "/micropigs-vs-micropugs"

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

@@ -157,3 +157,14 @@ examples:
                       - text: Arrange the funeral
                         href: "/after-a-death/arrange-the-funeral"
                     optional: false
+  with_ga4_tracking_on_part_of_step_by_step_heading(s):
+    description: Adds Google Analytics 4 tracking to the "Part of" step by step heading(s) in the sidebar. Currently only the Related Navigation component, Step by Step navigation component and Ukraine CTA accept this option.
+    data:
+      ga4_tracking: true
+      content_item:
+        links:
+          part_of_step_navs:
+            - title: "Choosing a micropig or micropug: step by step"
+              base_path: "/micropigs-vs-micropugs"
+            - title: "Walk your micropig: step by step"
+              base_path: "/porgs-step-by-step"

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

@@ -51,3 +51,9 @@ examples:
       tracking_action: "customTrackingAction"
       tracking_label: "customTrackingLabel"
       tracking_dimension_enabled: false
+  with_ga4_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-link-tracker` module to your component. The JavaScript will then add a `data-ga4-link` attribute which contains a JSON object with data relevant to our tracking. See the [ga4-link-tracker docs](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md) for more information.
+    data:
+      ga4_tracking: true
+      title: 'Learn to drive a motorbike: step by step'
+      path: /learn-to-drive-a-motorbike

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

@@ -76,3 +76,13 @@ examples:
           text: 'Learn to drive a motorbike: step by step'
         }
       ]
+  with_ga4_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-link-tracker` module to your component. The JavaScript will then add a `data-ga4-link` attribute which contains a JSON object with data relevant to our tracking. See the [ga4-link-tracker docs](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md) for more information.
+    data:
+      ga4_tracking: true
+      links: [
+        {
+          href: '#',
+          text: 'With ga4 tracking'
+        }
+      ]

data/lib/govuk_publishing_components/presenters/breadcrumb_selector.rb

@@ -3,10 +3,11 @@ module GovukPublishingComponents
     class BreadcrumbSelector
       attr_reader :content_item, :request, :prioritise_taxon_breadcrumbs
 
-      def initialize(content_item, request, prioritise_taxon_breadcrumbs)
+      def initialize(content_item, request, prioritise_taxon_breadcrumbs, ga4_tracking)
         @content_item = content_item
         @request = request
         @prioritise_taxon_breadcrumbs = prioritise_taxon_breadcrumbs
+        @ga4_tracking = ga4_tracking
       end
 
       def breadcrumbs
@@ -37,7 +38,7 @@ module GovukPublishingComponents
         elsif navigation.content_tagged_to_current_step_by_step?
           {
             step_by_step: true,
-            breadcrumbs: navigation.step_nav_helper.header,
+            breadcrumbs: navigation.step_nav_helper.header(@ga4_tracking),
           }
         elsif navigation.content_is_tagged_to_a_live_taxon? && prioritise_taxon_breadcrumbs
           {

data/lib/govuk_publishing_components/presenters/breadcrumbs.rb

@@ -61,7 +61,9 @@ module GovukPublishingComponents
           ga4_link: {
             event_name: "navigation",
             type: "breadcrumbs",
-            index: index.to_s,
+            index: {
+              index_link: index.to_s,
+            },
             index_total: breadcrumbs_length.to_s,
           },
         }

data/lib/govuk_publishing_components/presenters/page_with_step_by_step_navigation.rb

@@ -82,12 +82,13 @@ module GovukPublishingComponents
         end
       end
 
-      def header
+      def header(ga4_tracking)
         if show_header?
           {
             title: current_step_nav.title,
             path: current_step_nav.base_path,
             tracking_id: current_step_nav.content_id,
+            ga4_tracking: ga4_tracking,
           }
         else
           {}

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "34.13.0".freeze
+  VERSION = "34.14.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 34.13.0
+  version: 34.14.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-02-28 00:00:00.000000000 Z
+date: 2023-03-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config