Use new Publishing Components GA4 search tracker

This allows us to remove the custom search tracking from the all content finder Javascript module.
alphagov · Nov 1, 2024 · 7e5491a · 7e5491a
1 parent 317beaa
commit 7e5491a
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 83 deletions.
diff --git a/app/assets/javascripts/modules/all-content-finder.js b/app/assets/javascripts/modules/all-content-finder.js
@@ -57,36 +57,9 @@ 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',
-          // standardiseSearchTerm returns undefined for empty strings, which we do _not_ want in
-          // this scenario as it would lead to the analytics tracking not picking up on the change
-          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,6 +41,12 @@
     action: content_item.base_path,
     id: "all-content-finder-form",
     class: "js-all-content-finder-form",
+    data: {
+      module: "ga4-search-tracker",
+      ga4_search_type: "finder",
+      ga4_search_url: "/search/all",
+      ga4_search_section: "Search",
+    },
   ) 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? %>

diff --git a/spec/javascripts/modules/all-content-finder.spec.js b/spec/javascripts/modules/all-content-finder.spec.js
@@ -179,21 +179,6 @@ 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()
       })
@@ -213,47 +198,6 @@ 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('fires a `search` event with the right text if the keyword has been removed', () => {
-        const form = fixture.querySelector('.js-all-content-finder-form')
-        form.querySelector('input[type="search"]').value = ''
-        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: '',
-            action: 'search',
-            section: 'Search'
-          })
-        }))
-      })
-
       it('sets up ecommerce tracking', () => {
         expect(GOVUK.analyticsGa4.Ga4EcommerceTracker.init).toHaveBeenCalled()
       })