Metrics appear to be working locally.

Author: sebadoom

package-lock.json

@@ -14,7 +14,6 @@
     "@babel/core": "^7.0.0-beta.36",
     "@babel/polyfill": "^7.0.0-beta.37",
     "@babel/preset-env": "^7.0.0-beta.36",
-    "analytics-node": "^3.3.0",
     "babel-loader": "^8.0.0-beta.0",
     "babel-plugin-transform-async-to-generator": "^6.24.1",
     "bootstrap": "^3.3.7",

package.json

@@ -48,13 +48,13 @@ import log from 'loglevel';
 // passed to the event manager.
 const eventManager = new EventManager();
 
-function trackToken(jwt, operation) {
+function trackToken(jwt, operation, extra) {
   const tokenInfo = getSafeTokenInfo(jwt);
 
-  metric.track('editor-jwt-tracked', {
+  metrics.track('editor-jwt-tracked', Object.assign({
     operation: operation,
     tokenInfo: tokenInfo
-  });
+  }, extra));
 
   return tokenInfo.hash;
 }
@@ -238,7 +238,9 @@ function encodeToken() {
     sign(header, payload, key, secretBase64Checkbox.checked).then(encoded => {
       eventManager.withDisabledEvents(() => {
         tokenEditor.setValue(encoded);
-        trackToken(encoded, 'encode');
+        trackToken(encoded, 'encode', {
+          secretBase64Checkbox: secretBase64Checkbox.checked
+        });
       });
     }).catch(e => {
       eventManager.withDisabledEvents(() => {
@@ -324,13 +326,15 @@ function verifyToken() {
     if(valid) {
       markAsValid();
       metrics.track('editor-jwt-verified', {
-        tokenHash: tokenHash
+        tokenHash: tokenHash,
+        secretBase64Checkbox: secretBase64Checkbox.checked
       });
     } else {
       markAsInvalid();
       metrics.track('editor-jwt-invalid', {
         reason: 'invalid signature',
-        tokenHash: tokenHash
+        tokenHash: tokenHash,
+        secretBase64Checkbox: secretBase64Checkbox.checked
       });
     }
   });

src/editor/index.js

@@ -55,11 +55,21 @@ export function isString(value) {
 }
 
 function getBase64Format(token) {
-  if(jwt.isValidBase64String(token, true)) {
-    return 'base64url';
-  } else if(jwt.isValidBase64String(token, false)) {
-    return 'base64';
-  } else {
+  try {
+    function getFormat(str) {
+      if(jwt.isValidBase64String(str, true)) {
+        return 'base64url';
+      } else if(jwt.isValidBase64String(str, false)) {
+        return 'base64';
+      } else {
+        return 'invalid';
+      }
+    }
+
+    const formats = token.split('.').map(getFormat);
+    return formats.every(r => r === formats[0]) ?
+      formats[0] : 'invalid';
+  } catch(e) {
     return 'invalid';
   }
 }
@@ -112,7 +122,7 @@ export function getSafeTokenInfo(token) {
     try {
       const decoded = jwt.decode(token);
 
-      const result = Object.assign(result, {
+      Object.assign(result, {
         decodedWithErrors: decoded.errors,
         encodedSize: token.length,
         base64Format: getBase64Format(token),

src/editor/utils.js

@@ -1,16 +1,96 @@
-import Analytics from 'analytics-node';
 import log from 'loglevel';
 
-let analytics;
+export function init(apiKey) {
+  // Create a queue, but don't obliterate an existing one!
+  var analytics = window.analytics = window.analytics || [];
 
-export function init(key) {
-  analytics = new Analytics(key);
+  // If the real analytics.js is already on the page return.
+  if (analytics.initialize) return;
+
+  // If the snippet was invoked already show an error.
+  if (analytics.invoked) {
+    if (window.console && console.error) {
+      console.error('Segment snippet included twice.');
+    }
+    return;
+  }
+
+  // Invoked flag, to make sure the snippet
+  // is never invoked twice.
+  analytics.invoked = true;
+
+  // A list of the methods in Analytics.js to stub.
+  analytics.methods = [
+    'trackSubmit',
+    'trackClick',
+    'trackLink',
+    'trackForm',
+    'pageview',
+    'identify',
+    'reset',
+    'group',
+    'track',
+    'ready',
+    'alias',
+    'debug',
+    'page',
+    'once',
+    'off',
+    'on'
+  ];
+
+  // Define a factory to create stubs. These are placeholders
+  // for methods in Analytics.js so that you never have to wait
+  // for it to load to actually record data. The `method` is
+  // stored as the first argument, so we can replay the data.
+  analytics.factory = function(method){
+    return function(){
+      var args = Array.prototype.slice.call(arguments);
+      args.unshift(method);
+      analytics.push(args);
+      return analytics;
+    };
+  };
+
+  // For each of our methods, generate a queueing stub.
+  for (var i = 0; i < analytics.methods.length; i++) {
+    var key = analytics.methods[i];
+    analytics[key] = analytics.factory(key);
+  }
+
+  // Define a method to load Analytics.js from our CDN,
+  // and that will be sure to only ever load it once.
+  analytics.load = function(key, options){
+    // Create an async script element based on your key.
+    var script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.async = true;
+    script.src = 'https://cdn.segment.com/analytics.js/v1/'
+      + key + '/analytics.min.js';
+
+    // Insert our script next to the first script element.
+    var first = document.getElementsByTagName('script')[0];
+    first.parentNode.insertBefore(script, first);
+    analytics._loadOptions = options;
+  };
+
+  // Add a version to keep track of what's in the wild.
+  analytics.SNIPPET_VERSION = '4.1.0';
+
+  // Load Analytics.js with your key, which will automatically
+  // load the tools you've enabled for your account. Boosh!
+  analytics.load(apiKey);
+
+  // Make the first page call to load the integrations. If
+  // you'd like to manually name or tag the page, edit or
+  // move this call however you'd like.
+  analytics.page();
 }
 
 export function track(event, data) {
-  if(analytics) {
+  if(window.analytics) {
     try {
-      analytics.track(event, data);
+      window.analytics.track(event, data);
     } catch(e) {
       log.error(`Metrics library error for event ${event}: ${e}`);
     }

src/metrics.js

@@ -65,7 +65,9 @@ function pickEbookOrExtensionBanner() {
 }
 
 function setupMetrics() {
-  metrics.init(PRODUCTION ? 'PROD-KEY' : 'DEV-KEY');
+  metrics.init(PRODUCTION ?
+    '693wciz6BgZdlmW0qDlbgxpyj7gtVxRR' :
+    'xBxBArADMejN3aqs9NhISky9PHPXIr80');
 
   // Section visible metrics
   window.addEventListener('scroll', e => {