From a24ccd2a5e1130f397101e53486abd178cbb4d74 Mon Sep 17 00:00:00 2001 From: AshGDS <8880610+AshGDS@users.noreply.github.com> Date: Wed, 30 Nov 2022 11:37:38 +0000 Subject: [PATCH] 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. --- .../components/step-by-step-nav.js | 13 ++++++++----- .../components/_step_by_step_nav.html.erb | 13 ++----------- spec/components/step_by_step_nav_spec.rb | 3 ++- .../javascripts/components/step-by-step-nav-spec.js | 13 +++++++------ 4 files changed, 19 insertions(+), 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 index 4a58dea4b5..29c1d2d07f 100644 --- 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 index 472cb245fb..2997b46d31 100644 --- 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,20 +16,12 @@ 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 %>
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 %> @@ -37,7 +29,6 @@ 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 %> >
    <% 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 index 61caf1069e..a33bfa8430 100644 --- 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 index f0b5d2c15f..0ba334569f 100644 --- 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 = - '
    ' + + '
    ' + '
      ' + '
    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
      to the JS generated "show all steps"