Merge pull request #3530 from alphagov/fix-keyword-tracking

All content finder: Send `search` event on submit
alphagov · Oct 24, 2024 · d5ac797 · d5ac797
2 parents 6ed3e34 + 6ed9e75
commit d5ac797
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 4 deletions.
diff --git a/app/assets/javascripts/modules/all-content-finder.js b/app/assets/javascripts/modules/all-content-finder.js
@@ -8,8 +8,13 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   class AllContentFinder {
     constructor ($module) {
       this.$module = $module
+
       this.$form = $module.querySelector('.js-all-content-finder-form')
+      this.$keywordInput = this.$form.querySelector('input[type="search"]')
       this.$taxonomySelect = $module.querySelector('.js-all-content-finder-taxonomy-select')
+
+      this.initialKeywords = this.$keywordInput.value
+
       this.defaultSortOrders = ['relevance', 'most-viewed']
     }
 
@@ -52,9 +57,34 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       })
     }
 
+    // Sends the canonical GOV.UK `search` analytics event (the legacy UI does this on change using
+    // the regular GA4 finder tracker, but we want this to only happen on submission if the keywords
+    // have actually changed since the least search (i.e. page load/module initialisation), so
+    // cannot leverage that)
+    setupFormSubmissionAnalyticsEvent () {
+      this.$form.addEventListener('submit', () => {
+        if (this.$keywordInput.value === this.initialKeywords) return
+
+        const schemas = new window.GOVUK.analyticsGa4.Schemas()
+        const data = schemas.mergeProperties({
+          type: 'finder',
+          event_name: 'search',
+          section: 'Search',
+          action: 'search',
+          text: GOVUK.analyticsGa4.core.trackFunctions.standardiseSearchTerm(
+            this.$keywordInput.value
+          ),
+          url: window.location.pathname
+        }, 'event_data')
+
+        GOVUK.analyticsGa4.core.sendData(data)
+      })
+    }
+
     setupAnalyticsTracking () {
       GOVUK.analyticsGa4.Ga4EcommerceTracker.init()
 
+      this.setupFormSubmissionAnalyticsEvent()
       this.$form.addEventListener('change', (event) => {
         const $closestCategoryWrapper = event.target.closest('[data-ga4-change-category]')
 

diff --git a/app/views/finders/show_all_content_finder.html.erb b/app/views/finders/show_all_content_finder.html.erb
@@ -41,16 +41,13 @@
     action: content_item.base_path,
     id: "all-content-finder-form",
     class: "js-all-content-finder-form",
-    data: {
-      ga4_change_category: "clear-all-filters",
-    }
   ) do %>
     <%= 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? %>
 
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds-from-desktop">
-        <div id="keywords" role="search" aria-label="Sitewide" data-ga4-change-category="update-keyword text">
+        <div id="keywords" role="search" aria-label="Sitewide">
           <%= render "govuk_publishing_components/components/search", {
             id: "finder-keyword-search",
             name: "keywords",

diff --git a/spec/javascripts/modules/all-content-finder.spec.js b/spec/javascripts/modules/all-content-finder.spec.js
@@ -164,6 +164,7 @@ describe('AllContentFinder module', () => {
     beforeEach(() => {
       spyOn(GOVUK.analyticsGa4.Ga4FinderTracker, 'trackChangeEvent')
       spyOn(GOVUK.analyticsGa4.Ga4EcommerceTracker, 'init')
+      spyOn(GOVUK.analyticsGa4.core, 'sendData')
     })
 
     describe('when usage tracking is declined', () => {
@@ -178,6 +179,21 @@ describe('AllContentFinder module', () => {
         expect(GOVUK.analyticsGa4.Ga4FinderTracker.trackChangeEvent).not.toHaveBeenCalled()
       })
 
+      it('does not fire a `search` event on form submit if the keyword has not changed', () => {
+        const form = fixture.querySelector('.js-all-content-finder-form')
+        form.dispatchEvent(new Event('submit', { bubbles: true }))
+
+        expect(GOVUK.analyticsGa4.core.sendData).not.toHaveBeenCalled()
+      })
+
+      it('does not fire a `search` event on form submit even if the keyword has changed', () => {
+        const form = fixture.querySelector('.js-all-content-finder-form')
+        form.querySelector('input[type="search"]').value = 'new keyword'
+        form.dispatchEvent(new Event('submit', { bubbles: true }))
+
+        expect(GOVUK.analyticsGa4.core.sendData).not.toHaveBeenCalled()
+      })
+
       it('does not set up ecommerce tracking', () => {
         expect(GOVUK.analyticsGa4.Ga4EcommerceTracker.init).not.toHaveBeenCalled()
       })
@@ -197,6 +213,30 @@ describe('AllContentFinder module', () => {
         expect(GOVUK.analyticsGa4.Ga4FinderTracker.trackChangeEvent).toHaveBeenCalledWith(input, 'FooCategory')
       })
 
+      it('does not fire a `search` event on form submit if the keyword has not changed', () => {
+        const form = fixture.querySelector('.js-all-content-finder-form')
+        form.dispatchEvent(new Event('submit', { bubbles: true }))
+
+        expect(GOVUK.analyticsGa4.core.sendData).not.toHaveBeenCalled()
+      })
+
+      it('fires a `search` event on form submit if the keyword has changed', () => {
+        const form = fixture.querySelector('.js-all-content-finder-form')
+        form.querySelector('input[type="search"]').value = 'new keyword'
+        form.dispatchEvent(new Event('submit', { bubbles: true }))
+
+        expect(GOVUK.analyticsGa4.core.sendData).toHaveBeenCalledWith(jasmine.objectContaining({
+          event: 'event_data',
+          event_data: jasmine.objectContaining({
+            event_name: 'search',
+            type: 'finder',
+            text: 'new keyword',
+            action: 'search',
+            section: 'Search'
+          })
+        }))
+      })
+
       it('sets up ecommerce tracking', () => {
         expect(GOVUK.analyticsGa4.Ga4EcommerceTracker.init).toHaveBeenCalled()
       })