update gtag usage (compdemocracy#1795)

* update gtag usage

* ignore gtag if GA value is blank

client-participation/js/routers/main-polis-router.js

@@ -6,7 +6,6 @@ var Backbone = require("backbone");
 var bbFetch = require("../net/bbFetch");
 var ConversationModel = require("../models/conversation");
 var eb = require("../eventBus");
-// var gaEvent = require("../util/gaMetric").gaEvent;
 var metric = require("../util/gaMetric");
 var ParticipantModel = require("../models/participant");
 var ParticipationView = require("../views/participation");
@@ -15,23 +14,20 @@ var preloadHelper = require("../util/preloadHelper");
 var RootView = require("../views/root");
 var Constants = require("../util/constants");
 var SettingsView = require("../views/settings.js");
-
 var UserModel = require("../models/user");
 var Utils = require("../util/utils");
 var hasEmail = require("../util/polisStorage").hasEmail;
 
-
 var match = window.location.pathname.match(/ep1_[0-9A-Za-z]+$/);
 var encodedParams = match ? match[0] : void 0;
 
-var routeEvent = metric.routeEvent;
-
 var authenticatedDfd = $.Deferred();
 authenticatedDfd.done(function() {
-  // link uid to GA userId
+  // link uid to GA user_id
   // TODO update this whenever auth changes
   if (Constants.GA_TRACKING_ID) {
-    gtag('set', 'userId', PolisStorage.uid() || PolisStorage.uidFromCookie());
+    const userId = PolisStorage.uid() || PolisStorage.uidFromCookie();
+    gtag('config', Constants.GA_USER_ID, {'user_id': userId});
   }
 });
 
@@ -85,11 +81,10 @@ var polisRouter = Backbone.Router.extend({
     }
 
   }, // end initialize
-  r: function(pattern, methodNameToCall) {
-    var that = this;
-    this.route(pattern, function() {
-      routeEvent(methodNameToCall, arguments);
-      that[methodNameToCall].apply(that, arguments);
+  r(pattern, methodNameToCall) {
+    this.route(pattern, (...args) => {
+      metric.routeEvent(methodNameToCall, args);
+      this[methodNameToCall].apply(this, args);
     });
   },
   bail: function() {

client-participation/js/util/gaMetric.js

@@ -3,72 +3,78 @@
 var _ = require("underscore");
 var Constants = require("./constants");
 
-// Mapping of routing information to GA analytic tags (category, action, etc). By default "action"
-// is the method name. XXX: In the future, if we change method names should make this more uniform
-// so GA remains consistent; maybe integrating the GA data directly into the router?
-var methodToEventMap = {
-  createConversation: ["Ownering"],
-  participationView: ["Participation", "land"],
-  createUser: ["SignUp"],
-  // XXX - currently emmited from view
-  //login: ["Session"],
-  //logout: ["Session"],
-  createUserViewFromEinvite: ["Signup", "submit", "createUserViewFromEinvite"], // ???
-  settings: ["Account"],
-  inbox: ["Inbox", "land"],
-  faq: ["Learning"],
-  pwresetinit: ["Account"],
-  pwReset: ["Account"],
-  prototype: [], // ???
-  landingPageView: ["Lander", "land"],
-  participationViewWithSuzinvite: ["Participation", "land"],
-  demoConversation: ["Demo"],
-  shareView: ["Ownering"],
-  moderationView: ["Ownering"]
+// Mapping of routing information to GA analytic tags.
+// Each key maps to an object that contains category and action to match gtag parameters.
+const methodToEventMap = {
+  createConversation: {
+    category: "Owner",
+    action: "createConversation"
+  },
+  createUser: {
+    category: "SignUp",
+    action: "createUser"
+  },
+  createUserViewFromEinvite: {
+    category: "SignUp",
+    action: "createUserViewFromEinvite"
+  },
+  demoConversation: {
+    category: "Demo",
+    action: "demoConversation"
+  },
+  inbox: {
+    category: "Inbox",
+    action: "inbox"
+  },
+  landingPageView: {
+    category: "Landing",
+    action: "landingPageView"
+  },
+  participationView: {
+    category: "Participation",
+    action: "participationView"
+  },
+  participationViewWithSuzinvite: {
+    category: "Participation",
+    action: "participationViewWithSuzinvite"
+  },
+  settings: {
+    category: "Account",
+    action: "settings"
+  }
 };
 
-// Elsewhere:
-// SignUp, land
-// SignUp, emailSubmitted, general|edu
-// SignUp, emailSubmitFail
-// SignUp, done
-// Lander, land, general|edu
-// Session, land
-// Session, create, signIn|signUp|empty
-// Session, createFail, signIn|signUp|polis_err_no_matching_suzinvite
-//
-
-function gaEvent() {
-  // Sends all arguments to a gtag('event', __) partial
-  if (Constants.GA_TRACKING_ID) {
-    ga_ = _.partial(gtag, 'event');
-    ga_.apply(window, arguments);
+function routeEvent(routerMethod, methodArgs) {
+  if (!Constants.GA_TRACKING_ID) {
+    return;
   }
-}
 
-function routeEvent(methodNameToCall, methodArgs) {
+  const event = methodToEventMap[routerMethod];
+
   // check for demo
-  var loc = document.location + "";
-  if (loc.match(/\/2demo/)) {
-    gaEvent("Demo", "land", loc);
+  if (window.location.href.match(/\/2demo/)) {
+    gtag('event', routerMethod, {
+      'event_category': 'Demo'
+    })
+    return;
+  }
+
+  // First parameter, if any, passed to the router method
+  const param = methodArgs ? methodArgs[0] : null;
+
+  if (event) {
+    gtag('event', event.action, {
+      'event_category': event.category,
+      'event_param': param
+    });
   } else {
-    var args = methodToEventMap[methodNameToCall];
-    if (args) {
-      if (args.length < 2) {
-        // Apply action default as described above methodToEventMap
-        args.push(methodNameToCall);
-      }
-      if (args[0] === "Participation" || args[0] === "Demo") {
-        // XXX - need to be careful in future if we introduce more Participation category actions that trigger
-        // from routes
-        args.push(methodArgs[0]);
-      }
-      gaEvent.apply(window, args);
-    }
+    gtag('event', routerMethod, {
+      'event_category': 'Uncategorized',
+      'event_param': param
+    });
   }
 }
 
 module.exports = {
-  gaEvent: gaEvent,
   routeEvent: routeEvent
 };