From 3efcbcdd98ec96f83e87456ea5e402376e1631f0 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Wed, 11 Aug 2021 15:08:35 +0100 Subject: [PATCH 1/3] Extend track click script - modified so that if no label is provided, the text of the clicked link is included as the label - this will allow tracking to be added to a wrapping element containing links managed outside of an editable template --- .../analytics/track-click.js | 6 ++--- .../analytics/track-click.spec.js | 22 +++++++++++++++++++ 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/govuk_publishing_components/analytics/track-click.js b/app/assets/javascripts/govuk_publishing_components/analytics/track-click.js index 12d4ba7a53..553a4e5b89 100644 --- a/app/assets/javascripts/govuk_publishing_components/analytics/track-click.js +++ b/app/assets/javascripts/govuk_publishing_components/analytics/track-click.js @@ -19,9 +19,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; GemTrackClick.prototype.handleClick = function (target) { var options = { transport: 'beacon' } + var linkText // if clicked element hasn't got the right attributes, look for a parent that matches if (!target.hasAttribute('data-track-category') && !target.hasAttribute('data-track-action')) { + linkText = target.textContent || target.innerText target = target.closest('[data-track-category][data-track-action]') } @@ -34,9 +36,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; var dimensionIndex = target.getAttribute('data-track-dimension-index') var extraOptions = target.getAttribute('data-track-options') - if (label) { - options.label = label - } + options.label = label ? label : linkText if (value) { options.value = value diff --git a/spec/javascripts/govuk_publishing_components/analytics/track-click.spec.js b/spec/javascripts/govuk_publishing_components/analytics/track-click.spec.js index 26f8ae845c..273a886342 100644 --- a/spec/javascripts/govuk_publishing_components/analytics/track-click.spec.js +++ b/spec/javascripts/govuk_publishing_components/analytics/track-click.spec.js @@ -124,6 +124,28 @@ describe('A click tracker', function () { expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('cat2', 'action2', { label: 'label2', transport: 'beacon' }) }) + it('tracks all links in a trackable container and uses the link text as the label if no label is specified', function () { + element = $( + '
' + + 'Link 1' + + '' + + 'Link 2' + + '' + + '
' + ) + + new GOVUK.Modules.GemTrackClick().start(element) + + element.find('a.first')[0].click() + expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('cat1', 'action1', { label: 'Link 1', transport: 'beacon' }) + + element.find('a.second')[0].click() + expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('cat2', 'action2', { label: 'label2', transport: 'beacon' }) + }) + it('tracks a click correctly when event target is a child element of trackable element', function () { element = $( '
' + From 33d5ea3836b8e9e7a0ac2d6c25de3a5ce3f850ca Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Thu, 12 Aug 2021 08:47:11 +0100 Subject: [PATCH 2/3] Add track links only option - allows the tracking to be added to an element so that any links (and only links) within it will be tracked - this prevents other clicks within the same element from being tracked unnecessarily --- .../analytics/track-click.js | 9 +++++-- .../analytics/track-click.spec.js | 26 +++++++++++++++++++ 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/govuk_publishing_components/analytics/track-click.js b/app/assets/javascripts/govuk_publishing_components/analytics/track-click.js index 553a4e5b89..d1a8470e15 100644 --- a/app/assets/javascripts/govuk_publishing_components/analytics/track-click.js +++ b/app/assets/javascripts/govuk_publishing_components/analytics/track-click.js @@ -9,11 +9,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; GemTrackClick.prototype.start = function ($module) { this.$module = $module[0] this.$module.handleClick = this.handleClick.bind(this) + var trackLinksOnly = this.$module.hasAttribute('data-track-links-only') var that = this // add a listener to the whole element this.$module.addEventListener('click', function (e) { - that.$module.handleClick(e.target) + if (!trackLinksOnly) { + that.$module.handleClick(e.target) + } else if (trackLinksOnly && e.target.tagName === 'A') { + that.$module.handleClick(e.target) + } }) } @@ -36,7 +41,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; var dimensionIndex = target.getAttribute('data-track-dimension-index') var extraOptions = target.getAttribute('data-track-options') - options.label = label ? label : linkText + options.label = label || linkText if (value) { options.value = value diff --git a/spec/javascripts/govuk_publishing_components/analytics/track-click.spec.js b/spec/javascripts/govuk_publishing_components/analytics/track-click.spec.js index 273a886342..dba8fb6534 100644 --- a/spec/javascripts/govuk_publishing_components/analytics/track-click.spec.js +++ b/spec/javascripts/govuk_publishing_components/analytics/track-click.spec.js @@ -146,6 +146,32 @@ describe('A click tracker', function () { expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('cat2', 'action2', { label: 'label2', transport: 'beacon' }) }) + it('tracks only clicks on links when configured', function () { + element = $( + '
' + + 'Link 1' + + '' + + 'Link 2' + + '' + + '' + + '
' + ) + + new GOVUK.Modules.GemTrackClick().start(element) + + element.find('.nothing')[0].click() + expect(GOVUK.analytics.trackEvent).not.toHaveBeenCalled() + + element.find('a.first')[0].click() + expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('cat1', 'action1', { label: 'Link 1', transport: 'beacon' }) + + element.find('a.second')[0].click() + expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('cat2', 'action2', { label: 'label2', transport: 'beacon' }) + }) + it('tracks a click correctly when event target is a child element of trackable element', function () { element = $( '
' + From 08b56a6b8f91a4f11cd4a7a6e374df3c03bd46b3 Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Thu, 12 Aug 2021 08:49:20 +0100 Subject: [PATCH 3/3] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8cd67982de..17af852df0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ # Unreleased +* Extend track click script ([PR #2263](https://github.com/alphagov/govuk_publishing_components/pull/2263)) * Fix cookie banner issue (IE10) ([PR #2231](https://github.com/alphagov/govuk_publishing_components/pull/2231)) # 25.2.3