Some initial work on metrics (WIP).

Author: sebadoom

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "jwt.io",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/jsonwebtoken/jsonwebtoken.github.io"
@@ -14,6 +14,7 @@
     "@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

@@ -1,20 +1,22 @@
 import '../google-analytics.js';
+import * as metrics from './metrics.js';
 import { setupNavbar } from './navbar.js';
 import { setupExtensionButton } from './extension.js';
 import { setupLibraries } from './libraries.js';
 import { setupTokenEditor, setTokenEditorValue } from '../editor';
 import { setupJwtCounter } from './counter.js';
 import { setupSmoothScrolling } from './smooth-scrolling.js';
 import { setupHighlighting } from './highlighting.js';
-import { isChrome, isFirefox } from './utils.js';
+import { isChrome, isFirefox, isPartiallyInViewport, once } from './utils.js';
 import { setupShareJwtButton } from '../share-button.js';
 import {
   publicKeyTextArea,
   debuggerSection,
   extensionSection,
   ebookSection,
   shareJwtButton,
-  shareJwtTextElement
+  shareJwtTextElement,
+  librariesElement
 } from './dom-elements.js';
 
 import queryString from 'querystring';
@@ -36,9 +38,12 @@ function parseLocationQuery() {
     const token = locSearch[key] || locHash[key];
 
     if(token) {
+      metrics.track('token-in-url', { type: key });
+
       setTokenEditorValue(token);
 
       if(locSearch.publicKey || locHash.publicKey) {
+        metrics.track('pubkey-in-url');
         publicKeyTextArea.value = locSearch.publicKey || locHash.publicKey;
       }
 
@@ -51,13 +56,31 @@ function parseLocationQuery() {
 
 function pickEbookOrExtensionBanner() {
   if((isChrome() || isFirefox()) && (Math.random() >= 0.5)) {
+    metrics.track('extension-banner-shown');
     extensionSection.style.display = 'block';
   } else {
+    metrics.track('ebook-banner-shown');
     ebookSection.style.display = 'block';
   }
 }
 
+function setupMetrics() {
+  metrics.init(PRODUCTION ? 'PROD-KEY' : 'DEV-KEY');
+
+  // Section visible metrics
+  window.addEventListener('scroll', e => {
+    if(isPartiallyInViewport(librariesElement)) {
+      once('libraries-visible', () => metrics.track('libraries-visible-once'));
+    }
+
+    if(isPartiallyInViewport(debuggerSection)) {
+      once('debugger-visible', () => metrics.track('debugger-visible-once'));
+    }
+  });
+}
+
 // Initialization
+setupMetrics();
 setupNavbar();
 setupExtensionButton();
 setupSmoothScrolling();

src/website/index.js

@@ -1,9 +1,10 @@
 import { safeLocalStorageSetItem } from '../utils.js';
 import { httpGet } from '../utils.js';
-import { 
+import * as metrics from './metrics.js';
+import {
   starsElements,
   librariesElement,
-  librariesSelect 
+  librariesSelect
 } from './dom-elements.js';
 
 import Isotope from 'isotope-layout';
@@ -49,7 +50,7 @@ function getStarsForGitHubRepos() {
 
     const now = Date.now();
     try {
-      const stored = JSON.parse(localStorage.getItem(key));      
+      const stored = JSON.parse(localStorage.getItem(key));
       const diff = now - stored.date;
       // Cached for a week
       const maxdiff = 7 * 24 * 60 * 60 * 1000;
@@ -71,16 +72,26 @@ function getStarsForGitHubRepos() {
 
       insertStarCount(element, count);
     }).catch(e => {
-      log.warn('Failed to get GitHub stars count for repository, ' + 
-                    'is the repository URL OK? ', e);
+      log.warn('Failed to get GitHub stars count for repository, ' +
+               'is the repository URL OK? ', e);
     });
   });
 }
 
+function setupMetrics() {
+  // TODO for clicks
+}
+
 export function setupLibraries() {
   getStarsForGitHubRepos();
-  
+
+  setupMetrics();
+
   librariesSelect.addEventListener('change', event => {
+    metrics.track('libraries-filter-selected', {
+      selected: event.target.value
+    });
+
     librariesGrid.arrange({
       filter: event.target.value
     });

src/website/libraries.js

@@ -0,0 +1,13 @@
+import Analytics from 'analytics-node';
+
+let analytics;
+
+export function init(key) {
+  analytics = new Analytics(key);
+}
+
+export function track(event, data) {
+  if(analytics) {
+    analytics.track(event, data);
+  }
+}

src/website/metrics.js

@@ -18,7 +18,20 @@ export function isInViewport(elem) {
       bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
       bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
   );
-};
+}
+
+// From: https://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling
+export function isPartiallyInViewport(el) {
+  var rect = el.getBoundingClientRect();
+  var elemTop = rect.top;
+  var elemBottom = rect.bottom;
+
+  // Only completely visible elements return true:
+  //var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
+  // Partially visible elements return true:
+  var isVisible = elemTop < window.innerHeight && elemBottom >= 0;
+  return isVisible;
+}
 
 //From:
 // https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
@@ -29,3 +42,14 @@ export function isChrome() {
 export function isFirefox() {
   return typeof InstallTrigger !== 'undefined';
 }
+
+const alreadyRun = {};
+export function once(unique, fn) {
+  if(unique in alreadyRun) {
+    return alreadyRun[unique];
+  }
+
+  const result = fn();
+  alreadyRun[unique] = result;
+  return result;
+}

src/website/utils.js

@@ -11,5 +11,10 @@ module.exports = merge(common, {
   output: {
     filename: '[name].js',
     path: __dirname + '/dist/website/js'
-  }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      PRODUCTION: false
+    })
+  ]
 });