Add element tracking to track click

- allows us to specify an element class within which link clicks will be tracked - caters for the situation where we want to track specific links within a govspeak block and can't get to the source, except from a high level parent element
alphagov · Aug 24, 2021 · 37f6180 · 37f6180
1 parent 7254544
commit 37f6180
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 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
@@ -10,14 +10,20 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$module = $module[0]
     this.$module.handleClick = this.handleClick.bind(this)
     var trackLinksOnly = this.$module.hasAttribute('data-track-links-only')
+    var limitToElementClass = this.$module.getAttribute('data-limit-to-element-class')
 
     var that = this
     // add a listener to the whole element
     this.$module.addEventListener('click', function (e) {
+      var target = e.target
       if (!trackLinksOnly) {
-        that.$module.handleClick(e.target)
-      } else if (trackLinksOnly && e.target.tagName === 'A') {
-        that.$module.handleClick(e.target)
+        that.$module.handleClick(target)
+      } else if (trackLinksOnly && target.tagName === 'A') {
+        if (!limitToElementClass) {
+          that.$module.handleClick(target)
+        } else if (limitToElementClass && target.closest('.' + limitToElementClass)) {
+          that.$module.handleClick(target)
+        }
       }
     })
   }

diff --git a/spec/javascripts/govuk_publishing_components/analytics/track-click.spec.js b/spec/javascripts/govuk_publishing_components/analytics/track-click.spec.js
@@ -172,6 +172,38 @@ describe('A click tracker', function () {
     expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith('cat2', 'action2', { label: 'label2', transport: 'beacon' })
   })
 
+  it('tracks only clicks on links within a given element when configured', function () {
+    element = $(
+      '<div data-module="gem-track-click" data-track-category="cat1" data-track-action="action1" data-track-links-only data-limit-to-element-class="testBox">' +
+        '<div class="testBox">' +
+          '<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">' +
+            'Link 2' +
+          '</a>' +
+        '</div>' +
+        '<a class="third" href="#link3">Link 3</a>' +
+        '<span class="nothing"></span>' +
+      '</div>'
+    )
+
+    new GOVUK.Modules.GemTrackClick().start(element)
+
+    element.find('.nothing')[0].click()
+    expect(GOVUK.analytics.trackEvent).not.toHaveBeenCalled()
+
+    element.find('a.third')[0].click()
+    expect(GOVUK.analytics.trackEvent).not.toHaveBeenCalled()
+
+    element.find('a.first')[0].click()
+    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' })
+  })
+
   it('tracks a click correctly when event target is a child element of trackable element', function () {
     element = $(
       '<div data-module="gem-track-click">' +