Merge pull request #2197 from alphagov/track-basic-view

Track onboarding of basic view in Google Analytics

app/assets/javascripts/analytics.js

@@ -0,0 +1,56 @@
+let stripUUIDs = string => string.replace(
+  /[a-f0-9]{8}-?[a-f0-9]{4}-?4[a-f0-9]{3}-?[89ab][a-f0-9]{3}-?[a-f0-9]{12}/g, '…'
+);
+
+(function(Modules) {
+  "use strict";
+
+  function sendEvent(category, action, label) {
+
+    if (!ga) return;
+    ga('send', 'event', category, action, label);
+
+  }
+
+  function sendVirtualPageView(path) {
+
+    if (!ga) return;
+    ga('send', 'pageview', stripUUIDs('/virtual' + path));
+
+  }
+
+  Modules.TrackError = function() {
+
+    this.start = component => sendEvent(
+      'Error',
+      $(component).data('error-type'),
+      $(component).data('error-label')
+    );
+
+  };
+
+  Modules.TrackEvent = function() {
+
+    this.start = component => sendEvent(
+      $(component).data('event-category'),
+      $(component).data('event-action'),
+      $(component).data('event-label')
+    );
+
+  };
+
+  Modules.TrackFormSubmission = function() {
+
+    this.start = component => {
+
+      $(component).on('submit', function() {
+
+        let formData = $('input[name!=csrf_token]', this).serialize();
+        sendVirtualPageView(window.location.pathname + '?' + formData);
+
+      });
+    };
+
+  };
+
+})(window.GOVUK.Modules);

app/assets/javascripts/errorTracking.js

@@ -1,22 +0,0 @@
-(function(Modules) {
-  "use strict";
-
-  Modules.TrackError = function() {
-
-    this.start = function(component) {
-
-      if (!ga) return;
-
-      ga(
-        'send',
-        'event',
-        'Error',
-        $(component).data('error-type'),
-        $(component).data('error-label')
-      );
-
-    };
-
-  };
-
-})(window.GOVUK.Modules);

app/templates/admin_template.html

@@ -128,10 +128,7 @@
     ga('set', 'anonymizeIp', true);
     ga('set', 'displayFeaturesTask', null);
     ga('set', 'transport', 'beacon');
-    // strip UUIDs
+    page = window.location.pathname + window.location.search;
-    page = (window.location.pathname + window.location.search).replace(
+    ga('send', 'pageview', stripUUIDs(page));
-      /[a-f0-9]{8}-?[a-f0-9]{4}-?4[a-f0-9]{3}-?[89ab][a-f0-9]{3}-?[a-f0-9]{12}/g, '…'
-    )
-    ga('send', 'pageview', page);
   </script>
 {% endblock %}

app/templates/views/service-settings/set-basic-view.html

@@ -9,7 +9,11 @@
 {% block maincolumn_content %}
 
   <div class="grid-row">
-    <form method="post" class="column-five-sixths">
+    <form
+      method="post"
+      class="column-five-sixths"
+      data-module="track-form-submission"
+    >
       <h1 class="heading-large">Basic view</h1>
       <p>
         Basic view lets you restrict a team member to only:

app/templates/withnav_template.html

@@ -10,7 +10,13 @@
       <div class="navigation-service-name">
         {{ current_service.name }}
         {% if current_user.previewing_basic_view %}
-          <span class="navigation-service-basic-view-preview">Preview of basic view</span>
+          <span
+            class="navigation-service-basic-view-preview"
+            data-module="track-event"
+            data-event-category="basic-view"
+            data-error-action="preview"
+            data-error-label="{{ current_service.id }}"
+          >Preview of basic view</span>
           <a class="navigation-service-basic-view-back-link" href="{{ url_for('main.service_set_basic_view', service_id=current_service.id)}}">Back to settings</a>
         {% endif %}
       </div>

gulpfile.babel.js

@@ -70,7 +70,7 @@ gulp.task('javascripts', () => gulp
     paths.src + 'javascripts/updateContent.js',
     paths.src + 'javascripts/listEntry.js',
     paths.src + 'javascripts/liveSearch.js',
-    paths.src + 'javascripts/errorTracking.js',
+    paths.src + 'javascripts/analytics.js',
     paths.src + 'javascripts/preventDuplicateFormSubmissions.js',
     paths.src + 'javascripts/fullscreenTable.js',
     paths.src + 'javascripts/conditionalRadios.js',