Merge pull request #3399 from webcompat/issue/3398/1

Fixes #3398 - Add analytics event and vurtual page view tracking

webcompat/static/js/lib/issue-wizard-popup.js

@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import $ from "jquery";
+import { sendAnalyticsEvent } from "./wizard/analytics.js";
 
 function Popup() {
   this.init = function () {
@@ -20,6 +21,7 @@ function Popup() {
     modalTriggers.forEach(function (trigger) {
       trigger.addEventListener("click", function (e) {
         e.preventDefault();
+        sendAnalyticsEvent("whatIsCompat", "click");
         var popupTrigger = trigger.dataset.popupTrigger;
         var popupModal = document.querySelector(
           '[data-popup-modal="'.concat(popupTrigger, '"]')

webcompat/static/js/lib/wizard/analytics.js

@@ -2,8 +2,28 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-export const sendAnalytics = (data) => {
+export const sendAnalyticsCS = (campaign, source) => {
+  if (window.ga && campaign && source) {
+    ga("set", {
+      campaignName: campaign,
+      campaignSource: source,
+    });
+  }
+};
+
+const sendAnalyticsVpv = (label) => {
+  ga("set", "page", `/vpv-${label}`);
+  ga("send", "pageview");
+};
+
+export const sendAnalyticsEvent = (label, action = "step") => {
   if (window.ga) {
-    ga("set", data);
+    ga("send", "event", {
+      eventCategory: "wizard",
+      eventAction: action,
+      eventLabel: label,
+    });
+
+    sendAnalyticsVpv(label);
   }
 };

webcompat/static/js/lib/wizard/helpers/postMessageParser.js

@@ -5,29 +5,20 @@
 import notify from "../notify.js";
 import { isSelfReport, convertToDataURI } from "../utils.js";
 import { blobOrFileTypeValid, isImageDataURIValid } from "../validation.js";
-import { sendAnalytics } from "../analytics.js";
+import { sendAnalyticsCS } from "../analytics.js";
 
 const updateStep = (id, data) => notify.publish("updateStep", { id, data });
 const updateUrl = (url) => updateStep("url", { url });
 const updateHidden = (data) => updateStep("hidden", { data });
 const updateScreenshot = (dataURI) => updateStep("screenshot", { dataURI });
 
-const setAnalytics = (campaign, source) => {
-  if (campaign && source) {
-    sendAnalytics({
-      campaignName: campaign,
-      campaignSource: source,
-    });
-  }
-};
-
 const handleMessage = (message) => {
   if (!message) return;
   const { url, utm_campaign, utm_source, ...additional } = message;
 
   updateUrl(url);
   updateHidden(additional);
-  setAnalytics(utm_campaign, utm_source);
+  sendAnalyticsCS(utm_campaign, utm_source);
 };
 
 const handleScreenshot = (screenshot) => {

webcompat/static/js/lib/wizard/stepper.js

@@ -4,6 +4,7 @@
 
 import notify from "./notify.js";
 import { STEPS } from "./steps/index.js";
+import { sendAnalyticsEvent } from "./analytics.js";
 
 const hideStep = (id) => {
   STEPS[id].module.hide();
@@ -13,6 +14,7 @@ const showStep = (message) => {
   const { id, data } = message;
   const step = STEPS[id];
   step.module.show(data);
+  sendAnalyticsEvent(id);
 };
 
 const updateStep = (message) => {

webcompat/static/js/lib/wizard/steps/submit.js

@@ -12,6 +12,7 @@ import { isGithubUserNameValid } from "../validation.js";
 import { uploadConsoleLogs } from "./upload-helper/console-logs-upload.js";
 import { uploadImage } from "./upload-helper/image-upload.js";
 import { showError, hideError } from "../ui-utils.js";
+import { sendAnalyticsEvent } from "../analytics.js";
 
 const GITHUB_USERNAME_ERROR =
   "GitHub nicknames are 39 characters max, alphanumeric and hyphens only.";
@@ -52,6 +53,8 @@ const submitForm = function () {
   const dfd = $.Deferred();
   const formEl = form.get(0);
 
+  sendAnalyticsEvent("success", "end");
+
   formEl.submit();
   dfd.resolve();
   return dfd.promise();

webcompat/static/js/lib/wizard/steps/url.js

@@ -10,6 +10,7 @@ import notify from "../notify.js";
 import { isUrlValid } from "../validation.js";
 import { extractPrettyUrl } from "../utils.js";
 import { showError, showSuccess, hideSuccess } from "../ui-utils.js";
+import { sendAnalyticsEvent } from "../analytics.js";
 
 const urlField = $("#url");
 const nextStepButton = $(".next-url");
@@ -42,11 +43,15 @@ const onBlur = (value) => {
   handleEvent(value, () => showError(urlField, "A valid URL is required."));
 };
 
-urlField.on("input", (event) => onChange(event.target.value));
-urlField.on("blur", (event) => onBlur(event.target.value));
-nextStepButton.on("click", onClick);
+const initListeners = () => {
+  urlField.on("input", (event) => onChange(event.target.value));
+  urlField.on("blur", (event) => onBlur(event.target.value));
+  nextStepButton.on("click", onClick);
+  urlField.trigger("input");
+};
 
-urlField.trigger("input");
+initListeners();
+sendAnalyticsEvent("url", "start");
 
 export default {
   update: ({ url }) => {