add realtime analytics embed

controllers/amp-analytics/embed.js

@@ -17,20 +17,68 @@
 "use strict";
 
 var express = require('express');
+var hogan = require("hogan.js");
+
 var router = express.Router();
 
 var Analytics = require('../../models/amp-analytics');
 
+var analyticsTemplate = hogan.compile(`
+    <table>
+    <tr>
+      <th>Event</th>
+      <th>Count</th>
+    </tr>
+    {{#data}}
+    <tr>
+      <td>{{key}}</td><td>{{value}}</td>
+    </tr>
+    {{/data}}
+    {{^data}}
+    No data available.
+    {{/data}}
+    </table>`.replace(/\n/g, ''));
+
+router.get('/listen', function(req, res){
+  var account = req.query.account;
+  var user = req.query.user;
+  if (!account || !user) {
+    res.sendStatus(400);
+  }
+  console.log('new connection for user ' + user);
+  res.writeHead(200, {
+    'Connection': 'keep-alive',
+    'Content-Type': 'text/event-stream',
+    'Cache-Control': 'no-cache'
+  });
+
+  var onNewAnalyticsData = function(userData) {
+    var content = analyticsTemplate.render({data: userData});
+    console.log('received user event ' + content);
+    res.write('data: ' + content + '\n\n');
+  };
+
+  var userData = Analytics.forUser(account, user);
+  onNewAnalyticsData(userData);
+
+  Analytics.addUserListener(user, onNewAnalyticsData);
+  req.on("close", function() {
+    Analytics.removeUserListener(user, onNewAnalyticsData);
+  });
+});
+
 /**
  * Lists all available analytics data for the given account.
  *
  * Example: /amp-analytics/view?acccount=AN_ACCOUNT
  */
 router.get('/', function(req, res) {
   var account = req.query.account;
-  var analytics = Analytics.forAccount(account);
+  var user = req.query.user;
+  var analytics = Analytics.forUser(account, user);
   res.render('amp-analytics/embed', {
       account: account,
+      user: user,
       data: analytics
   });
 });

controllers/amp-analytics/ping.js

@@ -30,10 +30,10 @@ router.post('/', function(req, res) {
   // enable CORS
   res.header('Access-Control-Allow-Origin', '*');
   res.header('Access-Control-Allow-Credentials', 'true');
-  // register the event
   var account = req.query.account;
   var event = req.query.event;
-  if (!Analytics.trackEvent(account, event)) {
+  var user = req.query.user;
+  if (!Analytics.trackEvent(account, event, user)) {
     res.sendStatus(400);
     return;
   }

models/amp-analytics.js

@@ -16,31 +16,105 @@
 "use strict";
 
 var EVENTS = {};
+var USER_CHANGE_LISTENERS = {};
+var GLOBAL_ANALYTICS = '__all_users__';
 
 /**
  * Counts an analytics event.
  */
-exports.trackEvent = function(account, event) {
+exports.trackEvent = function(account, event, user) {
+  console.log('track ' + account + ';' + event + ';' + user);
   if (!account || !event) {
     return false;
   }
-  var data = EVENTS[account];
-  if (!data) {
-    data = {};
-    EVENTS[account] = data;
+  trackUserEvent(account, event, GLOBAL_ANALYTICS);
+  if (user) {
+    trackUserEvent(account, event, user);
   }
+  return true;
+}
+
+function trackUserEvent(account, event, user) {
+  var accountData = get(EVENTS, account);
+  var userData = get(accountData, user);
+  inc(userData, event);
+  notifyListeners(user, userData);
+}
+
+function get(obj, prop) {
+  var value = obj[prop];
+  if (!value) {
+    value = {};
+    obj[prop] = value;
+  }
+  return value;
+}
+
+function inc(data, event) {
   var eventCount = data[event];
   if (!eventCount) {
     eventCount = 0;
   }
   return data[event] = eventCount + 1;
 }
 
+/**
+ * Returns analytics for the given user and account.
+ */
+exports.forUser = function(account, user) {
+  var accountData = EVENTS[account];
+  if (!accountData) {
+    return '';
+  }
+  return formatData(accountData[user]);
+}
+
 /**
  * Returns analytics for the given account.
  */
 exports.forAccount = function(account) {
-  return formatData(EVENTS[account]);
+  return module.exports.forUser(account, GLOBAL_ANALYTICS);
+}
+
+/**
+ * Add user analytics change listener.
+ */
+exports.addUserListener = function(userId, callback) {
+  var listeners = USER_CHANGE_LISTENERS[userId];
+  if (!listeners) {
+    listeners = [];
+    USER_CHANGE_LISTENERS[userId] = listeners;
+  }
+  listeners.push(callback);
+}
+
+/**
+ * Remove user analytics change listener.
+ **/
+exports.removeUserListener = function(userId, callback) {
+  var listeners = USER_CHANGE_LISTENERS[userId];
+  if (!listeners) {
+    console.log('error: no listener registered for user ' + user);
+    return;
+  }
+  var index = listeners.indexOf(callback);
+  if (index == -1) {
+    return;
+  }
+  listeners.splice(index, 1);
+}
+
+function notifyListeners(user, data) {
+  var listeners = USER_CHANGE_LISTENERS[user]
+  if(!listeners) {
+    console.log('no listeners for user events ' + user);
+    return;
+  }
+  console.log('notify listeners for user events ' + user);
+  var formattedData = formatData(data);
+  listeners.forEach(function(listener) {
+    listener(formattedData);
+  });
 }
 
 /**

package.json

@@ -9,24 +9,22 @@
   "author": "The AMP HTML Authors",
   "license": "Apache-2.0",
   "scripts": {
-    "start": "node app.js"
+    "start": "node app.js",
+    "monitor": "nodemon app.js",
+    "deploy": "gcloud preview app deploy app.yaml",
+    "lint": "jshint --exclude-path=.gitignore .",
+    "test": "npm run lint"
   },
   "dependencies": {
     "body-parser": "1.14.1",
+    "cookie-parser": "1.4.1",
     "express": "4.13.3",
     "gcloud": "^0.27.0",
     "hogan-express": "0.5.2",
-    "cookie-parser": "1.4.1",
+    "hogan.js": "^3.0.2",
     "uuid": "2.0.1"
   },
   "devDependencies": {
     "jshint": "^2.8.0"
-  },
-  "scripts": {
-    "start": "node app.js",
-    "monitor": "nodemon app.js",
-    "deploy": "gcloud preview app deploy app.yaml",
-    "lint": "jshint --exclude-path=.gitignore .",
-    "test": "npm run lint"
   }
 }

views/amp-analytics/demo.html

@@ -35,7 +35,7 @@ <h4>Analytics</h4>
 <script type="application/json">
 {
   "requests": {
-    "pageview": "<% host %>/amp-analytics/ping?account=${account}&event=pageview"
+    "pageview": "<% host %>/amp-analytics/ping?account=${account}&event=pageview&user=${clientId(cid-scope)}"
   },
   "vars": {
     "account": "amp-publisher-sample"

views/amp-analytics/embed.html

@@ -1,35 +1,62 @@
 <!doctype html>
-<html ⚡>
+<html>
   <head>
     <meta charset="utf-8">
-    <title>AMP Publisher Samples</title>
-    <link rel="canonical" href="index.html" >
-    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
-    <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
-    <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
-    <style amp-custom>
+    <style media="screen" type="text/css">
       body {
-        padding: 16px;
-        background: #eee;
-        font-family: "Roboto";
+        background: white;
+        font-family: Roboto,Helvetica,Arial,sans-serif;
+        font-size: 14px;
+        font-weight: 400;
+        letter-spacing: 0;
       }
-      p {
-       line-height: 8px;
-      }
-      h4 {
-        margin: 0;
-        margin-bottom: 16px;
+      th { 
+        text-align: left;
       }
     </style>
   </head>
   <body>
-    <h4>Account: <% account %> </h4>
-    <%# data %>
-      <p><%key%> : <%value%></p>
-    <%/ data %>
-    <%^ data %>
-      No data available.
-    <%/ data %>
+    <script>
+      function getQueryParams(qs) {
+          qs = qs.split('+').join(' ');
+          var params = {},
+              tokens,
+              re = /[?&]?([^=]+)=([^&]*)/g;
+          while (tokens = re.exec(qs)) {
+              params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
+          }
+          return params;
+      }
+
+      function updateTimestamp() {
+        var now = new Date();
+        document.getElementById("timestamp").textContent = now.toLocaleTimeString();
+      }
+
+      function updateAnalyticsData(newData) {
+        var el = document.createElement('div');
+        var att = document.createAttribute("id");
+        att.value = "data";          
+        el.setAttributeNode(att);
+        el.innerHTML = newData;
+        var data = document.getElementById("data");
+        var parentDiv = data.parentNode;
+        parentDiv.replaceChild(el, data);
+      }
+
+      if (!!window.EventSource) {
+        var query = getQueryParams(document.location.search);
+        var account = query.account;
+        var user = query.user;
+        var source = new EventSource('/amp-analytics/embed/listen?account=' + account + '&user=' + user);
+        console.log('adding event listener for ' + account + ' and ' + user);
+        source.onmessage = function(e) {
+          updateAnalyticsData(e.data);
+          updateTimestamp();
+        };
+      }
+    </script>
+    <div id="data">No data</div>
+    <p>Last updated: <span id="timestamp">n/a</span></p>
   </body>
 </html>