Track virtual page view when enabling basic view

So we can see what pages people go to after turning it on.

app/assets/javascripts/analytics.js

@@ -1,14 +1,24 @@
+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";
 
-  if (!ga) return;
-
   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(
@@ -29,4 +39,18 @@
 
   };
 
+  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/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).replace(
-      /[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);
+    page = window.location.pathname + window.location.search;
+    ga('send', 'pageview', stripUUIDs(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: