From 19b38f932298235b1fa6473c502a0b41919b1a70 Mon Sep 17 00:00:00 2001 From: Ryan Brown Date: Mon, 25 Nov 2024 15:27:29 +0000 Subject: [PATCH 1/6] Do not apply button tracking to elements with button role We are preventing button tracking for elements that are not buttons but have the button role because there is a risk of duplicate events. Most non-button elements with the button role are links, and will therefore be tracked via the link tracker module. The link tracker module will send a link event type for links with the button role. We do not need to send additional events via button tracking for such elements. --- .../admin/analytics-modules/ga4-button-setup.js | 4 +--- .../analytics-modules/ga4-button-setup.spec.js | 14 -------------- 2 files changed, 1 insertion(+), 17 deletions(-) diff --git a/app/assets/javascripts/admin/analytics-modules/ga4-button-setup.js b/app/assets/javascripts/admin/analytics-modules/ga4-button-setup.js index 654a2c1c394..6369d25ea42 100644 --- a/app/assets/javascripts/admin/analytics-modules/ga4-button-setup.js +++ b/app/assets/javascripts/admin/analytics-modules/ga4-button-setup.js @@ -10,9 +10,7 @@ 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', diff --git a/spec/javascripts/admin/analytics-modules/ga4-button-setup.spec.js b/spec/javascripts/admin/analytics-modules/ga4-button-setup.spec.js index 089b68df76a..a3891991730 100644 --- a/spec/javascripts/admin/analytics-modules/ga4-button-setup.spec.js +++ b/spec/javascripts/admin/analytics-modules/ga4-button-setup.spec.js @@ -45,18 +45,4 @@ describe('GOVUK.analyticsGa4.analyticsModules', function () { '{"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"}' - ) - }) }) From 1c3a9f1683cbcf603f984ce9127ff98cfbad2d7c Mon Sep 17 00:00:00 2001 From: Ryan Brown Date: Mon, 25 Nov 2024 16:20:18 +0000 Subject: [PATCH 2/6] Remove hardcoded primary click method attribute from button and link click events There was a hardcoded "method" attribute which we unset, as we don't know whether it's actually a primary click or not. The link tracker from Publishing components already applies this attribute anyway, so no need for us to repeat it. --- .../javascripts/admin/analytics-modules/ga4-button-setup.js | 3 +-- .../javascripts/admin/analytics-modules/ga4-link-setup.js | 3 +-- .../admin/analytics-modules/ga4-button-setup.spec.js | 6 +++--- .../admin/analytics-modules/ga4-link-setup.spec.js | 4 ++-- 4 files changed, 7 insertions(+), 9 deletions(-) diff --git a/app/assets/javascripts/admin/analytics-modules/ga4-button-setup.js b/app/assets/javascripts/admin/analytics-modules/ga4-button-setup.js index 6369d25ea42..6e33a2baefc 100644 --- a/app/assets/javascripts/admin/analytics-modules/ga4-button-setup.js +++ b/app/assets/javascripts/admin/analytics-modules/ga4-button-setup.js @@ -15,8 +15,7 @@ window.GOVUK.analyticsGa4.analyticsModules = const event = { event_name: 'navigation', type: 'button', - text: button.textContent, - method: 'primary_click' + text: button.textContent } if (button.dataset.ga4Event) { Object.assign(event, JSON.parse(button.dataset.ga4Event)) diff --git a/app/assets/javascripts/admin/analytics-modules/ga4-link-setup.js b/app/assets/javascripts/admin/analytics-modules/ga4-link-setup.js index 34f59ea044c..aa663904dd5 100644 --- a/app/assets/javascripts/admin/analytics-modules/ga4-link-setup.js +++ b/app/assets/javascripts/admin/analytics-modules/ga4-link-setup.js @@ -14,8 +14,7 @@ window.GOVUK.analyticsGa4.analyticsModules = links.forEach((link) => { 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)) diff --git a/spec/javascripts/admin/analytics-modules/ga4-button-setup.spec.js b/spec/javascripts/admin/analytics-modules/ga4-button-setup.spec.js index a3891991730..4fa0cac69ae 100644 --- a/spec/javascripts/admin/analytics-modules/ga4-button-setup.spec.js +++ b/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":"navigation","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,7 +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"}' + '{"event_name":"custom_event_name","type":"button","text":"Button"}' ) }) }) diff --git a/spec/javascripts/admin/analytics-modules/ga4-link-setup.spec.js b/spec/javascripts/admin/analytics-modules/ga4-link-setup.spec.js index 5980855374e..0b393661625 100644 --- a/spec/javascripts/admin/analytics-modules/ga4-link-setup.spec.js +++ b/spec/javascripts/admin/analytics-modules/ga4-link-setup.spec.js @@ -17,7 +17,7 @@ describe('GOVUK.analyticsGa4.analyticsModules.Ga4LinkSetup', function () { Ga4LinkSetup.init() expect(link.dataset.ga4Event).toEqual( - '{"event_name":"navigation","type":"generic_link","method":"primary_click"}' + '{"event_name":"navigation","type":"generic_link"}' ) }) @@ -28,7 +28,7 @@ describe('GOVUK.analyticsGa4.analyticsModules.Ga4LinkSetup', function () { Ga4LinkSetup.init() expect(link.dataset.ga4Event).toEqual( - '{"event_name":"navigation","type":"button","method":"primary_click"}' + '{"event_name":"navigation","type":"button"}' ) }) }) From 70d4c99a017fa4fbb33c35e851e27577638a6aeb Mon Sep 17 00:00:00 2001 From: Ryan Brown Date: Mon, 25 Nov 2024 16:25:54 +0000 Subject: [PATCH 3/6] Fix to link tracking setup Link tracking should use the ga4-link data attribute instead of the ga4-event data attribute. See https://github.com/alphagov/govuk_publishing_components/blob/2bf9077e3e091a2151feab56a715035e1883c689/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-link-tracker.js#L9 This will allow us to mix the attributes in to the GA4 link tracking module events provided by GOV.UK Publishing Components --- .../javascripts/admin/analytics-modules/ga4-link-setup.js | 6 +++--- .../admin/analytics-modules/ga4-link-setup.spec.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/assets/javascripts/admin/analytics-modules/ga4-link-setup.js b/app/assets/javascripts/admin/analytics-modules/ga4-link-setup.js index aa663904dd5..5c6923c2c24 100644 --- a/app/assets/javascripts/admin/analytics-modules/ga4-link-setup.js +++ b/app/assets/javascripts/admin/analytics-modules/ga4-link-setup.js @@ -16,10 +16,10 @@ window.GOVUK.analyticsGa4.analyticsModules = event_name: 'navigation', 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) }) }) } diff --git a/spec/javascripts/admin/analytics-modules/ga4-link-setup.spec.js b/spec/javascripts/admin/analytics-modules/ga4-link-setup.spec.js index 0b393661625..10fd0377777 100644 --- a/spec/javascripts/admin/analytics-modules/ga4-link-setup.spec.js +++ b/spec/javascripts/admin/analytics-modules/ga4-link-setup.spec.js @@ -16,7 +16,7 @@ describe('GOVUK.analyticsGa4.analyticsModules.Ga4LinkSetup', function () { const Ga4LinkSetup = GOVUK.analyticsGa4.analyticsModules.Ga4LinkSetup Ga4LinkSetup.init() - expect(link.dataset.ga4Event).toEqual( + expect(link.dataset.ga4Link).toEqual( '{"event_name":"navigation","type":"generic_link"}' ) }) @@ -27,7 +27,7 @@ describe('GOVUK.analyticsGa4.analyticsModules.Ga4LinkSetup', function () { const Ga4LinkSetup = GOVUK.analyticsGa4.analyticsModules.Ga4LinkSetup Ga4LinkSetup.init() - expect(link.dataset.ga4Event).toEqual( + expect(link.dataset.ga4Link).toEqual( '{"event_name":"navigation","type":"button"}' ) }) From 6b00ce8873698a556ff3db44acf0a45c137f2e1c Mon Sep 17 00:00:00 2001 From: Ryan Brown Date: Mon, 25 Nov 2024 17:38:30 +0000 Subject: [PATCH 4/6] Apply link and button tracking globally across Whitehall --- .../admin/editions/show/sidebar_actions_component.html.erb | 2 +- app/helpers/admin/editions_helper.rb | 2 +- app/views/admin/attachments/_form.html.erb | 2 +- app/views/admin/new_document/index.html.erb | 2 +- app/views/layouts/design_system.html.erb | 2 +- app/views/shared/_header.html.erb | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/components/admin/editions/show/sidebar_actions_component.html.erb b/app/components/admin/editions/show/sidebar_actions_component.html.erb index ccd49b2cd15..77e074c1b0d 100644 --- a/app/components/admin/editions/show/sidebar_actions_component.html.erb +++ b/app/components/admin/editions/show/sidebar_actions_component.html.erb @@ -1,4 +1,4 @@ -
+
<%= render "govuk_publishing_components/components/list", { extra_spacing: true, items: actions, diff --git a/app/helpers/admin/editions_helper.rb b/app/helpers/admin/editions_helper.rb index cbb09deef56..a36801997d5 100644 --- a/app/helpers/admin/editions_helper.rb +++ b/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:) diff --git a/app/views/admin/attachments/_form.html.erb b/app/views/admin/attachments/_form.html.erb index c2b729eeb88..24265423e8b 100644 --- a/app/views/admin/attachments/_form.html.erb +++ b/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| %>
<%= render "govuk_publishing_components/components/input", { label: { diff --git a/app/views/admin/new_document/index.html.erb b/app/views/admin/new_document/index.html.erb index 408b712556e..e20fc4a6033 100644 --- a/app/views/admin/new_document/index.html.erb +++ b/app/views/admin/new_document/index.html.erb @@ -3,7 +3,7 @@
<%= 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", diff --git a/app/views/layouts/design_system.html.erb b/app/views/layouts/design_system.html.erb index da186e223d6..4dd1c68a22f 100644 --- a/app/views/layouts/design_system.html.erb +++ b/app/views/layouts/design_system.html.erb @@ -22,7 +22,7 @@ <%= render partial: "shared/header" %> -
+
<%= render "shared/phase_banner", { show_feedback_banner: t("admin.feedback.show_banner"), } %> diff --git a/app/views/shared/_header.html.erb b/app/views/shared/_header.html.erb index 3d27fec7936..bf67fa8afcf 100644 --- a/app/views/shared/_header.html.erb +++ b/app/views/shared/_header.html.erb @@ -28,7 +28,7 @@ ], } %> -
+
<%= render "components/sub_navigation", { items: [ sub_nav_item("New document", admin_new_document_path), From 01b40b13c80d15757acf156bca40d04cf8cf51b6 Mon Sep 17 00:00:00 2001 From: Ryan Brown Date: Fri, 6 Dec 2024 13:33:16 +0000 Subject: [PATCH 5/6] Use 'select_content' event name for buttons which don't trigger a form submission It doesn't make sense to track a "navigation" event for such buttons, as there is no form submission to trigger a page navigation --- .../javascripts/admin/analytics-modules/ga4-button-setup.js | 3 ++- .../admin/analytics-modules/ga4-button-setup.spec.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/admin/analytics-modules/ga4-button-setup.js b/app/assets/javascripts/admin/analytics-modules/ga4-button-setup.js index 6e33a2baefc..50e38fe2cdc 100644 --- a/app/assets/javascripts/admin/analytics-modules/ga4-button-setup.js +++ b/app/assets/javascripts/admin/analytics-modules/ga4-button-setup.js @@ -13,7 +13,8 @@ window.GOVUK.analyticsGa4.analyticsModules = 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 } diff --git a/spec/javascripts/admin/analytics-modules/ga4-button-setup.spec.js b/spec/javascripts/admin/analytics-modules/ga4-button-setup.spec.js index 4fa0cac69ae..69ba26e4eb3 100644 --- a/spec/javascripts/admin/analytics-modules/ga4-button-setup.spec.js +++ b/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"}' + '{"event_name":"select_content","type":"button","text":"Button"}' ) }) From 283d512854064acfd440ba703eb3af726092ea7f Mon Sep 17 00:00:00 2001 From: Ryan Brown Date: Fri, 6 Dec 2024 13:46:34 +0000 Subject: [PATCH 6/6] Omit links with tab aria role from link tracking Tabs have their own tracking built in to the component from the govuk_publishing_components gem. No need for us to duplicate it. --- .../admin/analytics-modules/ga4-link-setup.js | 4 ++++ .../admin/analytics-modules/ga4-link-setup.spec.js | 9 +++++++++ 2 files changed, 13 insertions(+) diff --git a/app/assets/javascripts/admin/analytics-modules/ga4-link-setup.js b/app/assets/javascripts/admin/analytics-modules/ga4-link-setup.js index 5c6923c2c24..54b224be64e 100644 --- a/app/assets/javascripts/admin/analytics-modules/ga4-link-setup.js +++ b/app/assets/javascripts/admin/analytics-modules/ga4-link-setup.js @@ -12,6 +12,10 @@ 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' diff --git a/spec/javascripts/admin/analytics-modules/ga4-link-setup.spec.js b/spec/javascripts/admin/analytics-modules/ga4-link-setup.spec.js index 10fd0377777..9146fb628af 100644 --- a/spec/javascripts/admin/analytics-modules/ga4-link-setup.spec.js +++ b/spec/javascripts/admin/analytics-modules/ga4-link-setup.spec.js @@ -31,4 +31,13 @@ describe('GOVUK.analyticsGa4.analyticsModules.Ga4LinkSetup', function () { '{"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() + }) })