Use JavaScript to create 'Show all' GA4 JSON

This is a lot simpler as we do not need to move anything from the template to the button. We instead just create the JSON directly in the button in JS.
alphagov · Nov 30, 2022 · a24ccd2 · a24ccd2
1 parent 4bb31df
commit a24ccd2
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 23 deletions.
diff --git a/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js b/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js
@@ -66,7 +66,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   Gemstepnav.prototype.addShowHideAllButton = function () {
     var showAll = document.createElement('div')
     var steps = this.$module.querySelectorAll('.gem-c-step-nav__steps')[0]
-    var showAllGa4Data = this.$module.getAttribute('data-ga4-show-all-attributes')
 
     showAll.className = 'gem-c-step-nav__controls govuk-!-display-none-print'
     showAll.innerHTML =
@@ -80,10 +79,14 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$module.insertBefore(showAll, steps)
     this.$module.showOrHideAllButton = this.$module.querySelectorAll('.js-step-controls-button')[0]
 
-    if (showAllGa4Data) {
-      this.$module.showOrHideAllButton.setAttribute('data-ga4-event', showAllGa4Data)
-      this.$module.showOrHideAllButton.setAttribute('data-ga4-expandable', '') // Enables tracking of aria-expanded in ga4-event-tracker.
-      this.$module.removeAttribute('data-ga4-show-all-attributes') // Remove it to prevent repetition. The JSON lives there temporarily until the HTML it is needed on is rendered by this JS.
+    // if GA4 is enabled, set attributes on 'show all sections' for tracking using ga4-event-tracker
+    var dataModule = this.$module.getAttribute('data-module')
+    var isGa4Enabled = dataModule ? dataModule.indexOf('ga4-event-tracker') !== -1 : false
+    if (isGa4Enabled) {
+      var indexTotal = this.$module.querySelectorAll('li.gem-c-step-nav__step').length
+      var showAllAttributesGa4 = { event_name: 'select_content', type: 'step by step', index: 0, index_total: indexTotal }
+
+      this.$module.showOrHideAllButton.setAttribute('data-ga4-event', JSON.stringify(showAllAttributesGa4))
     }
   }
 

diff --git a/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb b/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb
@@ -16,28 +16,19 @@
 
   step_nav_helper = GovukPublishingComponents::Presenters::StepByStepNavHelper.new
 
-  ga4_tracking ||= nil
-  ga4_show_all_json ||= nil
-  if ga4_tracking
-    ga4_show_all_json = {
-      event_name: 'select_content',
-      type: 'step by step',
-      index: 0,
-      index_total: steps.length
-    }.to_json
-  end
+  ga4_tracking ||= false
 %>
 <% if steps %>
   <div
     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-show-text="<%= t("components.step_by_step_nav.show") %>"
     data-hide-text="<%= t("components.step_by_step_nav.hide") %>"
     data-show-all-text="<%= t("components.step_by_step_nav.show_all") %>"
     data-hide-all-text="<%= t("components.step_by_step_nav.hide_all") %>"
-    <% if ga4_tracking %> data-ga4-show-all-attributes= "<%= ga4_show_all_json %>" <% end %>
   >
     <ol class="gem-c-step-nav__steps">
       <% steps.each_with_index do |step, step_index| %>

diff --git a/spec/components/step_by_step_nav_spec.rb b/spec/components/step_by_step_nav_spec.rb
@@ -257,7 +257,8 @@ def stepnav
   it "adds ga4 attributes" do
     render_component(steps: stepnav, ga4_tracking: true)
 
-    assert_select ".gem-c-step-nav[data-ga4-show-all-attributes='{\"event_name\":\"select_content\",\"type\":\"step by step\",\"index\":0,\"index_total\":5}']"
+    assert_select ".gem-c-step-nav[data-ga4-expandable]"
+    assert_select ".gem-c-step-nav[data-module='gemstepnav ga4-event-tracker']"
     assert_select "#{step1} .gem-c-step-nav__title .js-step-title[data-ga4-event='{\"event_name\":\"select_content\",\"type\":\"step by step\",\"text\":\"Step 1\",\"index\":1,\"index_total\":5}']"
   end
 end
diff --git a/spec/javascripts/components/step-by-step-nav-spec.js b/spec/javascripts/components/step-by-step-nav-spec.js
@@ -6,7 +6,7 @@ describe('A stepnav module', function () {
 
   var $element, element
   var html =
-    '<div data-module="gemstepnav" class="gem-c-step-nav js-hidden" data-id="unique-id" data-show-text="Show" data-hide-text="Hide" data-show-all-text="Show all steps" data-hide-all-text="Hide all steps" data-ga4-show-all-attributes=\'{"event_name":"select_content","type":"step by step","index":0,"index_total":99}\'>' +
+    '<div data-module="gemstepnav" class="gem-c-step-nav js-hidden" data-id="unique-id" data-show-text="Show" data-hide-text="Hide" data-show-all-text="Show all steps" data-hide-all-text="Hide all steps">' +
       '<ol class="gem-c-step-nav__steps">' +
         '<li class="gem-c-step-nav__step js-step" id="topic-step-one" data-track-count="stepnavStep">' +
           '<div class="gem-c-step-nav__header js-toggle-panel" data-position="1">' +
@@ -926,21 +926,22 @@ describe('A stepnav module', function () {
     beforeEach(function () {
       element = document.createElement('div')
       element.innerHTML = html
+      element.childNodes[0].setAttribute('data-module', 'gemstepnav ga4-event-tracker')
+      element.childNodes[0].setAttribute('data-ga4-expandable', '')
       new GOVUK.Modules.Gemstepnav(element.childNodes[0]).init()
     })
 
-    it('moves the data-ga4-show-all-attributes attribute from the parent <div> to the JS generated "show all steps" <button>', function () {
+    it('adds the "Show all" JSON to the JS generated "show all steps" <button>', function () {
       var stepNav = element.childNodes[0]
       var showAllButton = stepNav.querySelector('button.js-step-controls-button')
-      expect(showAllButton.getAttribute('data-ga4-expandable')).toEqual('')
-      expect(showAllButton.getAttribute('data-ga4-event')).toEqual('{"event_name":"select_content","type":"step by step","index":0,"index_total":99}')
+
+      expect(showAllButton.getAttribute('data-ga4-event')).toEqual('{"event_name":"select_content","type":"step by step","index":0,"index_total":3}')
     })
 
-    it('moves the data-ga4-event attribute from a step title <span> to the JS generated step <button>', function () {
+    it('adds the data-ga4-event attribute to the JS generated step <button>', function () {
       var stepNav = element.childNodes[0]
       var stepButton = stepNav.querySelector('#topic-step-one .js-step-title button')
 
-      expect(stepButton.getAttribute('data-ga4-expandable')).toEqual('')
       expect(stepButton.getAttribute('data-ga4-event')).toEqual('{"event_name":"select_content","type":"step by step","text":"Example","index":1,"index_total":99}')
     })
   })