From 70085f36e95cfc0db2cb950ef6c83e57ba6f3fd9 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Wed, 20 Mar 2024 10:19:46 +0000 Subject: [PATCH 1/3] Add GA4 attribute to start now buttons - add a custom GA4 attribute to be picked up by the link tracker for the 'start now' variant of the button component --- .../components/_button.html.erb | 1 + .../components/docs/button.yml | 8 ++++++++ .../presenters/button_helper.rb | 6 ++++++ spec/components/button_spec.rb | 9 +++++++++ 4 files changed, 24 insertions(+) diff --git a/app/views/govuk_publishing_components/components/_button.html.erb b/app/views/govuk_publishing_components/components/_button.html.erb index 925ada0e4c..1e85f90b49 100644 --- a/app/views/govuk_publishing_components/components/_button.html.erb +++ b/app/views/govuk_publishing_components/components/_button.html.erb @@ -1,5 +1,6 @@ <% add_gem_component_stylesheet("button") + disable_ga4 ||= false # button_helper.css_classes generates "gem-c-button" shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) diff --git a/app/views/govuk_publishing_components/components/docs/button.yml b/app/views/govuk_publishing_components/components/docs/button.yml index 8b963ff059..8d17053fbb 100644 --- a/app/views/govuk_publishing_components/components/docs/button.yml +++ b/app/views/govuk_publishing_components/components/docs/button.yml @@ -44,6 +44,14 @@ examples: href: '#' start: true rel: external + start_now_button_without_ga4_attributes: + description: By default the start now button version of this component includes a `data-ga4-attributes` attribute that is used by the specialist (external) link tracker to uniquely identify start now buttons. This attribute can be removed using the `disable_ga4` option. + data: + text: Start now + disable_ga4: true + href: '#' + start: true + rel: external secondary_button: data: text: Secondary button diff --git a/lib/govuk_publishing_components/presenters/button_helper.rb b/lib/govuk_publishing_components/presenters/button_helper.rb index d15eebbf0c..27fd1f857a 100644 --- a/lib/govuk_publishing_components/presenters/button_helper.rb +++ b/lib/govuk_publishing_components/presenters/button_helper.rb @@ -28,6 +28,7 @@ class ButtonHelper :aria_describedby def initialize(local_assigns) + @disable_ga4 = local_assigns[:disable_ga4] @href = local_assigns[:href] @text = local_assigns[:text] @title = local_assigns[:title] @@ -45,6 +46,7 @@ def initialize(local_assigns) @target = local_assigns[:target] @type = local_assigns[:type] @start = local_assigns[:start] + @data_attributes[:ga4_attributes] = ga4_attribute if start @secondary = local_assigns[:secondary] @secondary_quiet = local_assigns[:secondary_quiet] @secondary_solid = local_assigns[:secondary_solid] @@ -129,6 +131,10 @@ def get_margin_bottom(margin, info_text) [*0..9].include?(margin) ? "govuk-!-margin-bottom-#{margin}" : legacy_class end + + def ga4_attribute + { type: "start button" }.to_json unless @disable_ga4 + end end end end diff --git a/spec/components/button_spec.rb b/spec/components/button_spec.rb index 2bc2531041..9282b214f0 100644 --- a/spec/components/button_spec.rb +++ b/spec/components/button_spec.rb @@ -15,6 +15,7 @@ def component_name assert_select ".govuk-button[type=submit]", text: "Submit" assert_select ".govuk-button--start", false assert_select ".gem-c-button__info-text", false + assert_select "[data-ga4-attributes]", false end it "renders text correctly" do @@ -46,6 +47,14 @@ def component_name render_component(text: "Start now", href: "#", start: true) assert_select ".govuk-button[href='#'] span", text: /Start now/ assert_select ".govuk-button--start" + assert_select ".govuk-button--start[data-ga4-attributes='{\"type\":\"start button\"}']" + end + + it "renders start now button with GA4 attributes disabled" do + render_component(text: "Start now", href: "#", start: true, disable_ga4: true) + assert_select ".govuk-button[href='#'] span", text: /Start now/ + assert_select ".govuk-button--start" + assert_select ".govuk-button--start[data-ga4-attributes='{\"type\":\"start button\"}']", false end it "renders secondary button" do From c8a873cd72da2c4289d3a768562591b2dacaa5cb Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Wed, 20 Mar 2024 11:27:01 +0000 Subject: [PATCH 2/3] Allow external links to override type - for external links such as 'Start now' buttons, we want the specialist link tracker to be able to pick up an alternative value for 'type' from the `data-ga4-attributes` attribute on the link --- .../ga4-specialist-link-tracker.js | 17 +++++++++- .../ga4-specialist-link-tracker.md | 2 +- .../ga4-specialist-link-tracker.spec.js | 31 +++++++++++++++++++ 3 files changed, 48 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-specialist-link-tracker.js b/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-specialist-link-tracker.js index e4cc3f3c79..3b4e0cbe30 100644 --- a/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-specialist-link-tracker.js +++ b/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-specialist-link-tracker.js @@ -72,7 +72,22 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics if (!href) { return } + var data = {} + var extraAttributes = element.getAttribute('data-ga4-attributes') + if (extraAttributes) { + try { + extraAttributes = JSON.parse(extraAttributes) + // make sure the data object remains an object - JSON.parse can return a string + for (var attrname in extraAttributes) { + data[attrname] = extraAttributes[attrname] + } + } catch (e) { + // fall back to the empty data object if something goes wrong + console.error('GA4 configuration error: ' + e.message, window.location) + } + } + var mailToLink = false if (window.GOVUK.analyticsGa4.core.trackFunctions.isMailToLink(href)) { data.event_name = 'navigation' @@ -85,7 +100,7 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics data.external = window.GOVUK.analyticsGa4.core.trackFunctions.isExternalLink(href) ? 'true' : 'false' } else if (window.GOVUK.analyticsGa4.core.trackFunctions.isExternalLink(href)) { data.event_name = 'navigation' - data.type = 'generic link' + data.type = data.type || 'generic link' data.external = 'true' } diff --git a/docs/analytics-ga4/ga4-specialist-link-tracker.md b/docs/analytics-ga4/ga4-specialist-link-tracker.md index eb48e75a7a..94e7d5f3e7 100644 --- a/docs/analytics-ga4/ga4-specialist-link-tracker.md +++ b/docs/analytics-ga4/ga4-specialist-link-tracker.md @@ -72,7 +72,7 @@ In the example above, on a left click of the link, the following would be pushed Preview links would turn `type` to `preview`. -External links would turn `event_name` to `navigation` and `type` to `generic link`. +External links would turn `event_name` to `navigation` and `type` to `generic link`. `type` can be overridden by putting a `data-ga4-attributes` attribute on a link, containing a JSON snippet with an alternative `type`. This is done on 'Start now' buttons to uniquely identify them. Mailto links would turn turn `event_name` to `navigation` and `type` to `email`. diff --git a/spec/javascripts/govuk_publishing_components/analytics-ga4/ga4-specialist-link-tracker.spec.js b/spec/javascripts/govuk_publishing_components/analytics-ga4/ga4-specialist-link-tracker.spec.js index 4a3fdcd02a..5379bf12ac 100644 --- a/spec/javascripts/govuk_publishing_components/analytics-ga4/ga4-specialist-link-tracker.spec.js +++ b/spec/javascripts/govuk_publishing_components/analytics-ga4/ga4-specialist-link-tracker.spec.js @@ -49,6 +49,10 @@ describe('A specialist link tracker', function () { '' + 'National Archives PDF' + '' + + '
' + + ' National Archives ' + + ' National Archives ' + + '
' + '
' + ' National Archives ' + '' + @@ -108,6 +112,33 @@ describe('A specialist link tracker', function () { } }) + it('reads type from data-ga4-link attributes on external links', function () { + var linksToTest = document.querySelectorAll('.external-links-with-data-attributes a') + var attributes = [ + { + type: 'specific type' + }, + 'invalid JSON' + ] + var types = [ + 'specific type', + 'generic link' + ] + + for (var i = 0; i < linksToTest.length; i++) { + var link = linksToTest[i] + link.setAttribute('data-ga4-attributes', JSON.stringify(attributes[i])) + window.dataLayer = [] + GOVUK.triggerEvent(link, 'click') + expected.event_data.link_domain = link.getAttribute('link_domain') + expected.event_data.url = link.getAttribute('href') + expected.event_data.text = link.innerText.trim() + expected.event_data.type = types[i] + + expect(window.dataLayer[0]).toEqual(expected) + } + }) + it('detects external click events on www. missing external links', function () { var linksToTest = document.querySelectorAll('.www-less-external-links a') for (var i = 0; i < linksToTest.length; i++) { From adff725106175825995b0150b35f6da11a384c3c Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Wed, 20 Mar 2024 11:37:28 +0000 Subject: [PATCH 3/3] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6f356b9d35..a94d9b57de 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ ## Unreleased +* Track 'Start now' buttons with a specific GA4 type ([PR #3935](https://github.com/alphagov/govuk_publishing_components/pull/3935)) * Use component wrapper in document list component ([PR #3933](https://github.com/alphagov/govuk_publishing_components/pull/3933)) ## 37.9.0