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

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+# Unreleased
+
+* Extend track click script ([PR #2263](https://github.com/alphagov/govuk_publishing_components/pull/2263))
+
 # 25.2.3
 
 * Fix final issues with tracking on super nav header ([PR #2256](https://github.com/alphagov/govuk_publishing_components/pull/2256))

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

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 = $(
+      '<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="#" ' +
+          'data-track-category="cat2"' +
+          'data-track-action="action2"' +
+          'data-track-label="label2">' +
+          'Link 2' +
+        '</a>' +
+      '</div>'
+    )
+
+    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 = $(
       '<div data-module="gem-track-click">' +