Merge pull request #9651 from alphagov/track-all-links-and-buttons

Track all links and buttons in Whitehall as per agreed event schema

app/assets/javascripts/admin/analytics-modules/ga4-button-setup.js

@@ -10,15 +10,13 @@ window.GOVUK.analyticsGa4.analyticsModules =
         "[data-module~='ga4-button-setup']"
       )
       moduleElements.forEach(function (moduleElement) {
-        const buttons = moduleElement.querySelectorAll(
-          'button, [role="button"]'
-        )
+        const buttons = moduleElement.querySelectorAll('button')
         buttons.forEach((button) => {
           const event = {
-            event_name: 'navigation',
+            event_name:
+              button.type === 'submit' ? 'navigation' : 'select_content',
             type: 'button',
-            text: button.textContent,
-            method: 'primary_click'
+            text: button.textContent
           }
           if (button.dataset.ga4Event) {
             Object.assign(event, JSON.parse(button.dataset.ga4Event))

app/assets/javascripts/admin/analytics-modules/ga4-link-setup.js

@@ -12,15 +12,18 @@ window.GOVUK.analyticsGa4.analyticsModules =
       moduleElements.forEach(function (moduleElement) {
         const links = moduleElement.querySelectorAll('a')
         links.forEach((link) => {
+          // Exclude links that serve as tab controls as they have their own event tracking
+          if (link.role === 'tab') {
+            return
+          }
           const event = {
             event_name: 'navigation',
-            type: link.role === 'button' ? 'button' : 'generic_link',
-            method: 'primary_click'
+            type: link.role === 'button' ? 'button' : 'generic_link'
           }
-          if (link.dataset.ga4Event) {
-            Object.assign(event, JSON.parse(link.dataset.ga4Event))
+          if (link.dataset.ga4Link) {
+            Object.assign(event, JSON.parse(link.dataset.ga4Link))
           }
-          link.dataset.ga4Event = JSON.stringify(event)
+          link.dataset.ga4Link = JSON.stringify(event)
         })
       })
     }

app/components/admin/editions/show/sidebar_actions_component.html.erb

@@ -1,4 +1,4 @@
-<div class="app-view-summary__sidebar-actions" data-module="ga4-button-setup">
+<div class="app-view-summary__sidebar-actions">
   <%= render "govuk_publishing_components/components/list", {
     extra_spacing: true,
     items: actions,

app/helpers/admin/editions_helper.rb

@@ -93,7 +93,7 @@ def lead_organisation_id_at_index(edition, index)
   end
 
   def standard_edition_form(edition)
-    form_for form_url_for_edition(edition), as: :edition, html: { class: edition_form_classes(edition), multipart: true }, data: { module: "EditionForm LocaleSwitcher ga4-button-setup ga4-visual-editor-event-handlers", "rtl-locales": Locale.right_to_left.collect(&:to_param) } do |form|
+    form_for form_url_for_edition(edition), as: :edition, html: { class: edition_form_classes(edition), multipart: true }, data: { module: "EditionForm LocaleSwitcher ga4-visual-editor-event-handlers", "rtl-locales": Locale.right_to_left.collect(&:to_param) } do |form|
       concat render("standard_fields", form:, edition:)
       yield(form)
       concat render("settings_fields", form:, edition:)

app/views/admin/attachments/_form.html.erb

@@ -1,4 +1,4 @@
-<%= form_for attachment, url: [:admin, typecast_for_attachable_routing(attachable), attachment.becomes(Attachment)], as: :attachment, html: { :class => "app-view-attachments__form", data: { module: "LocaleSwitcher ga4-button-setup ga4-visual-editor-event-handlers", "rtl-locales": Locale.right_to_left.collect(&:to_param) }}, multipart: true do |form| %>
+<%= form_for attachment, url: [:admin, typecast_for_attachable_routing(attachable), attachment.becomes(Attachment)], as: :attachment, html: { :class => "app-view-attachments__form", data: { module: "LocaleSwitcher ga4-visual-editor-event-handlers", "rtl-locales": Locale.right_to_left.collect(&:to_param) }}, multipart: true do |form| %>
   <div class="govuk-!-margin-bottom-8 app-view-attachments__form-title js-locale-switcher-field">
     <%= render "govuk_publishing_components/components/input", {
       label: {

app/views/admin/new_document/index.html.erb

@@ -3,7 +3,7 @@
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
     <%= form_with url: admin_new_document_options_path, data: {
-      module: "ga4-form-setup ga4-form-tracker ga4-link-setup ga4-link-tracker",
+      module: "ga4-form-setup ga4-form-tracker",
     } do %>
       <%= render "govuk_publishing_components/components/radio", {
         heading: "New document",

app/views/layouts/design_system.html.erb

@@ -22,7 +22,7 @@
 
   <%= render partial: "shared/header" %>
 
-  <div class="govuk-width-container" data-module="ga4-event-tracker ga4-paste-tracker">
+  <div class="govuk-width-container" data-module="ga4-event-tracker ga4-paste-tracker ga4-link-setup ga4-link-tracker ga4-button-setup">
     <%= render "shared/phase_banner", {
       show_feedback_banner: t("admin.feedback.show_banner"),
     } %>

app/views/shared/_header.html.erb

@@ -28,7 +28,7 @@
   ],
 } %>
 
-<div class="govuk-width-container">
+<div class="govuk-width-container" data-module="ga4-link-setup ga4-link-tracker">
   <%= render "components/sub_navigation", {
     items: [
       sub_nav_item("New document", admin_new_document_path),

spec/javascripts/admin/analytics-modules/ga4-button-setup.spec.js

@@ -18,7 +18,7 @@ describe('GOVUK.analyticsGa4.analyticsModules', function () {
     ga4ButtonSetup.init()
 
     expect(button.dataset.ga4Event).toEqual(
-      '{"event_name":"navigation","type":"button","text":"Button","method":"primary_click"}'
+      '{"event_name":"select_content","type":"button","text":"Button"}'
     )
   })
 
@@ -29,7 +29,7 @@ describe('GOVUK.analyticsGa4.analyticsModules', function () {
     ga4ButtonSetup.init()
 
     expect(button.dataset.ga4Event).toEqual(
-      '{"event_name":"navigation","type":"button","text":"Button","method":"primary_click"}'
+      '{"event_name":"navigation","type":"button","text":"Button"}'
     )
   })
 
@@ -42,21 +42,7 @@ describe('GOVUK.analyticsGa4.analyticsModules', function () {
     ga4ButtonSetup.init()
 
     expect(button.dataset.ga4Event).toEqual(
-      '{"event_name":"custom_event_name","type":"button","text":"Button","method":"primary_click"}'
-    )
-  })
-
-  it('adds ga4 event data to nodes with the button role', function () {
-    const link = document.createElement('a')
-    link.textContent = 'Link'
-    link.role = 'button'
-    button.replaceWith(link)
-
-    const ga4ButtonSetup = GOVUK.analyticsGa4.analyticsModules.Ga4ButtonSetup
-    ga4ButtonSetup.init()
-
-    expect(link.dataset.ga4Event).toEqual(
-      '{"event_name":"navigation","type":"button","text":"Link","method":"primary_click"}'
+      '{"event_name":"custom_event_name","type":"button","text":"Button"}'
     )
   })
 })

spec/javascripts/admin/analytics-modules/ga4-link-setup.spec.js

@@ -16,8 +16,8 @@ describe('GOVUK.analyticsGa4.analyticsModules.Ga4LinkSetup', function () {
     const Ga4LinkSetup = GOVUK.analyticsGa4.analyticsModules.Ga4LinkSetup
     Ga4LinkSetup.init()
 
-    expect(link.dataset.ga4Event).toEqual(
-      '{"event_name":"navigation","type":"generic_link","method":"primary_click"}'
+    expect(link.dataset.ga4Link).toEqual(
+      '{"event_name":"navigation","type":"generic_link"}'
     )
   })
 
@@ -27,8 +27,17 @@ describe('GOVUK.analyticsGa4.analyticsModules.Ga4LinkSetup', function () {
     const Ga4LinkSetup = GOVUK.analyticsGa4.analyticsModules.Ga4LinkSetup
     Ga4LinkSetup.init()
 
-    expect(link.dataset.ga4Event).toEqual(
-      '{"event_name":"navigation","type":"button","method":"primary_click"}'
+    expect(link.dataset.ga4Link).toEqual(
+      '{"event_name":"navigation","type":"button"}'
     )
   })
+
+  it('excludes links that serve as tab controls', function () {
+    link.role = 'tab'
+
+    const Ga4LinkSetup = GOVUK.analyticsGa4.analyticsModules.Ga4LinkSetup
+    Ga4LinkSetup.init()
+
+    expect(link.dataset.ga4Link).toBeUndefined()
+  })
 })