From 5e0a97330c9226a7eda2ba05efe84cab02092ae9 Mon Sep 17 00:00:00 2001 From: Steve Laing Date: Mon, 8 Oct 2018 11:29:19 +0100 Subject: [PATCH 1/2] Track events and pageviews Track events and pageviews when tracking radio groups across domains. The pageview data is also required when performing cross domain tracking, also add some test coverage for radio group tracking. --- .../javascripts/modules/track-radio-group.js | 14 ++++---- spec/javascripts/track-radio-group.spec.js | 34 +++++++++++++++++-- 2 files changed, 39 insertions(+), 9 deletions(-) diff --git a/app/assets/javascripts/modules/track-radio-group.js b/app/assets/javascripts/modules/track-radio-group.js index d365fae2d..7e31e4fc2 100644 --- a/app/assets/javascripts/modules/track-radio-group.js +++ b/app/assets/javascripts/modules/track-radio-group.js @@ -14,7 +14,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; } function track (element, withHint) { - element.on('submit', function (event) { + element.on('submit', function (event) { var options = { transport: 'beacon' } @@ -30,15 +30,15 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; GOVUK.analytics.trackEvent('Radio button chosen', checkedValue + (withHint ? '-with-hint' : ''), options) - if (typeof element.attr('data-tracking-code') !== 'undefined') { - addCrossDomainTracking(element, $checkedOption, options) + if (typeof $submittedForm.attr('data-tracking-code') !== 'undefined') { + addCrossDomainTracking($submittedForm, $checkedOption, options) } }) } function checkVerifyUser (element) { $.ajax({ - url: 'https://www.signin.service.gov.uk/hint', + url: 'https://www.signin.service.gov.uk/hint', cache: false, dataType: 'jsonp', timeout: 3000 @@ -63,10 +63,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; var name = element.attr('data-tracking-name') var url = $checkedOption.attr('data-tracking-url') var hostname = $('').prop('href', url).prop('hostname') + var eventOptions = $.extend({ 'trackerName': name }, options) - GOVUK.analytics.addLinkedTrackerDomain(code, name, hostname, false) - options['trackerName'] = name - GOVUK.analytics.trackEvent('Radio button chosen', $checkedOption.val(), options) + GOVUK.analytics.addLinkedTrackerDomain(code, name, hostname) + GOVUK.analytics.trackEvent('Radio button chosen', $checkedOption.val(), eventOptions) } } })(window, window.GOVUK); diff --git a/spec/javascripts/track-radio-group.spec.js b/spec/javascripts/track-radio-group.spec.js index dd93f90f5..d0f9769e4 100644 --- a/spec/javascripts/track-radio-group.spec.js +++ b/spec/javascripts/track-radio-group.spec.js @@ -3,7 +3,6 @@ var $ = window.jQuery describe('A radio group tracker', function () { - var GOVUK = window.GOVUK var tracker @@ -11,6 +10,7 @@ describe('A radio group tracker', function () { GOVUK.analytics = GOVUK.analytics || {} GOVUK.analytics.trackEvent = function () {} + GOVUK.analytics.addLinkedTrackerDomain = function () {} beforeEach(function () { spyOn(GOVUK.analytics, 'trackEvent') @@ -80,7 +80,7 @@ describe('A radio group tracker', function () { ) element.find('input[value="govuk-verify"]').trigger('click') element.find('form').trigger('submit') - + expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith( 'Radio button chosen', 'govuk-verify', { transport: 'beacon' } ) @@ -150,4 +150,34 @@ describe('A radio group tracker', function () { 'Radio button chosen', 'submitted-without-choosing', { transport: 'beacon' } ) }) + + describe('cross domain tracking enabled', function () { + var $form, $radioInput + + beforeEach(function () { + spyOn(GOVUK.analytics, 'addLinkedTrackerDomain') + + var $form = element.find('form') + $form.attr('data-tracking-code', 'UA-xxxxxx') + $form.attr('data-tracking-name', 'testTracker') + + var $radioInput = element.find('input[value="government-gateway"]') + $radioInput.attr('data-tracking-url', 'https://test.service.gov.uk') + + $radioInput.trigger('click') + $form.trigger('submit') + }) + + it('adds a linked tracker', function () { + expect(GOVUK.analytics.addLinkedTrackerDomain).toHaveBeenCalledWith( + 'UA-xxxxxx', 'testTracker', 'test.service.gov.uk' + ) + }) + + it('sends an event to the linked tracker', function() { + expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith( + 'Radio button chosen', 'government-gateway', { trackerName: 'testTracker', transport: 'beacon' } + ) + }) + }) }) From 0b5e3bc3b85b846fc4407d1756878bb8b9ec24ac Mon Sep 17 00:00:00 2001 From: Steve Laing Date: Mon, 8 Oct 2018 13:28:09 +0100 Subject: [PATCH 2/2] Include -with-hint event labels Cross domain tracking should behave the same way as normal event tracking so include event labels including the -with-hint prefix for parity. --- .../javascripts/modules/track-radio-group.js | 27 ++++++++++++------- spec/javascripts/track-radio-group.spec.js | 6 +++-- 2 files changed, 21 insertions(+), 12 deletions(-) diff --git a/app/assets/javascripts/modules/track-radio-group.js b/app/assets/javascripts/modules/track-radio-group.js index 7e31e4fc2..4d7cda37d 100644 --- a/app/assets/javascripts/modules/track-radio-group.js +++ b/app/assets/javascripts/modules/track-radio-group.js @@ -22,16 +22,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; var $checkedOption = $submittedForm.find('input:checked') - var checkedValue = $checkedOption.val(); - - if (typeof checkedValue === 'undefined') { - checkedValue = 'submitted-without-choosing' - } - - GOVUK.analytics.trackEvent('Radio button chosen', checkedValue + (withHint ? '-with-hint' : ''), options) + GOVUK.analytics.trackEvent('Radio button chosen', eventTrackingValue($checkedOption, withHint), options) if (typeof $submittedForm.attr('data-tracking-code') !== 'undefined') { - addCrossDomainTracking($submittedForm, $checkedOption, options) + addCrossDomainTracking($submittedForm, $checkedOption, options, withHint) } }) } @@ -58,7 +52,20 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; } } - function addCrossDomainTracking(element, $checkedOption, options) { + function eventTrackingValue(element, withHint) { + var value = element.val() + + if (typeof value === 'undefined') { + value = 'submitted-without-choosing' + } + + if (withHint) { + value += '-with-hint' + } + return value + } + + function addCrossDomainTracking(element, $checkedOption, options, withHint) { var code = element.attr('data-tracking-code') var name = element.attr('data-tracking-name') var url = $checkedOption.attr('data-tracking-url') @@ -66,7 +73,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; var eventOptions = $.extend({ 'trackerName': name }, options) GOVUK.analytics.addLinkedTrackerDomain(code, name, hostname) - GOVUK.analytics.trackEvent('Radio button chosen', $checkedOption.val(), eventOptions) + GOVUK.analytics.trackEvent('Radio button chosen', eventTrackingValue($checkedOption, withHint), eventOptions) } } })(window, window.GOVUK); diff --git a/spec/javascripts/track-radio-group.spec.js b/spec/javascripts/track-radio-group.spec.js index d0f9769e4..a5d221840 100644 --- a/spec/javascripts/track-radio-group.spec.js +++ b/spec/javascripts/track-radio-group.spec.js @@ -155,13 +155,15 @@ describe('A radio group tracker', function () { var $form, $radioInput beforeEach(function () { + tracker.trackVerifyUser(element, { status: 'OK', value: true }) + spyOn(GOVUK.analytics, 'addLinkedTrackerDomain') var $form = element.find('form') $form.attr('data-tracking-code', 'UA-xxxxxx') $form.attr('data-tracking-name', 'testTracker') - var $radioInput = element.find('input[value="government-gateway"]') + var $radioInput = element.find('input[value="govuk-verify"]') $radioInput.attr('data-tracking-url', 'https://test.service.gov.uk') $radioInput.trigger('click') @@ -176,7 +178,7 @@ describe('A radio group tracker', function () { it('sends an event to the linked tracker', function() { expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith( - 'Radio button chosen', 'government-gateway', { trackerName: 'testTracker', transport: 'beacon' } + 'Radio button chosen', 'govuk-verify-with-hint', { trackerName: 'testTracker', transport: 'beacon' } ) }) })