Track pageviews on module load

In order to emulate the default ga tracking behaviour the cross domain pageview should be sent when the module is started. The cross domain event should be sent when the form is submitted.
alphagov · Oct 15, 2018 · 8b4b06f · 8b4b06f
1 parent abf7cb2
commit 8b4b06f
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 17 deletions.
diff --git a/app/assets/javascripts/modules/track-radio-group.js b/app/assets/javascripts/modules/track-radio-group.js
@@ -10,6 +10,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.start = function (element) {
       track(element)
 
+      if (crossDomainTrackingEnabled(element)) {
+        addCrossDomainTracking(element)
+      }
+
       checkVerifyUser(element)
     }
 
@@ -22,10 +26,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
         var $checkedOption = $submittedForm.find('input:checked')
 
-        GOVUK.analytics.trackEvent('Radio button chosen', eventTrackingValue($checkedOption, withHint), options)
+        var eventValue = eventTrackingValue($checkedOption, withHint)
 
-        if (typeof $submittedForm.attr('data-tracking-code') !== 'undefined') {
-          addCrossDomainTracking($submittedForm, $checkedOption, options, withHint)
+        GOVUK.analytics.trackEvent('Radio button chosen', eventValue, options)
+
+        if (crossDomainTrackingEnabled($submittedForm)) {
+          trackCrossDomainEvent($submittedForm, eventValue, options)
         }
       })
     }
@@ -65,15 +71,26 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       return value
     }
 
-    function addCrossDomainTracking(element, $checkedOption, options, withHint) {
-      var code = element.attr('data-tracking-code')
+    function addCrossDomainTracking(element) {
+      var code =   element.attr('data-tracking-code')
+      var domain = element.attr('data-tracking-domain')
+      var name =   element.attr('data-tracking-name')
+
+      GOVUK.analytics.addLinkedTrackerDomain(code, name, domain)
+    }
+
+    function trackCrossDomainEvent(element, eventValue, options) {
       var name = element.attr('data-tracking-name')
-      var url = $checkedOption.attr('data-tracking-url')
-      var hostname = $('<a>').prop('href', url).prop('hostname')
       var eventOptions = $.extend({ 'trackerName': name }, options)
+      GOVUK.analytics.trackEvent('Radio button chosen', eventValue, eventOptions)
+    }
 
-      GOVUK.analytics.addLinkedTrackerDomain(code, name, hostname)
-      GOVUK.analytics.trackEvent('Radio button chosen', eventTrackingValue($checkedOption, withHint), eventOptions)
+    function crossDomainTrackingEnabled(element) {
+      return (
+        typeof element.attr('data-tracking-code')   !== 'undefined' &&
+        typeof element.attr('data-tracking-domain') !== 'undefined' &&
+        typeof element.attr('data-tracking-name')   !== 'undefined'
+      )
     }
   }
 })(window, window.GOVUK);
diff --git a/spec/javascripts/track-radio-group.spec.js b/spec/javascripts/track-radio-group.spec.js
@@ -159,24 +159,25 @@ describe('A radio group tracker', function () {
 
       spyOn(GOVUK.analytics, 'addLinkedTrackerDomain')
 
-      var $form = element.find('form')
+      $form = element.find('form')
       $form.attr('data-tracking-code', 'UA-xxxxxx')
+      $form.attr('data-tracking-domain', 'test.service.gov.uk')
       $form.attr('data-tracking-name', 'testTracker')
 
-      var $radioInput = element.find('input[value="govuk-verify"]')
-      $radioInput.attr('data-tracking-url', 'https://test.service.gov.uk')
-
-      $radioInput.trigger('click')
-      $form.trigger('submit')
+      tracker = new GOVUK.Modules.TrackRadioGroup()
+      tracker.start($form)
     })
 
-    it('adds a linked tracker', function () {
+    it('adds a linked tracker as the module is started', function () {
       expect(GOVUK.analytics.addLinkedTrackerDomain).toHaveBeenCalledWith(
         'UA-xxxxxx', 'testTracker', 'test.service.gov.uk'
       )
     })
 
-    it('sends an event to the linked tracker', function() {
+    it('sends an event to the linked tracker when the form is submitted', function() {
+      $form.find('input[value="govuk-verify"]').trigger('click')
+      $form.trigger('submit')
+
       expect(GOVUK.analytics.trackEvent).toHaveBeenCalledWith(
         'Radio button chosen', 'govuk-verify-with-hint', { trackerName: 'testTracker', transport: 'beacon' }
       )