Merge pull request #1966 from alphagov/add-tracking-for-briefings

Add tracking for briefings

app/assets/javascripts/modules/track-links.js

@@ -0,0 +1,31 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function TrackLinks () { }
+
+  TrackLinks.prototype.start = function ($element) {
+    $element = $element[0]
+    var category = $element.getAttribute('data-track-links-category')
+    var links = $element.querySelectorAll('a')
+
+    for (var i = 0; i < links.length; i++) {
+      links[i].addEventListener('click', function (event) {
+        this.sendLinkClickEvent(event, category)
+      }.bind(this))
+    }
+  }
+
+  TrackLinks.prototype.sendLinkClickEvent = function (event, category) {
+    window.GOVUK.analytics.trackEvent(
+      category,
+      event.target.innerText,
+      {
+        transport: 'beacon',
+        label: event.target.getAttribute('href')
+      }
+    )
+  }
+
+  Modules.TrackLinks = TrackLinks
+})(window.GOVUK.Modules)

app/views/content_items/briefing.html.erb

@@ -9,7 +9,7 @@
 
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds content-bottom-margin">
-    <div class="responsive-bottom-margin">
+    <div class="responsive-bottom-margin" data-module="track-links" data-track-links-category="Briefings page">
       <%= render "govuk_publishing_components/components/govspeak", {
         direction: page_text_direction,
       } do %>

spec/javascripts/modules/track-links.js

@@ -0,0 +1,67 @@
+/* eslint-env jasmine, jquery */
+var GOVUK = window.GOVUK
+
+describe('Track Links', function () {
+  var tracker
+  var element
+
+  beforeEach(function () {
+    spyOn(GOVUK.analytics, 'trackEvent')
+  })
+
+  afterEach(function () {
+    if (GOVUK.analytics.trackEvent.calls) {
+      GOVUK.analytics.trackEvent.calls.reset()
+    }
+  })
+
+  describe('Single link', function () {
+    beforeEach(function () {
+      element = document.createElement('div')
+      element.setAttribute('data-track-links-category', 'Content page 1')
+      element.innerHTML = '<a href="/blah/blahhhh">Blahh</a>'
+
+      tracker = new GOVUK.Modules.TrackLinks()
+      tracker.start($(element))
+    })
+
+    it('sends a ga event when link is clicked', function () {
+      element.querySelector('a').dispatchEvent(new window.Event('click'))
+
+      expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith(
+        'Content page 1', 'Blahh', { transport: 'beacon', label: '/blah/blahhhh' }
+      )
+    })
+  })
+
+  describe('Multiple links', function () {
+    beforeEach(function () {
+      element = document.createElement('div')
+      element.setAttribute('data-track-links-category', 'Content page 2')
+      element.innerHTML = '<a href="/blah/blahhhh">Blahh</a>'
+      element.innerHTML += '<a href="/blah/blahhhh2">Blahh2</a>'
+      element.innerHTML += '<a href="https://www.external-link.com">External link blahhh</a>'
+
+      tracker = new GOVUK.Modules.TrackLinks()
+      tracker.start($(element))
+    })
+
+    it('sends ga events for all links clicked', function () {
+      element
+        .querySelectorAll('a')
+        .forEach(function (link) {
+          link.dispatchEvent(new window.Event('click'))
+        })
+
+      expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith(
+        'Content page 2', 'Blahh', { transport: 'beacon', label: '/blah/blahhhh' }
+      )
+      expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith(
+        'Content page 2', 'Blahh2', { transport: 'beacon', label: '/blah/blahhhh2' }
+      )
+      expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith(
+        'Content page 2', 'External link blahhh', { transport: 'beacon', label: 'https://www.external-link.com' }
+      )
+    })
+  })
+})