Modify track click script

- link tracking without a label explicitly given should use the link href, not the text of the link
alphagov · Aug 12, 2021 · 924c5b9 · 924c5b9
1 parent 6a4c85c
commit 924c5b9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+# Unreleased
+
+* Fix track click link tracking ([PR #2265](https://github.com/alphagov/govuk_publishing_components/pull/2265))
+
 # 25.3.0
 
 * Extend track click script ([PR #2263](https://github.com/alphagov/govuk_publishing_components/pull/2263))

diff --git a/app/assets/javascripts/govuk_publishing_components/analytics/track-click.js b/app/assets/javascripts/govuk_publishing_components/analytics/track-click.js
@@ -24,24 +24,26 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   GemTrackClick.prototype.handleClick = function (target) {
     var options = { transport: 'beacon' }
-    var linkText
+    var linkUrl
 
     // 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
+      linkUrl = target.getAttribute('href')
       target = target.closest('[data-track-category][data-track-action]')
     }
 
     if (target) {
       var category = target.getAttribute('data-track-category')
       var action = target.getAttribute('data-track-action')
-      var label = target.getAttribute('data-track-label')
+      var label = target.getAttribute('data-track-label') || linkUrl
       var value = target.getAttribute('data-track-value')
       var dimension = target.getAttribute('data-track-dimension')
       var dimensionIndex = target.getAttribute('data-track-dimension-index')
       var extraOptions = target.getAttribute('data-track-options')
 
-      options.label = label || linkText
+      if (label) {
+        options.label = label
+      }
 
       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
@@ -124,11 +124,11 @@ 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 () {
+  it('tracks all links in a trackable container and uses the link URL as the label if no label is specified', function () {
     element = $(
       '<div data-module="gem-track-click" data-track-category="cat1" data-track-action="action1">' +
-        '<a class="first" href="#">Link 1</a>' +
-        '<a class="second" href="#" ' +
+        '<a class="first" href="#link1">Link 1</a>' +
+        '<a class="second" href="#link2" ' +
           'data-track-category="cat2"' +
           'data-track-action="action2"' +
           'data-track-label="label2">' +
@@ -140,7 +140,7 @@ describe('A click tracker', function () {
     new GOVUK.Modules.GemTrackClick().start(element)
 
     element.find('a.first')[0].click()
-    expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('cat1', 'action1', { label: 'Link 1', transport: 'beacon' })
+    expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('cat1', 'action1', { label: '#link1', transport: 'beacon' })
 
     element.find('a.second')[0].click()
     expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('cat2', 'action2', { label: 'label2', transport: 'beacon' })
@@ -149,8 +149,8 @@ describe('A click tracker', function () {
   it('tracks only clicks on links when configured', function () {
     element = $(
       '<div data-module="gem-track-click" data-track-category="cat1" data-track-action="action1" data-track-links-only>' +
-        '<a class="first" href="#">Link 1</a>' +
-        '<a class="second" href="#" ' +
+        '<a class="first" href="#link1">Link 1</a>' +
+        '<a class="second" href="#link2" ' +
           'data-track-category="cat2"' +
           'data-track-action="action2"' +
           'data-track-label="label2">' +
@@ -166,7 +166,7 @@ describe('A click tracker', function () {
     expect(GOVUK.analytics.trackEvent).not.toHaveBeenCalled()
 
     element.find('a.first')[0].click()
-    expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('cat1', 'action1', { label: 'Link 1', transport: 'beacon' })
+    expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('cat1', 'action1', { label: '#link1', transport: 'beacon' })
 
     element.find('a.second')[0].click()
     expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('cat2', 'action2', { label: 'label2', transport: 'beacon' })