add filter section open/close ga4 tracking

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)

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? %>
           <span class="govuk-visually-hidden"><%= visually_hidden_heading_prefix %></span>

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

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 = `<details data-module="filter-section" class="app-c-filter-section">
+      <summary class="app-c-filter-section__summary" aria-controls="filter-section" data-ga4-event="{}">
+        filter section
+      </summary>
+      <div id="filter-section">content</div>
+    </details>`
+
+  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')
+  })
+})