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

@@ -9,12 +9,22 @@
   summary_aria_attributes ||= {}
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_data_attribute({ module: "filter-section ga4-event-tracker" })
   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/javascripts/components/filter-section-spec.js

@@ -0,0 +1,39 @@
+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 = `<div data-module="filter-section" class="app-c-filter-section">
+    <details class="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>
+  </div>`
+
+  beforeEach(() => {
+    loadFilterSectionComponent(html)
+    filterSection.init()
+  })
+
+  afterEach(() => {
+    // fixture.remove()
+  })
+
+  it('sets correct ga4 tracking data when panel is opened and closed', () => {
+    console.log(filterSection)
+    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')
+  })
+})