Merge pull request LockerProject#938 from LockerProject/analytics

Switch to Google Analytics and adding custom GA events for tracking devs and users

Apps/dashboardv3/static/js/apiexplorer.js

@@ -7,6 +7,10 @@ $(function() {
   $("#testButton").click(function(e) {
     var path = curAPI.path;
     console.log("Start path " + path);
+
+    // log the event to google analytics
+    window.parent._gaq.push(['_trackEvent', 'Locker', 'Run API Explorer', curAPI.path]);
+
     var queryParams = "";
     if (curAPI.operations[0].parameters) {
       $.each(curAPI.operations[0].parameters, function(key, val) {
@@ -52,7 +56,7 @@ $(function() {
       $(".prettyprint").show();
       $("#testResultImage").hide();
       $.getJSON(path, function(testData) {
-        console.log("Full length is " + testData.length)
+        console.log("Full length is " + testData.length);
         var hasMore = false;
         if (testData.length && testData.length > 20) {
 
@@ -185,7 +189,7 @@ $(function() {
     });
     $.each(data.apis, function(key, value) {
       var path = data.apis[key].path;
-      $("<option>", {value:path}).text(path).data(value).appendTo($("#curMethod"))
+      $("<option>", {value:path}).text(path).data(value).appendTo($("#curMethod"));
     });
     $.each(data.models, function(key, value) {
       models[value.name] = value;
@@ -194,6 +198,7 @@ $(function() {
   });
 });
 
+window.parent._gaq.push(['_trackEvent', 'Locker', 'View API Explorer']);
 
 $.ajaxSetup({
     xhrFields: {

Apps/dashboardv3/static/js/connect.js

@@ -1,7 +1,14 @@
 $(function() {
   setUpWelcome();
   initLearnMore();
-  $('body').delegate('.oauthLink','click', Locker.connectService);
+
+  $('body').delegate('.oauthLink','click', function(evt) {
+    // Google custom event for tracking when new services are created
+    var provider = $(evt.currentTarget).data('provider');
+    window.parent._gaq.push(['_trackEvent', 'Locker', 'Add Service', provider]);
+    Locker.connectService(evt);
+  });
+
   $('#start-exploring-link').click(function(e) {
     e.preventDefault();
     parent.window.location.replace('/');

Apps/dashboardv3/static/js/dashboard.js

@@ -6,6 +6,7 @@ var specialApps = {
 };
 var defaultSubSections = {};
 var loggedIn = true;
+var _gaq = _gaq || [];
 
 $(document).ready(function() {
     $.history.init(function(hash){
@@ -22,9 +23,16 @@ $(document).ready(function() {
         return false;
     });
 
-    $('body').delegate('.oauthLink','click', Locker.connectService);
+    $('.unconnected-services').delegate('.oauthLink','click', function(evt) {
+      // Google custom event for tracking when new services are created
+      window.parent._gaq.push(['_trackEvent', 'Locker', 'Add Service', $(evt.currentTarget).data('provider')]);
+      Locker.connectService(evt);
+    });
+
     $('body').delegate('.sync-button', 'click', function(evt) {
       evt.preventDefault();
+      // Google custom event for syncing github
+      _gaq.push(['_trackEvent', 'Locker', 'Sync Github']);
       var button = $(this);
       var provider = button.data('provider');
       if (button.hasClass('disabled')) return;

Apps/dashboardv3/static/js/ga.js

@@ -1,22 +1,16 @@
-var _kmq = _kmq || [];
-function _kms(u) {
-    setTimeout(function(){
-      var s = document.createElement('script'); var f = document.getElementsByTagName('script')[0]; s.type = 'text/javascript'; s.async = true;
-      s.src = u; f.parentNode.insertBefore(s, f);
-    }, 1);
-}
-_kms('//i.kissmetrics.com/i.js');
-if (document.location.hostname === 'singly.com' || document.location.hostname === 'me.singly.com') {
-  _kms('//doug1izaerwt3.cloudfront.net/de62fe44ea949f4bf216353f81377c37cfcc90dd.1.js');
+var _gaq = _gaq || [];
+
+if (document.location.hostname === 'singly.com') {
+  _gaq.push(['_setAccount', 'UA-22812443-1']);
+  _gaq.push(['_trackPageview']);
 } else {
-  _kms('//doug1izaerwt3.cloudfront.net/09be6bff5c8937e342f601bae6ee004e1e7aab1e.1.js');
+  _gaq.push(['_setAccount', 'UA-22812443-3']);
 }
 
-var _gaq = [['_setAccount', 'UA-22812443-1'], ['_trackPageview']];
 (function(d, t) {
  var g = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
  g.async = true;
  g.src = '//www.google-analytics.com/ga.js';
  s.parentNode.insertBefore(g, s);
-})(document, 'script');
+})(document, 'script');

Apps/dashboardv3/static/js/locker.js

@@ -1,12 +1,14 @@
 Locker = (function() {
   function connectService(evt) {
     evt.preventDefault();
+    var $el = $(evt.currentTarget);
     var options =
-      'width='   + $(this).data('width')  +
-      ',height=' + $(this).data('height') +
+      'width='   + $el.data('width')  +
+      ',height=' + $el.data('height') +
       ',status=no,scrollbars=no,resizable=no';
-    var popup = window.open('/auth/' + $(this).data('provider'),
+    var popup = window.open('/auth/' + $el.data('provider'),
                             'account', options);
+    // create a ga event for adding a new service
     popup.focus();
     return false;
   }

Apps/dashboardv3/static/js/settings.js

@@ -39,7 +39,11 @@ $(function () {
     });
   });
 
-  $('body').delegate('.oauthLink','click', Locker.connectService);
+  $('.synclets-list').delegate('.oauthLink','click', function(evt) {
+    // Google custom event for tracking when new services are created
+    window.parent._gaq.push(['_trackEvent', 'Locker', 'Add Service', $(evt.currentTarget).data('provider')]);
+    Locker.connectService(evt);
+  });
 
   $('body').delegate('input[name=optout]', 'click', function (e) {
     $('#settings_analytics').addClass('hidden');

Apps/dashboardv3/views/header_partial.ejs

@@ -8,4 +8,9 @@
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 <script src="js/jquery.cookie.js"></script>
 <script src='common/js/jquery.history.js'></script>
+
+<% if (dashboard && dashboard.customHostedEndpoint) { %>
+  <script src="js/hosted.js"></script>
+<% } %>
+
 <script src="js/locker.js"></script>

Apps/dashboardv3/views/iframe/publish.ejs

@@ -8,6 +8,10 @@ var hasError = false;
     <%- partial('header_partial') %>
     <script type='text/javascript'>
       $(function() {
+
+        // trigger a analytics event when the page loads
+        window.parent._gaq.push(['_trackEvent', 'Locker', 'View Publish Page', '<%= app.name %>']);
+
         $("#publishedInfo .action-button").click(function() {
             window.parent.location.hash = "";
         });
@@ -27,6 +31,9 @@ var hasError = false;
             $("#publishedInfo").show();
             $("#publishOverlay").width($("body").width()).height($("body").height()).show();
             $("body").scrollTop(0);
+
+            // trigger an analytics event when attempting to publish
+            window.parent._gaq.push(['_trackEvent', 'Locker', 'Publish App', '<%= app.name %>']);
             $.getJSON("publish/<%= app.name %>", function(info) {
 console.log(info);
                 $("#publishedInfo .action-button").show();

Apps/dashboardv3/views/iframe/settings-connectors.ejs

@@ -6,7 +6,6 @@
     <link rel="stylesheet" href="css/connect.css" />
     <script src="common/js/jquery.validate.min.js"></script>
     <script src="js/settings.js"></script>
-    <script src="js/connect.js"></script>
   </head>
   <body>
     <content class="body">

Apps/dashboardv3/views/layout.ejs

@@ -12,8 +12,11 @@
     <script src="common/js/registry.js"></script>
     <script src="common/js/generators.js"></script>
     <script src="common/js/page-handlers.js"></script>
-    <script src="js/locker.js"></script>
     <script src="js/dashboard.js"></script>
+    <% if (dashboard && dashboard.customHostedEndpoint) { %>
+    <script src="<%= dashboard.customHostedEndpoint %>"></script>
+    <% } %>
+
   </head>
   <body class="app-page">
 
@@ -43,8 +46,6 @@
             <a href='<%= dashboard.customSettings || "settings#Settings-Connections" %>'>Account Settings</a>
             <a href='<%= dashboard.customLearnmore || "https://singly.com/home.html#About-OurMission" %>'><%= dashboard.customHostedby || "Hosted by Singly" %></a>
           </div>
-          <script src="js/hosted.js"></script>
-          <script src="<%= dashboard.customHostedEndpoint %>"></script>
         <% } %>
       </div>
     </header>