From fb7ef7a30927b35cfc89575b3e812d8f24948838 Mon Sep 17 00:00:00 2001 From: "alex.bowen" Date: Mon, 30 Sep 2024 13:16:28 +0100 Subject: [PATCH 01/11] add ga4 tracking to filter panel --- .../javascripts/components/filter-panel.js | 7 +++++++ app/views/components/_filter_panel.html.erb | 13 +++++++++++-- spec/components/filter_panel_spec.rb | 18 ++++++++++++++++++ .../components/filter-panel-spec.js | 10 +++++++++- 4 files changed, 45 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/components/filter-panel.js b/app/assets/javascripts/components/filter-panel.js index 6e3faf68a..f0245e9c4 100644 --- a/app/assets/javascripts/components/filter-panel.js +++ b/app/assets/javascripts/components/filter-panel.js @@ -31,6 +31,13 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; const newState = this.$button.getAttribute('aria-expanded') !== 'true' this.$button.setAttribute('aria-expanded', newState) this.$content.toggleAttribute('hidden') + this.setTrackingData(newState) + } + + setTrackingData (open) { + const eventTrackingData = JSON.parse(this.$button.getAttribute('data-ga4-event')) + eventTrackingData.action = open === true ? 'opened' : 'closed' + this.$button.setAttribute('data-ga4-event', JSON.stringify(eventTrackingData)) } } diff --git a/app/views/components/_filter_panel.html.erb b/app/views/components/_filter_panel.html.erb index fe638a702..021c71206 100644 --- a/app/views/components/_filter_panel.html.erb +++ b/app/views/components/_filter_panel.html.erb @@ -13,7 +13,7 @@ component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns) shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) - component_helper.add_data_attribute({ module: "filter-panel" }) + component_helper.add_data_attribute({ module: "filter-panel ga4-event-tracker" }) component_helper.add_class("app-c-filter-panel") component_helper.add_class(shared_helper.get_margin_bottom) if local_assigns[:margin_bottom] %> @@ -23,7 +23,16 @@ <%= tag.button( id: button_id, class: "app-c-filter-panel__button govuk-link", - aria: { expanded: "false", controls: panel_content_id } + aria: { expanded: "false", controls: panel_content_id }, + "data-ga4-expandable": true, + "data-ga4-event" => { + event_name: "select_content", + type: "finder", + section: button_text, + text: button_text, + index: 0, + index_total: 4 + }.to_json ) { button_text } %> <% if result_text.present? %> diff --git a/spec/components/filter_panel_spec.rb b/spec/components/filter_panel_spec.rb index 6506fabf1..e5cfe387b 100644 --- a/spec/components/filter_panel_spec.rb +++ b/spec/components/filter_panel_spec.rb @@ -76,4 +76,22 @@ def render_component(locals, &block) assert_select ".app-c-filter-panel a", false end + + it "renders ga4 tracking attributes to open/close button element" do + button_event_attributes = { + "ga4-expandable": "true", + "ga4-event": { + "event-name": "select_content", + "type": "finder", + }, + } + + button_text = "Filter" + + render_component(button_text:, data: button_event_attributes.to_json) + + assert_select ".app-c-filter-panel button[data-ga4-expandable]", true + assert_select ".app-c-filter-panel button[data-ga4-event]", data: button_event_attributes.to_json + assert_select ".app-c-filter-panel button[data-ga4-event]", data: { section: button_text, text: button_text } + end end diff --git a/spec/javascripts/components/filter-panel-spec.js b/spec/javascripts/components/filter-panel-spec.js index 7e6be8cde..97ec77c09 100644 --- a/spec/javascripts/components/filter-panel-spec.js +++ b/spec/javascripts/components/filter-panel-spec.js @@ -12,7 +12,7 @@ describe('Filter panel module', () => { const html = `
- @@ -68,6 +68,14 @@ describe('Filter panel module', () => { expect(document.activeElement).not.toBe(filterPanel.$button) }) + it('sets correct ga4 tracking data when panel is opened and closed', () => { + filterPanel.$button.click() + expect(JSON.parse(filterPanel.$button.getAttribute('data-ga4-event')).action).toBe('opened') + + filterPanel.$button.click() + expect(JSON.parse(filterPanel.$button.getAttribute('data-ga4-event')).action).toBe('closed') + }) + it('prevents any default behaviour of the panel open/close button', () => { filterPanel.$button.addEventListener('click', (event) => { expect(event.defaultPrevented).toBe(true) From cd73e835adbb6b15964cc01c7998cbb9629a3238 Mon Sep 17 00:00:00 2001 From: "alex.bowen" Date: Mon, 30 Sep 2024 15:20:29 +0100 Subject: [PATCH 02/11] add filter section open/close ga4 tracking --- .../javascripts/components/filter-section.js | 25 +++++++++++++ app/views/components/_filter_section.html.erb | 14 +++++++- spec/components/filter_section_spec.rb | 18 ++++++++++ .../components/filter-section-spec.js | 36 +++++++++++++++++++ 4 files changed, 92 insertions(+), 1 deletion(-) create mode 100644 app/assets/javascripts/components/filter-section.js create mode 100644 spec/javascripts/components/filter-section-spec.js diff --git a/app/assets/javascripts/components/filter-section.js b/app/assets/javascripts/components/filter-section.js new file mode 100644 index 000000000..962671b9e --- /dev/null +++ b/app/assets/javascripts/components/filter-section.js @@ -0,0 +1,25 @@ +window.GOVUK = window.GOVUK || {} +window.GOVUK.Modules = window.GOVUK.Modules || {}; + +(function (Modules) { + 'use strict' + + class FilterSection { + constructor ($module) { + this.$module = $module + this.$summary = this.$module.querySelector('.app-c-filter-section__summary') + } + + init () { + this.$summary.addEventListener('click', this.setTrackingData.bind(this)) + } + + setTrackingData () { + const eventTrackingData = JSON.parse(this.$summary.getAttribute('data-ga4-event')) + eventTrackingData.action = this.$module.hasAttribute('open') === false ? 'opened' : 'closed' + this.$summary.setAttribute('data-ga4-event', JSON.stringify(eventTrackingData)) + } + } + + Modules.FilterSection = FilterSection +})(window.GOVUK.Modules) diff --git a/app/views/components/_filter_section.html.erb b/app/views/components/_filter_section.html.erb index f90d39ec5..449e272bf 100644 --- a/app/views/components/_filter_section.html.erb +++ b/app/views/components/_filter_section.html.erb @@ -7,14 +7,26 @@ visually_hidden_heading_prefix ||= "" heading_level ||= 2 summary_aria_attributes ||= {} + index_section ||= 0 + index_section_count ||= 1 component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns) + component_helper.add_data_attribute({ module: "filter-section" }) component_helper.add_class("app-c-filter-section") component_helper.set_open(open) %> <%= tag.details(**component_helper.all_attributes) do %> - <%= tag.summary class: "app-c-filter-section__summary", aria: summary_aria_attributes do %> + <%= tag.summary class: "app-c-filter-section__summary", aria: summary_aria_attributes, + "data-ga4-expandable": true, + "data-ga4-event" => { + event_name: "select_content", + type: "finder", + section: heading_text, + text: heading_text, + index: index_section + 1, + index_total: index_section_count + }.to_json do %> <%= content_tag("h#{heading_level}", class: "app-c-filter-section__summary-heading") do %> <% if visually_hidden_heading_prefix.present? %> <%= visually_hidden_heading_prefix %> diff --git a/spec/components/filter_section_spec.rb b/spec/components/filter_section_spec.rb index 002428976..2d293a000 100644 --- a/spec/components/filter_section_spec.rb +++ b/spec/components/filter_section_spec.rb @@ -56,4 +56,22 @@ def render_component(locals) assert_select ".app-c-filter-section__summary-status", false end + + it "renders ga4 tracking attributes to open/close button element" do + button_event_attributes = { + "ga4-expandable": "true", + "ga4-event": { + "event-name": "select_content", + "type": "finder", + }, + } + + heading_text = "Filter" + + render_component(heading_text:, data: button_event_attributes.to_json) + + assert_select ".app-c-filter-section summary[data-ga4-expandable]", true + assert_select ".app-c-filter-section summary[data-ga4-event]", data: button_event_attributes.to_json + assert_select ".app-c-filter-section summary[data-ga4-event]", data: { section: heading_text, text: heading_text } + end end diff --git a/spec/javascripts/components/filter-section-spec.js b/spec/javascripts/components/filter-section-spec.js new file mode 100644 index 000000000..e9cc85703 --- /dev/null +++ b/spec/javascripts/components/filter-section-spec.js @@ -0,0 +1,36 @@ +describe('Filter section module', () => { + 'use strict' + + let filterSection, fixture + + const loadFilterSectionComponent = (markup) => { + fixture = document.createElement('div') + document.body.appendChild(fixture) + fixture.innerHTML = markup + filterSection = new GOVUK.Modules.FilterSection(fixture.querySelector('.app-c-filter-section')) + } + + const html = `
+ + filter section + +
content
+
` + + beforeEach(() => { + loadFilterSectionComponent(html) + filterSection.init() + }) + + afterEach(() => { + fixture.remove() + }) + + it('sets correct ga4 tracking data when panel is opened and closed', () => { + filterSection.$summary.click() + expect(JSON.parse(filterSection.$summary.getAttribute('data-ga4-event')).action).toBe('opened') + + filterSection.$summary.click() + expect(JSON.parse(filterSection.$summary.getAttribute('data-ga4-event')).action).toBe('closed') + }) +}) From a500e8e520a3aedc981d47fb51f693a67b732843 Mon Sep 17 00:00:00 2001 From: alexbowen Date: Wed, 2 Oct 2024 11:26:56 +0100 Subject: [PATCH 03/11] add tracking attributes and initialisation for form control select/remove --- app/assets/javascripts/application.js | 17 ++++++++++++ app/views/components/_filter_panel.html.erb | 4 +-- app/views/components/_filter_section.html.erb | 9 ++++--- .../_date_facet.html.erb | 4 ++- .../_option_select_facet.html.erb | 2 ++ .../_sort_facet.html.erb | 2 ++ .../_taxon_facet.html.erb | 26 +++++++++---------- .../finders/show_all_content_finder.html.erb | 2 +- spec/components/filter_panel_spec.rb | 1 - spec/components/filter_section_spec.rb | 1 - .../components/filter-section-spec.js | 4 +-- 11 files changed, 46 insertions(+), 26 deletions(-) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 06f6bb5bb..b9092959f 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -57,3 +57,20 @@ if ($allContentFinderTaxonomySelect) { taxonomySelect.update() }) } + +const allContentFinderForm = document.getElementById('all-content-finder-form') + +if (allContentFinderForm) { + allContentFinderForm.addEventListener('change', (event) => { + let ga4ChangeCategory = event.target.closest('[data-ga4-change-category]') + if (ga4ChangeCategory) { + ga4ChangeCategory = ga4ChangeCategory.getAttribute('data-ga4-change-category') + + const consentCookie = GOVUK.getConsentCookie() + + if (consentCookie && consentCookie.usage) { + GOVUK.analyticsGa4.Ga4FinderTracker.trackChangeEvent(event.target, ga4ChangeCategory) + } + } + }) +} diff --git a/app/views/components/_filter_panel.html.erb b/app/views/components/_filter_panel.html.erb index 021c71206..ece810ea5 100644 --- a/app/views/components/_filter_panel.html.erb +++ b/app/views/components/_filter_panel.html.erb @@ -24,14 +24,12 @@ id: button_id, class: "app-c-filter-panel__button govuk-link", aria: { expanded: "false", controls: panel_content_id }, - "data-ga4-expandable": true, "data-ga4-event" => { event_name: "select_content", type: "finder", section: button_text, text: button_text, - index: 0, - index_total: 4 + index: { index_section: 0, index_section_count: 4 }, }.to_json ) { button_text } %> diff --git a/app/views/components/_filter_section.html.erb b/app/views/components/_filter_section.html.erb index 449e272bf..ea150dbf9 100644 --- a/app/views/components/_filter_section.html.erb +++ b/app/views/components/_filter_section.html.erb @@ -8,24 +8,25 @@ heading_level ||= 2 summary_aria_attributes ||= {} index_section ||= 0 - index_section_count ||= 1 + index_section_count ||= 0 + change_category ||= nil component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns) component_helper.add_data_attribute({ module: "filter-section" }) + component_helper.add_data_attribute({ "ga4-section": heading_text, "ga4-filter-parent": heading_text }) + component_helper.add_data_attribute("ga4-change-category": change_category) component_helper.add_class("app-c-filter-section") component_helper.set_open(open) %> <%= tag.details(**component_helper.all_attributes) do %> <%= tag.summary class: "app-c-filter-section__summary", aria: summary_aria_attributes, - "data-ga4-expandable": true, "data-ga4-event" => { event_name: "select_content", type: "finder", section: heading_text, text: heading_text, - index: index_section + 1, - index_total: index_section_count + index: { index_section: index_section + 1, index_section_count: index_section_count }, }.to_json do %> <%= content_tag("h#{heading_level}", class: "app-c-filter-section__summary-heading") do %> <% if visually_hidden_heading_prefix.present? %> diff --git a/app/views/finders/all_content_finder_facets/_date_facet.html.erb b/app/views/finders/all_content_finder_facets/_date_facet.html.erb index 92ffa9ecd..e4f58af49 100644 --- a/app/views/finders/all_content_finder_facets/_date_facet.html.erb +++ b/app/views/finders/all_content_finder_facets/_date_facet.html.erb @@ -6,7 +6,9 @@ index_section: index, index_section_count: count, # Note date is the only validated facet, so if there is an error, it'll be here - open: @search_query.invalid? + open: @search_query.invalid?, + data_attributes: { "ga4-index": { index_section: index + 1, index_section_count: count } }, + change_category: "update-filter text", } do %> <%= render "govuk_publishing_components/components/input", { label: { diff --git a/app/views/finders/all_content_finder_facets/_option_select_facet.html.erb b/app/views/finders/all_content_finder_facets/_option_select_facet.html.erb index f65a7ab22..13c48d125 100644 --- a/app/views/finders/all_content_finder_facets/_option_select_facet.html.erb +++ b/app/views/finders/all_content_finder_facets/_option_select_facet.html.erb @@ -7,6 +7,8 @@ id: "facet_option_select_#{option_select_facet.key}", index_section: index, index_section_count: count, + data_attributes: { "ga4-index": { index_section: index + 1, index_section_count: count } }, + change_category: "update-filter checkbox", } do %> <%= render "govuk_publishing_components/components/checkboxes", { name: "#{option_select_facet.key}[]", diff --git a/app/views/finders/all_content_finder_facets/_sort_facet.html.erb b/app/views/finders/all_content_finder_facets/_sort_facet.html.erb index 252895b74..81a86f1a9 100644 --- a/app/views/finders/all_content_finder_facets/_sort_facet.html.erb +++ b/app/views/finders/all_content_finder_facets/_sort_facet.html.erb @@ -4,6 +4,8 @@ id: "facet_sort", index_section: index, index_section_count: count, + data_attributes: { "ga4-index": { index_section: index + 1, index_section_count: count } }, + change_category: "update-filter radio", } do %> <%= render "govuk_publishing_components/components/radio", { heading: "Sort order", diff --git a/app/views/finders/all_content_finder_facets/_taxon_facet.html.erb b/app/views/finders/all_content_finder_facets/_taxon_facet.html.erb index 39443bd5f..9da55038e 100644 --- a/app/views/finders/all_content_finder_facets/_taxon_facet.html.erb +++ b/app/views/finders/all_content_finder_facets/_taxon_facet.html.erb @@ -5,22 +5,22 @@ id: "facet_taxon_#{taxon_facet.key}", index_section: index, index_section_count: count, + data_attributes: { "ga4-index": { index_section: index + 1, index_section_count: count } }, + change_category: "update-filter select", } do %> -
+ <%= render "govuk_publishing_components/components/select", { + id: 'level_one_taxon', + label: "Topic", + full_width: true, + options: taxon_facet.topics + } %> + +
<%= render "govuk_publishing_components/components/select", { - id: 'level_one_taxon', - label: "Topic", + id: 'level_two_taxon', + label: "Sub-topic", full_width: true, - options: taxon_facet.topics + options: taxon_facet.sub_topics } %> - -
- <%= render "govuk_publishing_components/components/select", { - id: 'level_two_taxon', - label: "Sub-topic", - full_width: true, - options: taxon_facet.sub_topics - } %> -
<% end %> diff --git a/app/views/finders/show_all_content_finder.html.erb b/app/views/finders/show_all_content_finder.html.erb index 71122f569..af3751322 100644 --- a/app/views/finders/show_all_content_finder.html.erb +++ b/app/views/finders/show_all_content_finder.html.erb @@ -13,7 +13,7 @@ <% end %> <% content_for :meta_title, content_item.title %> -
+ <%= hidden_field_tag :parent, @parent if @parent.present? %> <%= hidden_field_tag :enable_new_all_content_finder_ui, params[:enable_new_all_content_finder_ui] if params[:enable_new_all_content_finder_ui].present? %> diff --git a/spec/components/filter_panel_spec.rb b/spec/components/filter_panel_spec.rb index e5cfe387b..38ba39b75 100644 --- a/spec/components/filter_panel_spec.rb +++ b/spec/components/filter_panel_spec.rb @@ -90,7 +90,6 @@ def render_component(locals, &block) render_component(button_text:, data: button_event_attributes.to_json) - assert_select ".app-c-filter-panel button[data-ga4-expandable]", true assert_select ".app-c-filter-panel button[data-ga4-event]", data: button_event_attributes.to_json assert_select ".app-c-filter-panel button[data-ga4-event]", data: { section: button_text, text: button_text } end diff --git a/spec/components/filter_section_spec.rb b/spec/components/filter_section_spec.rb index 2d293a000..a6224f543 100644 --- a/spec/components/filter_section_spec.rb +++ b/spec/components/filter_section_spec.rb @@ -70,7 +70,6 @@ def render_component(locals) render_component(heading_text:, data: button_event_attributes.to_json) - assert_select ".app-c-filter-section summary[data-ga4-expandable]", true assert_select ".app-c-filter-section summary[data-ga4-event]", data: button_event_attributes.to_json assert_select ".app-c-filter-section summary[data-ga4-event]", data: { section: heading_text, text: heading_text } end diff --git a/spec/javascripts/components/filter-section-spec.js b/spec/javascripts/components/filter-section-spec.js index e9cc85703..77cabb37e 100644 --- a/spec/javascripts/components/filter-section-spec.js +++ b/spec/javascripts/components/filter-section-spec.js @@ -11,10 +11,10 @@ describe('Filter section module', () => { } const html = `
- + filter section -
content
+
content
` beforeEach(() => { From 29187a91f2ddcec523a3ac5180d655a2dbdc6b74 Mon Sep 17 00:00:00 2001 From: alexbowen Date: Wed, 2 Oct 2024 12:48:06 +0100 Subject: [PATCH 04/11] remove custom tracking from panel/sections and use expandable attribute --- .../javascripts/components/filter-panel.js | 7 ---- .../javascripts/components/filter-section.js | 25 ------------- app/views/components/_filter_panel.html.erb | 1 + app/views/components/_filter_section.html.erb | 1 + spec/components/filter_panel_spec.rb | 1 + spec/components/filter_section_spec.rb | 3 +- .../components/filter-panel-spec.js | 10 +----- .../components/filter-section-spec.js | 36 ------------------- 8 files changed, 6 insertions(+), 78 deletions(-) delete mode 100644 app/assets/javascripts/components/filter-section.js delete mode 100644 spec/javascripts/components/filter-section-spec.js diff --git a/app/assets/javascripts/components/filter-panel.js b/app/assets/javascripts/components/filter-panel.js index f0245e9c4..6e3faf68a 100644 --- a/app/assets/javascripts/components/filter-panel.js +++ b/app/assets/javascripts/components/filter-panel.js @@ -31,13 +31,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; const newState = this.$button.getAttribute('aria-expanded') !== 'true' this.$button.setAttribute('aria-expanded', newState) this.$content.toggleAttribute('hidden') - this.setTrackingData(newState) - } - - setTrackingData (open) { - const eventTrackingData = JSON.parse(this.$button.getAttribute('data-ga4-event')) - eventTrackingData.action = open === true ? 'opened' : 'closed' - this.$button.setAttribute('data-ga4-event', JSON.stringify(eventTrackingData)) } } diff --git a/app/assets/javascripts/components/filter-section.js b/app/assets/javascripts/components/filter-section.js deleted file mode 100644 index 962671b9e..000000000 --- a/app/assets/javascripts/components/filter-section.js +++ /dev/null @@ -1,25 +0,0 @@ -window.GOVUK = window.GOVUK || {} -window.GOVUK.Modules = window.GOVUK.Modules || {}; - -(function (Modules) { - 'use strict' - - class FilterSection { - constructor ($module) { - this.$module = $module - this.$summary = this.$module.querySelector('.app-c-filter-section__summary') - } - - init () { - this.$summary.addEventListener('click', this.setTrackingData.bind(this)) - } - - setTrackingData () { - const eventTrackingData = JSON.parse(this.$summary.getAttribute('data-ga4-event')) - eventTrackingData.action = this.$module.hasAttribute('open') === false ? 'opened' : 'closed' - this.$summary.setAttribute('data-ga4-event', JSON.stringify(eventTrackingData)) - } - } - - Modules.FilterSection = FilterSection -})(window.GOVUK.Modules) diff --git a/app/views/components/_filter_panel.html.erb b/app/views/components/_filter_panel.html.erb index ece810ea5..416e95c18 100644 --- a/app/views/components/_filter_panel.html.erb +++ b/app/views/components/_filter_panel.html.erb @@ -24,6 +24,7 @@ id: button_id, class: "app-c-filter-panel__button govuk-link", aria: { expanded: "false", controls: panel_content_id }, + "data-ga4-expandable": "", "data-ga4-event" => { event_name: "select_content", type: "finder", diff --git a/app/views/components/_filter_section.html.erb b/app/views/components/_filter_section.html.erb index ea150dbf9..fa61b6a23 100644 --- a/app/views/components/_filter_section.html.erb +++ b/app/views/components/_filter_section.html.erb @@ -21,6 +21,7 @@ <%= tag.details(**component_helper.all_attributes) do %> <%= tag.summary class: "app-c-filter-section__summary", aria: summary_aria_attributes, + "data-ga4-expandable": "", "data-ga4-event" => { event_name: "select_content", type: "finder", diff --git a/spec/components/filter_panel_spec.rb b/spec/components/filter_panel_spec.rb index 38ba39b75..e5cfe387b 100644 --- a/spec/components/filter_panel_spec.rb +++ b/spec/components/filter_panel_spec.rb @@ -90,6 +90,7 @@ def render_component(locals, &block) render_component(button_text:, data: button_event_attributes.to_json) + assert_select ".app-c-filter-panel button[data-ga4-expandable]", true assert_select ".app-c-filter-panel button[data-ga4-event]", data: button_event_attributes.to_json assert_select ".app-c-filter-panel button[data-ga4-event]", data: { section: button_text, text: button_text } end diff --git a/spec/components/filter_section_spec.rb b/spec/components/filter_section_spec.rb index a6224f543..bb5c5ad6b 100644 --- a/spec/components/filter_section_spec.rb +++ b/spec/components/filter_section_spec.rb @@ -57,7 +57,7 @@ def render_component(locals) assert_select ".app-c-filter-section__summary-status", false end - it "renders ga4 tracking attributes to open/close button element" do + it "renders ga4 tracking attributes to open/close summary element" do button_event_attributes = { "ga4-expandable": "true", "ga4-event": { @@ -70,6 +70,7 @@ def render_component(locals) render_component(heading_text:, data: button_event_attributes.to_json) + assert_select ".app-c-filter-section summary[data-ga4-expandable]", true assert_select ".app-c-filter-section summary[data-ga4-event]", data: button_event_attributes.to_json assert_select ".app-c-filter-section summary[data-ga4-event]", data: { section: heading_text, text: heading_text } end diff --git a/spec/javascripts/components/filter-panel-spec.js b/spec/javascripts/components/filter-panel-spec.js index 97ec77c09..7e6be8cde 100644 --- a/spec/javascripts/components/filter-panel-spec.js +++ b/spec/javascripts/components/filter-panel-spec.js @@ -12,7 +12,7 @@ describe('Filter panel module', () => { const html = `
- @@ -68,14 +68,6 @@ describe('Filter panel module', () => { expect(document.activeElement).not.toBe(filterPanel.$button) }) - it('sets correct ga4 tracking data when panel is opened and closed', () => { - filterPanel.$button.click() - expect(JSON.parse(filterPanel.$button.getAttribute('data-ga4-event')).action).toBe('opened') - - filterPanel.$button.click() - expect(JSON.parse(filterPanel.$button.getAttribute('data-ga4-event')).action).toBe('closed') - }) - it('prevents any default behaviour of the panel open/close button', () => { filterPanel.$button.addEventListener('click', (event) => { expect(event.defaultPrevented).toBe(true) diff --git a/spec/javascripts/components/filter-section-spec.js b/spec/javascripts/components/filter-section-spec.js deleted file mode 100644 index 77cabb37e..000000000 --- a/spec/javascripts/components/filter-section-spec.js +++ /dev/null @@ -1,36 +0,0 @@ -describe('Filter section module', () => { - 'use strict' - - let filterSection, fixture - - const loadFilterSectionComponent = (markup) => { - fixture = document.createElement('div') - document.body.appendChild(fixture) - fixture.innerHTML = markup - filterSection = new GOVUK.Modules.FilterSection(fixture.querySelector('.app-c-filter-section')) - } - - const html = `
- - filter section - -
content
-
` - - beforeEach(() => { - loadFilterSectionComponent(html) - filterSection.init() - }) - - afterEach(() => { - fixture.remove() - }) - - it('sets correct ga4 tracking data when panel is opened and closed', () => { - filterSection.$summary.click() - expect(JSON.parse(filterSection.$summary.getAttribute('data-ga4-event')).action).toBe('opened') - - filterSection.$summary.click() - expect(JSON.parse(filterSection.$summary.getAttribute('data-ga4-event')).action).toBe('closed') - }) -}) From d21d6bd8ec93e0d3855a72df79bd47a349724324 Mon Sep 17 00:00:00 2001 From: alexbowen Date: Wed, 2 Oct 2024 14:23:07 +0100 Subject: [PATCH 05/11] add ga4 tracking to filter summary remove buttons --- app/views/components/_filter_summary.html.erb | 10 +++++++++- spec/components/filter_summary_spec.rb | 13 +++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/app/views/components/_filter_summary.html.erb b/app/views/components/_filter_summary.html.erb index 6381bfeaf..57624bbf5 100644 --- a/app/views/components/_filter_summary.html.erb +++ b/app/views/components/_filter_summary.html.erb @@ -11,6 +11,7 @@ component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns) component_helper.add_class(shared_helper.get_margin_bottom) if local_assigns[:margin_bottom] + component_helper.add_data_attribute({ module: "ga4-event-tracker" }) component_helper.add_class("app-c-filter-summary") %> @@ -25,7 +26,14 @@
    <% filters.each do |filter| %>
  • - <%= link_to filter[:remove_href], class: "app-c-filter-summary__remove-filter" do %> + <%= link_to filter[:remove_href], + class: "app-c-filter-summary__remove-filter", + "data-ga4-event" => { + event_name: "select_content", + type: "finder", + section: filter[:label], + action: "remove" + }.to_json do %> <%= filter[:visually_hidden_prefix] %> <%= filter[:label] %>: <%= filter[:value] %> diff --git a/spec/components/filter_summary_spec.rb b/spec/components/filter_summary_spec.rb index a428813cb..f996ed2f9 100644 --- a/spec/components/filter_summary_spec.rb +++ b/spec/components/filter_summary_spec.rb @@ -75,4 +75,17 @@ def render_component(locals) assert_select "h4.app-c-filter-summary__heading", count: 1 end + + it "renders ga4 tracking attributes to remove link" do + link_event_attributes = { + event_name: "select_content", + type: "finder", + section: "Filter 1", + action: "remove", + } + + render_component(filters:, data: link_event_attributes.to_json) + + assert_select ".app-c-filter-summary__remove-filter[data-ga4-event='#{link_event_attributes.to_json}']" + end end From 4726c4566a96b73b7ea39ee882cdf393f60bd771 Mon Sep 17 00:00:00 2001 From: alexbowen Date: Wed, 2 Oct 2024 15:23:35 +0100 Subject: [PATCH 06/11] reafctors panel/section specs that were giving false positives --- spec/components/filter_panel_spec.rb | 18 ++++++++++-------- spec/components/filter_section_spec.rb | 18 ++++++++++-------- 2 files changed, 20 insertions(+), 16 deletions(-) diff --git a/spec/components/filter_panel_spec.rb b/spec/components/filter_panel_spec.rb index e5cfe387b..91e02f980 100644 --- a/spec/components/filter_panel_spec.rb +++ b/spec/components/filter_panel_spec.rb @@ -78,20 +78,22 @@ def render_component(locals, &block) end it "renders ga4 tracking attributes to open/close button element" do + button_text = "Filter" + button_event_attributes = { - "ga4-expandable": "true", - "ga4-event": { - "event-name": "select_content", - "type": "finder", + event_name: "select_content", + type: "finder", + section: button_text, + text: button_text, + index: { + index_section: 0, + index_section_count: 4, }, } - button_text = "Filter" - render_component(button_text:, data: button_event_attributes.to_json) assert_select ".app-c-filter-panel button[data-ga4-expandable]", true - assert_select ".app-c-filter-panel button[data-ga4-event]", data: button_event_attributes.to_json - assert_select ".app-c-filter-panel button[data-ga4-event]", data: { section: button_text, text: button_text } + assert_select ".app-c-filter-panel button[data-ga4-event='#{button_event_attributes.to_json}']", true end end diff --git a/spec/components/filter_section_spec.rb b/spec/components/filter_section_spec.rb index bb5c5ad6b..a80dd6d75 100644 --- a/spec/components/filter_section_spec.rb +++ b/spec/components/filter_section_spec.rb @@ -58,20 +58,22 @@ def render_component(locals) end it "renders ga4 tracking attributes to open/close summary element" do + heading_text = "Filter" + button_event_attributes = { - "ga4-expandable": "true", - "ga4-event": { - "event-name": "select_content", - "type": "finder", + event_name: "select_content", + type: "finder", + section: heading_text, + text: heading_text, + index: { + index_section: 1, + index_section_count: 0, }, } - heading_text = "Filter" - render_component(heading_text:, data: button_event_attributes.to_json) assert_select ".app-c-filter-section summary[data-ga4-expandable]", true - assert_select ".app-c-filter-section summary[data-ga4-event]", data: button_event_attributes.to_json - assert_select ".app-c-filter-section summary[data-ga4-event]", data: { section: heading_text, text: heading_text } + assert_select ".app-c-filter-section summary[data-ga4-event='#{button_event_attributes.to_json}']", true end end From 400360d03a61887ba3524797521609bc531c6a68 Mon Sep 17 00:00:00 2001 From: alexbowen Date: Wed, 2 Oct 2024 15:46:10 +0100 Subject: [PATCH 07/11] add ga4 tracking to clear all filters link --- app/views/components/_filter_summary.html.erb | 10 +++++++++- spec/components/filter_summary_spec.rb | 18 +++++++++++++++++- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/app/views/components/_filter_summary.html.erb b/app/views/components/_filter_summary.html.erb index 57624bbf5..1185e5115 100644 --- a/app/views/components/_filter_summary.html.erb +++ b/app/views/components/_filter_summary.html.erb @@ -45,7 +45,15 @@ <% if clear_all_text.present? && clear_all_href.present? %>
    - <%= link_to clear_all_text, clear_all_href, class: "app-c-filter-summary__clear-filters govuk-link govuk-link--no-visited-state" %> + <%= link_to clear_all_text, clear_all_href, + class: "app-c-filter-summary__clear-filters govuk-link govuk-link--no-visited-state", + "data-ga4-event" => { + event_name: "select_content", + type: "finder", + text: clear_all_text, + section: "Selected filters and sorting", + action: "remove" + }.to_json %>
    <% end %> <% end %> diff --git a/spec/components/filter_summary_spec.rb b/spec/components/filter_summary_spec.rb index f996ed2f9..4908d5583 100644 --- a/spec/components/filter_summary_spec.rb +++ b/spec/components/filter_summary_spec.rb @@ -76,7 +76,7 @@ def render_component(locals) assert_select "h4.app-c-filter-summary__heading", count: 1 end - it "renders ga4 tracking attributes to remove link" do + it "renders ga4 tracking attributes to remove links" do link_event_attributes = { event_name: "select_content", type: "finder", @@ -88,4 +88,20 @@ def render_component(locals) assert_select ".app-c-filter-summary__remove-filter[data-ga4-event='#{link_event_attributes.to_json}']" end + + it "renders ga4 tracking attributes to clear all link" do + clear_all_text = "Clear all the things" + clear_all_href = "#" + link_event_attributes = { + event_name: "select_content", + type: "finder", + text: clear_all_text, + section: "Selected filters and sorting", + action: "remove", + } + + render_component(clear_all_text:, clear_all_href:, filters:, data: link_event_attributes.to_json) + + assert_select ".app-c-filter-summary__clear-filters[data-ga4-event='#{link_event_attributes.to_json}']" + end end From 4400c4867dad57c3acd73f821e4e279be578c4d6 Mon Sep 17 00:00:00 2001 From: alexbowen Date: Wed, 2 Oct 2024 21:03:35 +0100 Subject: [PATCH 08/11] add tracking to filter form submit button --- app/views/components/_filter_panel.html.erb | 11 ++++++++++- spec/components/filter_panel_spec.rb | 17 +++++++++++++++++ 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/app/views/components/_filter_panel.html.erb b/app/views/components/_filter_panel.html.erb index 416e95c18..23f4f3ac3 100644 --- a/app/views/components/_filter_panel.html.erb +++ b/app/views/components/_filter_panel.html.erb @@ -50,7 +50,16 @@ <%= yield %>
    - <%= submit_tag "Apply filters", class: "govuk-button app-c-filter-panel__action app-c-filter-panel__action--submit" %> + <%= submit_tag "Apply filters", + class: "govuk-button app-c-filter-panel__action app-c-filter-panel__action--submit", + "data-ga4-event" => { + event_name: "select_content", + type: "finder", + text: button_text, + section: "Filter and sort", + action: "search", + index: { index_section: 0, index_section_count: 4 }, + }.to_json %> <% if show_reset_link %> <%= diff --git a/spec/components/filter_panel_spec.rb b/spec/components/filter_panel_spec.rb index 91e02f980..7ed48579c 100644 --- a/spec/components/filter_panel_spec.rb +++ b/spec/components/filter_panel_spec.rb @@ -96,4 +96,21 @@ def render_component(locals, &block) assert_select ".app-c-filter-panel button[data-ga4-expandable]", true assert_select ".app-c-filter-panel button[data-ga4-event='#{button_event_attributes.to_json}']", true end + + it "renders ga4 tracking attributes to submit button element" do + button_text = "Apply filters" + + button_event_attributes = { + event_name: "select_content", + type: "finder", + text: button_text, + section: "Filter and sort", + action: "search", + index: { index_section: 0, index_section_count: 4 }, + } + + render_component(button_text:, data: button_event_attributes.to_json) + + assert_select ".app-c-filter-panel__action--submit[data-ga4-event='#{button_event_attributes.to_json}']", true + end end From cced2fc680321d384a7142bcbc57138550e453c9 Mon Sep 17 00:00:00 2001 From: alexbowen Date: Thu, 3 Oct 2024 13:02:20 +0100 Subject: [PATCH 09/11] flatten event objects as ga4 scripts restructure to nested format --- app/views/components/_filter_panel.html.erb | 18 ++++++++++++++---- app/views/components/_filter_section.html.erb | 3 ++- spec/components/filter_panel_spec.rb | 9 ++++----- spec/components/filter_section_spec.rb | 6 ++---- 4 files changed, 22 insertions(+), 14 deletions(-) diff --git a/app/views/components/_filter_panel.html.erb b/app/views/components/_filter_panel.html.erb index 23f4f3ac3..09ec164c6 100644 --- a/app/views/components/_filter_panel.html.erb +++ b/app/views/components/_filter_panel.html.erb @@ -25,12 +25,13 @@ class: "app-c-filter-panel__button govuk-link", aria: { expanded: "false", controls: panel_content_id }, "data-ga4-expandable": "", - "data-ga4-event" => { + "data-ga4-event": { event_name: "select_content", type: "finder", section: button_text, text: button_text, - index: { index_section: 0, index_section_count: 4 }, + index_section: 0, + index_section_count: 4 }.to_json ) { button_text } %> @@ -49,6 +50,7 @@ ) do %> <%= yield %> +
    <%= submit_tag "Apply filters", class: "govuk-button app-c-filter-panel__action app-c-filter-panel__action--submit", @@ -58,14 +60,22 @@ text: button_text, section: "Filter and sort", action: "search", - index: { index_section: 0, index_section_count: 4 }, + index_section: 0, + index_section_count: 4, }.to_json %> <% if show_reset_link %> <%= link_to "Clear all filters", reset_link_href, - class: "govuk-link govuk-link--no-visited-state app-c-filter-panel__action app-c-filter-panel__action--reset" + class: "govuk-link govuk-link--no-visited-state app-c-filter-panel__action app-c-filter-panel__action--reset", + "data-ga4-event" => { + event_name: "select_content", + type: "finder", + text: "Clear all", + section: "Filter and sort", + action: "remove", + }.to_json %> <% end %>
    diff --git a/app/views/components/_filter_section.html.erb b/app/views/components/_filter_section.html.erb index fa61b6a23..a12ebbf0b 100644 --- a/app/views/components/_filter_section.html.erb +++ b/app/views/components/_filter_section.html.erb @@ -27,7 +27,8 @@ type: "finder", section: heading_text, text: heading_text, - index: { index_section: index_section + 1, index_section_count: index_section_count }, + index_section: index_section + 1, + index_section_count: index_section_count, }.to_json do %> <%= content_tag("h#{heading_level}", class: "app-c-filter-section__summary-heading") do %> <% if visually_hidden_heading_prefix.present? %> diff --git a/spec/components/filter_panel_spec.rb b/spec/components/filter_panel_spec.rb index 7ed48579c..e21ca7bd9 100644 --- a/spec/components/filter_panel_spec.rb +++ b/spec/components/filter_panel_spec.rb @@ -85,10 +85,8 @@ def render_component(locals, &block) type: "finder", section: button_text, text: button_text, - index: { - index_section: 0, - index_section_count: 4, - }, + index_section: 0, + index_section_count: 4, } render_component(button_text:, data: button_event_attributes.to_json) @@ -106,7 +104,8 @@ def render_component(locals, &block) text: button_text, section: "Filter and sort", action: "search", - index: { index_section: 0, index_section_count: 4 }, + index_section: 0, + index_section_count: 4, } render_component(button_text:, data: button_event_attributes.to_json) diff --git a/spec/components/filter_section_spec.rb b/spec/components/filter_section_spec.rb index a80dd6d75..48f5a4d7f 100644 --- a/spec/components/filter_section_spec.rb +++ b/spec/components/filter_section_spec.rb @@ -65,10 +65,8 @@ def render_component(locals) type: "finder", section: heading_text, text: heading_text, - index: { - index_section: 1, - index_section_count: 0, - }, + index_section: 1, + index_section_count: 0, } render_component(heading_text:, data: button_event_attributes.to_json) From 030e35ef046dae3301da2d9a82cc65a14fa19c9f Mon Sep 17 00:00:00 2001 From: alexbowen Date: Fri, 4 Oct 2024 15:30:05 +0100 Subject: [PATCH 10/11] address PR comments --- app/views/components/_filter_panel.html.erb | 6 ++--- app/views/components/_filter_section.html.erb | 2 +- app/views/components/_filter_summary.html.erb | 2 +- .../_taxon_facet.html.erb | 25 ++++++++++--------- spec/components/filter_panel_spec.rb | 6 ++--- spec/components/filter_section_spec.rb | 4 +-- spec/components/filter_summary_spec.rb | 7 +++--- 7 files changed, 27 insertions(+), 25 deletions(-) diff --git a/app/views/components/_filter_panel.html.erb b/app/views/components/_filter_panel.html.erb index 09ec164c6..bfb6de90a 100644 --- a/app/views/components/_filter_panel.html.erb +++ b/app/views/components/_filter_panel.html.erb @@ -58,7 +58,7 @@ event_name: "select_content", type: "finder", text: button_text, - section: "Filter and sort", + section: button_text, action: "search", index_section: 0, index_section_count: 4, @@ -72,8 +72,8 @@ "data-ga4-event" => { event_name: "select_content", type: "finder", - text: "Clear all", - section: "Filter and sort", + text: button_text, + section: button_text, action: "remove", }.to_json %> diff --git a/app/views/components/_filter_section.html.erb b/app/views/components/_filter_section.html.erb index a12ebbf0b..334b3ac21 100644 --- a/app/views/components/_filter_section.html.erb +++ b/app/views/components/_filter_section.html.erb @@ -27,7 +27,7 @@ type: "finder", section: heading_text, text: heading_text, - index_section: index_section + 1, + index_section: index_section, index_section_count: index_section_count, }.to_json do %> <%= content_tag("h#{heading_level}", class: "app-c-filter-section__summary-heading") do %> diff --git a/app/views/components/_filter_summary.html.erb b/app/views/components/_filter_summary.html.erb index 1185e5115..6883c0ec5 100644 --- a/app/views/components/_filter_summary.html.erb +++ b/app/views/components/_filter_summary.html.erb @@ -51,7 +51,7 @@ event_name: "select_content", type: "finder", text: clear_all_text, - section: "Selected filters and sorting", + section: heading_text, action: "remove" }.to_json %>
    diff --git a/app/views/finders/all_content_finder_facets/_taxon_facet.html.erb b/app/views/finders/all_content_finder_facets/_taxon_facet.html.erb index 9da55038e..868f14436 100644 --- a/app/views/finders/all_content_finder_facets/_taxon_facet.html.erb +++ b/app/views/finders/all_content_finder_facets/_taxon_facet.html.erb @@ -7,20 +7,21 @@ index_section_count: count, data_attributes: { "ga4-index": { index_section: index + 1, index_section_count: count } }, change_category: "update-filter select", + classes: "js-all-content-finder-taxonomy-select" } do %> - <%= render "govuk_publishing_components/components/select", { - id: 'level_one_taxon', - label: "Topic", - full_width: true, - options: taxon_facet.topics - } %> - -
    <%= render "govuk_publishing_components/components/select", { - id: 'level_two_taxon', - label: "Sub-topic", + id: 'level_one_taxon', + label: "Topic", full_width: true, - options: taxon_facet.sub_topics + options: taxon_facet.topics } %> -
    + +
    + <%= render "govuk_publishing_components/components/select", { + id: 'level_two_taxon', + label: "Sub-topic", + full_width: true, + options: taxon_facet.sub_topics + } %> +
    <% end %> diff --git a/spec/components/filter_panel_spec.rb b/spec/components/filter_panel_spec.rb index e21ca7bd9..7b9a89d30 100644 --- a/spec/components/filter_panel_spec.rb +++ b/spec/components/filter_panel_spec.rb @@ -89,7 +89,7 @@ def render_component(locals, &block) index_section_count: 4, } - render_component(button_text:, data: button_event_attributes.to_json) + render_component(button_text:) assert_select ".app-c-filter-panel button[data-ga4-expandable]", true assert_select ".app-c-filter-panel button[data-ga4-event='#{button_event_attributes.to_json}']", true @@ -102,13 +102,13 @@ def render_component(locals, &block) event_name: "select_content", type: "finder", text: button_text, - section: "Filter and sort", + section: button_text, action: "search", index_section: 0, index_section_count: 4, } - render_component(button_text:, data: button_event_attributes.to_json) + render_component(button_text:) assert_select ".app-c-filter-panel__action--submit[data-ga4-event='#{button_event_attributes.to_json}']", true end diff --git a/spec/components/filter_section_spec.rb b/spec/components/filter_section_spec.rb index 48f5a4d7f..0b25389bf 100644 --- a/spec/components/filter_section_spec.rb +++ b/spec/components/filter_section_spec.rb @@ -65,11 +65,11 @@ def render_component(locals) type: "finder", section: heading_text, text: heading_text, - index_section: 1, + index_section: 0, index_section_count: 0, } - render_component(heading_text:, data: button_event_attributes.to_json) + render_component(heading_text:) assert_select ".app-c-filter-section summary[data-ga4-expandable]", true assert_select ".app-c-filter-section summary[data-ga4-event='#{button_event_attributes.to_json}']", true diff --git a/spec/components/filter_summary_spec.rb b/spec/components/filter_summary_spec.rb index 4908d5583..105547172 100644 --- a/spec/components/filter_summary_spec.rb +++ b/spec/components/filter_summary_spec.rb @@ -84,7 +84,7 @@ def render_component(locals) action: "remove", } - render_component(filters:, data: link_event_attributes.to_json) + render_component(filters:) assert_select ".app-c-filter-summary__remove-filter[data-ga4-event='#{link_event_attributes.to_json}']" end @@ -92,15 +92,16 @@ def render_component(locals) it "renders ga4 tracking attributes to clear all link" do clear_all_text = "Clear all the things" clear_all_href = "#" + heading_text = "Selected filters" link_event_attributes = { event_name: "select_content", type: "finder", text: clear_all_text, - section: "Selected filters and sorting", + section: heading_text, action: "remove", } - render_component(clear_all_text:, clear_all_href:, filters:, data: link_event_attributes.to_json) + render_component(heading_text: "Selected filters", clear_all_text:, clear_all_href:, filters:) assert_select ".app-c-filter-summary__clear-filters[data-ga4-event='#{link_event_attributes.to_json}']" end From 3fe39717af0d69b6affa388d4c262cb2eacef6d4 Mon Sep 17 00:00:00 2001 From: alexbowen Date: Fri, 4 Oct 2024 22:21:29 +0100 Subject: [PATCH 11/11] use dynamic value for the filter sections count --- app/views/components/_filter_panel.html.erb | 5 +++-- app/views/finders/show_all_content_finder.html.erb | 1 + spec/components/filter_panel_spec.rb | 8 +++++--- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/app/views/components/_filter_panel.html.erb b/app/views/components/_filter_panel.html.erb index bfb6de90a..4087ee9f6 100644 --- a/app/views/components/_filter_panel.html.erb +++ b/app/views/components/_filter_panel.html.erb @@ -7,6 +7,7 @@ panel_content_id = "filter-panel-#{id_suffix}" button_id = "filter-button-#{id_suffix}" result_text ||= "" + section_count ||= "" show_reset_link ||= false raise ArgumentError, "reset_link_href is required" if show_reset_link && !local_assigns[:reset_link_href] @@ -31,7 +32,7 @@ section: button_text, text: button_text, index_section: 0, - index_section_count: 4 + index_section_count: section_count }.to_json ) { button_text } %> @@ -61,7 +62,7 @@ section: button_text, action: "search", index_section: 0, - index_section_count: 4, + index_section_count: section_count, }.to_json %> <% if show_reset_link %> diff --git a/app/views/finders/show_all_content_finder.html.erb b/app/views/finders/show_all_content_finder.html.erb index af3751322..b92627359 100644 --- a/app/views/finders/show_all_content_finder.html.erb +++ b/app/views/finders/show_all_content_finder.html.erb @@ -52,6 +52,7 @@ open: @search_query.invalid?, show_reset_link: filters_presenter.any_filters?, reset_link_href: filters_presenter.reset_url, + section_count: facets.user_visible_count, } do %> <% facets.each_with_visible_index_and_count do |facet, index, count| %> <%= diff --git a/spec/components/filter_panel_spec.rb b/spec/components/filter_panel_spec.rb index 7b9a89d30..04e804760 100644 --- a/spec/components/filter_panel_spec.rb +++ b/spec/components/filter_panel_spec.rb @@ -79,6 +79,7 @@ def render_component(locals, &block) it "renders ga4 tracking attributes to open/close button element" do button_text = "Filter" + section_count = 4 button_event_attributes = { event_name: "select_content", @@ -86,10 +87,10 @@ def render_component(locals, &block) section: button_text, text: button_text, index_section: 0, - index_section_count: 4, + index_section_count: section_count, } - render_component(button_text:) + render_component(button_text:, section_count:) assert_select ".app-c-filter-panel button[data-ga4-expandable]", true assert_select ".app-c-filter-panel button[data-ga4-event='#{button_event_attributes.to_json}']", true @@ -97,6 +98,7 @@ def render_component(locals, &block) it "renders ga4 tracking attributes to submit button element" do button_text = "Apply filters" + section_count = 4 button_event_attributes = { event_name: "select_content", @@ -108,7 +110,7 @@ def render_component(locals, &block) index_section_count: 4, } - render_component(button_text:) + render_component(button_text:, section_count:) assert_select ".app-c-filter-panel__action--submit[data-ga4-event='#{button_event_attributes.to_json}']", true end