diff --git a/app/assets/javascripts/modules/track-radio-group.js b/app/assets/javascripts/modules/track-radio-group.js index 760bd2ca1..d58f56638 100644 --- a/app/assets/javascripts/modules/track-radio-group.js +++ b/app/assets/javascripts/modules/track-radio-group.js @@ -8,21 +8,45 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; GOVUK.Modules.TrackRadioGroup = function () { this.start = function (element) { - element.on('submit', function (event) { + track(element) + + checkVerifyUser(element) + } + + function track (element, withHint) { + element.on('submit', function (event) { + var options = { transport: 'beacon' } var $submittedForm = $(event.target) var $checkedOption = $submittedForm.find('input:checked') - var checkedValue = $checkedOption.val() + var checkedValue = $checkedOption.val(); if (typeof checkedValue === 'undefined') { checkedValue = 'submitted-without-choosing' } - - GOVUK.analytics.trackEvent('Radio button chosen', checkedValue, options) + GOVUK.analytics.trackEvent('Radio button chosen', checkedValue + (withHint ? '-with-hint' : ''), options) }) } + + function checkVerifyUser (element) { + $.ajax({ + url: 'https://www.signin.service.gov.uk/hint', + cache: false, + dataType: 'jsonp', + timeout: 3000 + }).then(function(data){ + GOVUK.Modules.TrackRadioGroup.trackVerifyUser(element, data); + }, function(e){console.log("error", e)}) + } + + this.trackVerifyUser = function (element, data) { + if (data != null && data.value === true) { + GOVUK.analytics.trackEvent('verify-hint', 'shown', { transport: 'beacon'}); + track(element, data.value); + } + } } -})(window, window.GOVUK) +})(window, window.GOVUK); diff --git a/spec/javascripts/track-radio-group.spec.js b/spec/javascripts/track-radio-group.spec.js index 95fc5ad33..dd93f90f5 100644 --- a/spec/javascripts/track-radio-group.spec.js +++ b/spec/javascripts/track-radio-group.spec.js @@ -3,7 +3,7 @@ var $ = window.jQuery describe('A radio group tracker', function () { - 'use strict' + var GOVUK = window.GOVUK var tracker @@ -20,7 +20,7 @@ describe('A radio group tracker', function () { '
' + '' + '' + - '' + + '' + '' + '
' + '' @@ -30,6 +30,7 @@ describe('A radio group tracker', function () { tracker.start(element) }) + it('tracks government-gateway checked radio when clicking submit', function () { element.find('input[value="government-gateway"]').trigger('click') element.find('form').trigger('submit') @@ -46,7 +47,101 @@ describe('A radio group tracker', function () { expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith( 'Radio button chosen', 'govuk-verify', { transport: 'beacon' } ) - }) + }); + + it('tracks govuk-verify-with-hint event when clicking submit if user has visited verify', function () { + var data = { + status: 'OK', + value: true + } + tracker.trackVerifyUser(element, data) + element.find('input[value="govuk-verify"]').trigger('click') + element.find('form').trigger('submit') + + expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith( + 'verify-hint', 'shown', { transport: 'beacon' } + ) + expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith( + 'Radio button chosen', 'govuk-verify', { transport: 'beacon' } + ) + expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith( + 'Radio button chosen', 'govuk-verify-with-hint', { transport: 'beacon' } + ) + }); + + it('does not track govuk-verify-with-hint event when clicking submit if user has not visited verify', function () { + var data = { + status: 'OK', + value: false + } + tracker.trackVerifyUser(element, data) + expect(GOVUK.analytics.trackEvent).not.toHaveBeenCalledWith( + 'verify-hint', 'shown', { transport: 'beacon' } + ) + 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' } + ) + expect(GOVUK.analytics.trackEvent).not.toHaveBeenCalledWith( + 'Radio button chosen', 'govuk-verify-with-hint', { transport: 'beacon' } + ) + }); + + it('does not track govuk-verify-with-hint event when clicking submit if verify value is not boolean', function () { + var data = { + status: 'OK', + value: 'bar' + } + tracker.trackVerifyUser(element, data) + element.find('input[value="govuk-verify"]').trigger('click') + element.find('form').trigger('submit') + + expect(GOVUK.analytics.trackEvent).not.toHaveBeenCalledWith( + 'verify-hint', 'shown', { transport: 'beacon' } + ) + expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith( + 'Radio button chosen', 'govuk-verify', { transport: 'beacon' } + ) + expect(GOVUK.analytics.trackEvent).not.toHaveBeenCalledWith( + 'Radio button chosen', 'govuk-verify-with-hint', { transport: 'beacon' } + ) + }); + + it('does not track govuk-verify-with-hint event when clicking submit if verify response is null', function () { + var data = null + tracker.trackVerifyUser(element, data) + element.find('input[value="govuk-verify"]').trigger('click') + element.find('form').trigger('submit') + + expect(GOVUK.analytics.trackEvent).not.toHaveBeenCalledWith( + 'verify-hint', 'shown', { transport: 'beacon' } + ) + expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith( + 'Radio button chosen', 'govuk-verify', { transport: 'beacon' } + ) + expect(GOVUK.analytics.trackEvent).not.toHaveBeenCalledWith( + 'Radio button chosen', 'govuk-verify-with-hint', { transport: 'beacon' } + ) + }); + + it('does not track govuk-verify-with-hint event when clicking submit if verify response is not an object', function () { + var data = 'string' + tracker.trackVerifyUser(element, data) + element.find('input[value="govuk-verify"]').trigger('click') + element.find('form').trigger('submit') + + expect(GOVUK.analytics.trackEvent).not.toHaveBeenCalledWith( + 'verify-hint', 'shown', { transport: 'beacon' } + ) + expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith( + 'Radio button chosen', 'govuk-verify', { transport: 'beacon' } + ) + expect(GOVUK.analytics.trackEvent).not.toHaveBeenCalledWith( + 'Radio button chosen', 'govuk-verify-with-hint', { transport: 'beacon' } + ) + }); it('tracks no choice when clicking submit and checked nothing', function () { element.find('form').trigger('submit')