Merge pull request #3485 from alphagov/filters-ga4-tracking

ga4 tracking for filter/sorting UI interaction

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)
+      }
+    }
+  })
+}

app/views/components/_filter_panel.html.erb

@@ -7,13 +7,14 @@
   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]
 
   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 +24,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": "",
+      "data-ga4-event": {
+        event_name: "select_content",
+        type: "finder",
+        section: button_text,
+        text: button_text,
+        index_section: 0,
+        index_section_count: section_count
+      }.to_json
     ) { button_text } %>
 
     <% if result_text.present? %>
@@ -41,14 +51,32 @@
   ) do %>
     <%= yield %>
 
+
     <div class="app-c-filter-panel__actions">
-      <%= 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: button_text,
+          action: "search",
+          index_section: 0,
+          index_section_count: section_count,
+        }.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: button_text,
+              section: button_text,
+              action: "remove",
+            }.to_json
         %>
       <% end %>
     </div>

app/views/components/_filter_section.html.erb

@@ -7,14 +7,29 @@
   visually_hidden_heading_prefix ||= ""
   heading_level ||= 2
   summary_aria_attributes ||= {}
+  index_section ||= 0
+  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 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",
+        section: heading_text,
+        text: heading_text,
+        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 %>
         <% if visually_hidden_heading_prefix.present? %>
           <span class="govuk-visually-hidden"><%= visually_hidden_heading_prefix %></span>

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 @@
     <ul class="app-c-filter-summary__remove-filters">
       <% filters.each do |filter| %>
         <li>
-          <%= 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 %>
             <span class="app-c-filter-summary__remove-filter-text">
               <span class="govuk-visually-hidden"><%= filter[:visually_hidden_prefix] %></span>
               <%= filter[:label] %>: <%= filter[:value] %>
@@ -37,7 +45,15 @@
 
     <% if clear_all_text.present? && clear_all_href.present? %>
       <div>
-        <%= 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: heading_text,
+          action: "remove"
+        }.to_json %>
       </div>
     <% end %>
   <% end %>

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: {

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}[]",

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",

app/views/finders/all_content_finder_facets/_taxon_facet.html.erb

@@ -5,8 +5,10 @@
   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",
+  classes: "js-all-content-finder-taxonomy-select"
 } do %>
-  <div class="js-all-content-finder-taxonomy-select" data-ga4-change-category="update-filter select" data-ga4-section="Topic">
     <%= render "govuk_publishing_components/components/select", {
       id: 'level_one_taxon',
       label: "Topic",
@@ -22,5 +24,4 @@
         options: taxon_facet.sub_topics
       } %>
     </div>
-  </div>
 <% end %>

app/views/finders/show_all_content_finder.html.erb

@@ -13,7 +13,7 @@
 <% end %>
 <% content_for :meta_title, content_item.title %>
 
-<form method="get" action="<%= content_item.base_path %>" data-ga4-change-category="clear-all-filters">
+<form method="get" action="<%= content_item.base_path %>" data-ga4-change-category="clear-all-filters" id="all-content-finder-form">
   <%= 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? %>
 
@@ -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| %>
             <%=

spec/components/filter_panel_spec.rb

@@ -76,4 +76,42 @@ 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_text = "Filter"
+    section_count = 4
+
+    button_event_attributes = {
+      event_name: "select_content",
+      type: "finder",
+      section: button_text,
+      text: button_text,
+      index_section: 0,
+      index_section_count: section_count,
+    }
+
+    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
+  end
+
+  it "renders ga4 tracking attributes to submit button element" do
+    button_text = "Apply filters"
+    section_count = 4
+
+    button_event_attributes = {
+      event_name: "select_content",
+      type: "finder",
+      text: button_text,
+      section: button_text,
+      action: "search",
+      index_section: 0,
+      index_section_count: 4,
+    }
+
+    render_component(button_text:, section_count:)
+
+    assert_select ".app-c-filter-panel__action--submit[data-ga4-event='#{button_event_attributes.to_json}']", true
+  end
 end

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 summary element" do
+    heading_text = "Filter"
+
+    button_event_attributes = {
+      event_name: "select_content",
+      type: "finder",
+      section: heading_text,
+      text: heading_text,
+      index_section: 0,
+      index_section_count: 0,
+    }
+
+    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
+  end
 end

spec/components/filter_summary_spec.rb

@@ -75,4 +75,34 @@ def render_component(locals)
 
     assert_select "h4.app-c-filter-summary__heading", count: 1
   end
+
+  it "renders ga4 tracking attributes to remove links" do
+    link_event_attributes = {
+      event_name: "select_content",
+      type: "finder",
+      section: "Filter 1",
+      action: "remove",
+    }
+
+    render_component(filters:)
+
+    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 = "#"
+    heading_text = "Selected filters"
+    link_event_attributes = {
+      event_name: "select_content",
+      type: "finder",
+      text: clear_all_text,
+      section: heading_text,
+      action: "remove",
+    }
+
+    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
 end