Fix #653 - Instrument Thimble, add custom GA Events for user actions

Gruntfile.js

@@ -35,7 +35,8 @@ module.exports = function( grunt ) {
             "project": "../../project/project",
             "PathCache": "../../path-cache",
             "constants": "../../constants",
-            "EventEmitter": "../../../../../bower_components/eventEmitter/EventEmitter.min"
+            "EventEmitter": "../../../../../bower_components/eventEmitter/EventEmitter.min",
+            "analytics": "../../../../../bower_components/webmaker-analytics/analytics"
           },
           shim: {
             "jquery": {

bower.json

@@ -5,7 +5,8 @@
     "jquery": "http://code.jquery.com/jquery-2.1.4.min.js",
     "cookies-js": "~1.2.1",
     "node-uuid": "~1.4.3",
-    "webmaker-i18n": "https://github.com/mozilla/node-webmaker-i18n/archive/v0.3.8.tar.gz"
+    "webmaker-i18n": "https://github.com/mozilla/node-webmaker-i18n/archive/v0.3.8.tar.gz",
+    "webmaker-analytics": "~0.1.5"
   },
   "version": "1.0.94"
 }

public/editor/scripts/editor/js/fc/bramble-menus.js

@@ -2,6 +2,7 @@ define(function(require) {
 
   var $ = require("jquery");
   var PopupMenu = require("fc/bramble-popupmenu");
+  var analytics = require("analytics");
 
   function setupUserMenu() {
     PopupMenu.create("#navbar-logged-in li", "#navbar-logged-in li ul.dropdown");
@@ -13,11 +14,17 @@ define(function(require) {
 
     // Font size
     $("#editor-pane-nav-decrease-font").click(function() {
-      bramble.decreaseFontSize();
+      bramble.decreaseFontSize(function() {
+        var fontSize = bramble.getFontSize();
+        analytics.event("DecreaseFontSize", {label: "Decreased font size to " + fontSize});
+      });
     });
 
     $("#editor-pane-nav-increase-font").click(function() {
-      bramble.increaseFontSize();
+      bramble.increaseFontSize(function() {
+        var fontSize = bramble.getFontSize();
+        analytics.event("IncreaseFontSize", {label: "Increased font size to " + fontSize});
+      });
     });
 
 
@@ -30,8 +37,10 @@ define(function(require) {
       }
     }
     function setWordWrap(value) {
-      bramble[value ? "enableWordWrap" : "disableWordWrap"](function() {
+      var method = value ? "enableWordWrap" : "disableWordWrap";
+      bramble[method](function() {
         setWordWrapUI(value);
+        analytics.event(method);
       });
     }
     $("#line-wrap-toggle").click(function() {
@@ -52,9 +61,11 @@ define(function(require) {
       if(toggle) {
         $allowScriptsToggle.addClass("switch-enabled");
         bramble.enableJavaScript();
+        analytics.event("EnableJavaScript");
       } else {
         $allowScriptsToggle.removeClass("switch-enabled");
         bramble.disableJavaScript();
+        analytics.event("DisableJavaScript");
       }
 
       return false;
@@ -94,9 +105,11 @@ define(function(require) {
       if(theme === "light-theme") {
         bramble.useLightTheme();
         lightThemeUI();
+        analytics.event("LightTheme");
       } else if(theme === "dark-theme") {
         bramble.useDarkTheme();
         darkThemeUI();
+        analytics.event("DarkTheme");
       }
     }
     function toggleTheme() {
@@ -163,6 +176,7 @@ define(function(require) {
         if (err) {
           console.log("[Brackets] Failed to insert default HTML file", err);
         }
+        analytics.event("AddHTMLFile");
       });
     });
     $addCss.click(function() {
@@ -174,6 +188,7 @@ define(function(require) {
         if (err) {
           console.log("[Brackets] Failed to insert default CSS file", err);
         }
+        analytics.event("AddCSSFile");
       });
     });
     $addJs.click(function() {
@@ -185,19 +200,22 @@ define(function(require) {
         if (err) {
           console.log("[Brackets] Failed to insert default JS file", err);
         }
+        analytics.event("AddJSFile");
       });
     });
     $addTutorial.click(function() {
       downloadFileToFilesystem("/tutorial/tutorial.html", {filename: "tutorial.html"}, function(err) {
         if (err) {
           console.log("[Brackets] Failed to insert tutorial.html", err);
         }
+        analytics.event('AddTutorial');
       });
     });
 
     $addUpload.click(function() {
       menu.close();
       bramble.showUploadFilesDialog();
+      analytics.event("ShowUploadFilesDialog");
     });
 
     // We hide the add tutorial button if a tutorial exists

public/editor/scripts/editor/js/fc/bramble-ui-bridge.js

@@ -6,6 +6,7 @@ define(function(require) {
   var Underlay = require("fc/bramble-underlay");
   var FileSystemSync = require("fc/filesystem-sync");
   var Project = require("project");
+  var analytics = require("analytics");
 
   var _escKeyHandler;
 
@@ -28,8 +29,7 @@ define(function(require) {
     function checkIfMultiFile() {
       var data = bramble.getLayout();
 
-      if(data.sidebarWidth > 0)
-      {
+      if(data.sidebarWidth > 0) {
         // Total width of window
         var total = data.sidebarWidth + data.firstPaneWidth + data.secondPaneWidth;
 
@@ -54,6 +54,8 @@ define(function(require) {
       e.preventDefault();
       e.stopPropagation();
 
+      analytics.event("NewProject", {label: "New authenticated project"});
+
       var queryString = window.location.search;
       var cacheBust = "cacheBust=" + Date.now();
       queryString = queryString === "" ? "?" + cacheBust : queryString + "&" + cacheBust;
@@ -67,6 +69,8 @@ define(function(require) {
         return false;
       }
 
+      analytics.event("DeleteProject");
+
       var request = $.ajax({
         headers: {
           "X-Csrf-Token": $("meta[name='csrf-token']").attr("content")
@@ -89,6 +93,7 @@ define(function(require) {
 
     $("#export-project-zip").click(function() {
       bramble.export();
+      analytics.event("ExportZip");
       return false;
     });
 
@@ -113,16 +118,19 @@ define(function(require) {
     // Undo
     $("#editor-pane-nav-undo").click(function() {
       bramble.undo();
+      analytics.event("Undo");
     });
 
     // Redo
     $("#editor-pane-nav-redo").click(function() {
       bramble.redo();
+      analytics.event("Redo");
     });
 
     // Refresh Preview
     $("#preview-pane-nav-refresh").click(function() {
       bramble.refreshPreview();
+      analytics.event("RefreshPreview");
     });
 
 
@@ -145,11 +153,15 @@ define(function(require) {
     function setNormalPreview() {
       $("#tutorial-title").removeClass("preview-title-highlighted");
       $("#preview-title").addClass("preview-title-highlighted");
+
+      analytics.event("NormalPreview", {label: "User switched to normal preview mode vs. tutorial"});
     }
 
     function setTutorialPreview() {
       $("#preview-title").removeClass("preview-title-highlighted");
       $("#tutorial-title").addClass("preview-title-highlighted");
+
+      analytics.event("TutorialPreview", {label: "User switched to tutorial mode vs. preview"});
     }
 
     // User change to tutorial vs. regular preview mode
@@ -195,15 +207,18 @@ define(function(require) {
 
         $("#preview-pane-nav-desktop").removeClass("viewmode-active");
         $("#preview-pane-nav-desktop").addClass("viewmode-inactive");
-      }
-      else if (mode === "desktop") {
+
+        analytics.event("MobilePreview");
+      } else if (mode === "desktop") {
         bramble.useDesktopPreview();
 
         $("#preview-pane-nav-desktop").removeClass("viewmode-inactive");
         $("#preview-pane-nav-desktop").addClass("viewmode-active");
 
         $("#preview-pane-nav-phone").removeClass("viewmode-active");
         $("#preview-pane-nav-phone").addClass("viewmode-inactive");
+
+        analytics.event("DesktopPreview");
       }
     }
 
@@ -231,6 +246,8 @@ define(function(require) {
           return;
         }
       });
+
+      analytics.event("Publish");
     }
 
     function showPublishHelper() {
@@ -265,30 +282,24 @@ define(function(require) {
     // Hook up event listeners
     bramble.on("layout", updateLayout);
 
-    bramble.on("previewModeChange", function(data) {
-      console.log("thimble side", "previewModeChange", data);
-    });
-
     bramble.on("sidebarChange", function(data) {
-      console.log("thimble side", "sidebarChange", data);
-
       // Open/close filetree nav during hidden double click
-      if(data.visible === true)
-      {
+      if(data.visible) {
         $("#editor-pane-nav-options-menu").hide();
         $("#editor-pane-nav-fileview").css("display", "none");
         $(".filetree-pane-nav").css("display", "block");
-      }
-      else if(data.visible === false)
-      {
+
+        analytics.event("ShowSidebar");
+      } else {
         $("#editor-pane-nav-options-menu").hide();
         $("#editor-pane-nav-fileview").css("display", "block");
         $(".filetree-pane-nav").css("display", "none");
+
+        analytics.event("HideSidebar");
       }
     });
 
     bramble.on("activeEditorChange", function(data) {
-      console.log("thimble side", "activeEditorChange", data);
       setNavFilename(data.filename);
     });
 

public/editor/scripts/editor/js/fc/project-rename.js

@@ -3,6 +3,7 @@ define(function(require) {
   var InputField = require("fc/bramble-input-field");
   var KeyHandler = require("fc/bramble-keyhandler");
   var Project = require("project");
+  var analytics = require("analytics");
   var AJAX_DEFAULT_TIMEOUT_MS = require("constants").AJAX_DEFAULT_TIMEOUT_MS;
 
   function toggleComponents(context, isSave) {
@@ -128,6 +129,7 @@ define(function(require) {
           return;
         }
         editingComplete(context);
+        analytics.event("ProjectRenamed");
       });
     });
   }

public/editor/scripts/google-analytics.js

@@ -1,9 +1,11 @@
-var ga_account = document.getElementById("google-analytics-js").getAttribute("data-ga-account");
+(function(window, document) {
+  var ga_account = document.getElementById("google-analytics-js").getAttribute("data-ga-account");
 
-(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
-ga('create', ga_account, 'auto');
-ga('send', 'pageview');
+  ga('create', ga_account, 'auto');
+  ga('send', 'pageview');
+}(window, document));

public/editor/scripts/main.js

@@ -13,7 +13,8 @@ require.config({
     "project": "../../project/project",
     "PathCache": "../../path-cache",
     "constants": "../../constants",
-    "EventEmitter": "/bower/eventEmitter/EventEmitter.min"
+    "EventEmitter": "/bower/eventEmitter/EventEmitter.min",
+    "analytics": "/bower/webmaker-analytics/analytics"
   },
   shim: {
     "jquery": {

public/editor/scripts/open-project.js

@@ -1,7 +1,8 @@
 require.config({
   waitSeconds: 120,
   paths: {
-    "jquery": "/bower/jquery/index"
+    "jquery": "/bower/jquery/index",
+    "analytics": "/bower/webmaker-analytics/analytics"
   },
   shim: {
     "jquery": {
@@ -10,7 +11,7 @@ require.config({
   }
 });
 
-require(["jquery", "constants"], function($, Constants) {
+require(["jquery", "constants", "analytics"], function($, Constants, analytics) {
   var projects = document.querySelectorAll("tr.bramble-user-project");
   var username = encodeURIComponent($("#project-list").attr("data-username"));
   var queryString = window.location.search;
@@ -54,6 +55,8 @@ require(["jquery", "constants"], function($, Constants) {
   });
 
   $("#project-0").one("click", function() {
+    analytics.event("NewProject", {label: "New authenticated project"});
+
     $("#project-0").text("Creating...");
     window.location.href = "/projects/new" + queryString + (queryString === "" ? "?" : "&") +  "cacheBust=" + Date.now();
   });
@@ -69,6 +72,8 @@ require(["jquery", "constants"], function($, Constants) {
     var projectElementId = project.attr("id");
     $("#" + projectElementId + " > .project-title").off("click");
 
+    analytics.event("DeleteProject");
+
     var request = $.ajax({
       headers: {
         "X-Csrf-Token": $("meta[name='csrf-token']").attr("content")

public/homepage/scripts/google-analytics.js

@@ -1,9 +1,11 @@
-var ga_account = document.getElementById("google-analytics-js").getAttribute("data-ga-account");
+(function(window, document) {
+  var ga_account = document.getElementById("google-analytics-js").getAttribute("data-ga-account");
 
-(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
-ga('create', ga_account, 'auto');
-ga('send', 'pageview');
+  ga('create', ga_account, 'auto');
+  ga('send', 'pageview');
+}(window, document));