Measure user engagement

holidayextras · Jul 25, 2016 · c1a37f7 · c1a37f7
1 parent 0d6fcee
commit c1a37f7
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 42 deletions.
diff --git a/dist/barometer-test.js b/dist/barometer-test.js
@@ -33,8 +33,15 @@ var pageLoadStats = require('./pageLoadStats.js')
 var transport = require('./transport.js')
 
 var pageCounter = 0
+var pageLoadedAt, pageLoadedId
+pageChange._pageEnd = function () {
+  transport.gauge(pageLoadedId, (new Date()) - pageLoadedAt)
+}
 pageChange._logPage = function () {
   transport.count(pageLoadStats._createGaugeName('visits'))
+  if (pageLoadedAt) {
+    pageChange._pageEnd()
+  }
   pageCounter++
   var navStart = new Date()
   var thisPage = pageCounter
@@ -45,6 +52,8 @@ pageChange._logPage = function () {
   var metric = pageLoadStats._createGaugeName('dynamic')
   var done = function () {
     clearTimeout(timeout)
+    pageLoadedAt = new Date()
+    pageLoadedId = pageLoadStats._createGaugeName('engagement')
     var overhead = 25 * 5
     transport.gauge(metric, ((new Date()) - navStart) - overhead)
   }
@@ -147,7 +156,6 @@ if (typeof window.performance === 'object') {
 'use strict'
 var transport = module.exports = {}
 
-var event = require('./event.js')
 var xhrStats = require('./xhrStats')
 var barometer = require('./barometer.js')
 
@@ -186,7 +194,7 @@ transport._triggerFlushBuffer = function () {
   bufferFlush = setTimeout(transport._flushBuffer, 5000)
 }
 
-transport._flushBuffer = function () {
+transport._flushBuffer = function (pageEnd) {
   if (transport.bufferSize === 0) return
   if (!barometer.url) return
 
@@ -199,27 +207,19 @@ transport._flushBuffer = function () {
   transport._initialiseBuffer()
 
   var url = barometer.url
-  var xhr = new xhrStats._XMLHttpRequest()
-  xhr.open('POST', url, true)
-  xhr.setRequestHeader('Content-Type', 'application/json')
-  xhr.send(JSON.stringify(bufferToSend))
-  xhr.timeout = 4 * 1000
-  // xhr.onload = function ()e) { }
-  // xhr.onerror = function ()e) { }
-  // xhr.ontimeout = function ()) { }
-}
-event(window, 'beforeunload', transport._flushBuffer)
-event(window, 'unload', transport._flushBuffer)
-event(window, 'pagehide', transport._flushBuffer)
-event(document, 'mouseout', function (e) {
-  e = e || window.event
-  e = e.relatedTarget || e.toElement
-  if (!e || e.nodeName === 'HTML') {
-    transport._flushBuffer()
+
+  if (navigator.sendBeacon) {
+    navigator.sendBeacon(url, JSON.stringify(bufferToSend))
+  } else {
+    var xhr = new xhrStats._XMLHttpRequest()
+    xhr.open('POST', url, !pageEnd)
+    xhr.setRequestHeader('Content-Type', 'application/json')
+    xhr.send(JSON.stringify(bufferToSend))
+    xhr.timeout = 4 * 1000
   }
-})
+}
 
-},{"./barometer.js":1,"./event.js":2,"./xhrStats":7}],6:[function(require,module,exports){
+},{"./barometer.js":1,"./xhrStats":7}],6:[function(require,module,exports){
 'use strict'
 module.exports = function (href, hash) {
   var safeUrl = (href || '').split('?')[0].replace(/^https?:\/\//i, '').replace(/[^a-z0-9-\/]/gi, '_')
@@ -8000,6 +8000,12 @@ describe('Testing pageChange', function () {
     sinon.assert.calledWith(transport.gauge, 'pageload.localhost_9876/context_html.dynamic', 750)
     sinon.assert.calledWith(transport.count, 'pageload.localhost_9876/context_html.visits')
   })
+
+  it('should measure engagement', function () {
+    window.clock.tick(100)
+    window.trigger('popstate')
+    sinon.assert.calledWith(transport.gauge, 'pageload.localhost_9876/context_html.engagement', 325)
+  })
 })
 
 },{"../lib/pageChange.js":3,"../lib/transport.js":5,"./_fakeDom.js":41,"sinon":14}],44:[function(require,module,exports){

diff --git a/dist/barometer.min.js b/dist/barometer.min.js
diff --git a/lib/pageChange.js b/lib/pageChange.js
@@ -7,8 +7,15 @@ var pageLoadStats = require('./pageLoadStats.js')
 var transport = require('./transport.js')
 
 var pageCounter = 0
+var pageLoadedAt, pageLoadedId
+pageChange._pageEnd = function () {
+  transport.gauge(pageLoadedId, (new Date()) - pageLoadedAt)
+}
 pageChange._logPage = function () {
   transport.count(pageLoadStats._createGaugeName('visits'))
+  if (pageLoadedAt) {
+    pageChange._pageEnd()
+  }
   pageCounter++
   var navStart = new Date()
   var thisPage = pageCounter
@@ -19,6 +26,8 @@ pageChange._logPage = function () {
   var metric = pageLoadStats._createGaugeName('dynamic')
   var done = function () {
     clearTimeout(timeout)
+    pageLoadedAt = new Date()
+    pageLoadedId = pageLoadStats._createGaugeName('engagement')
     var overhead = 25 * 5
     transport.gauge(metric, ((new Date()) - navStart) - overhead)
   }

diff --git a/lib/transport.js b/lib/transport.js
@@ -2,7 +2,6 @@
 'use strict'
 var transport = module.exports = {}
 
-var event = require('./event.js')
 var xhrStats = require('./xhrStats')
 var barometer = require('./barometer.js')
 
@@ -41,7 +40,7 @@ transport._triggerFlushBuffer = function () {
   bufferFlush = setTimeout(transport._flushBuffer, 5000)
 }
 
-transport._flushBuffer = function () {
+transport._flushBuffer = function (pageEnd) {
   if (transport.bufferSize === 0) return
   if (!barometer.url) return
 
@@ -54,22 +53,14 @@ transport._flushBuffer = function () {
   transport._initialiseBuffer()
 
   var url = barometer.url
-  var xhr = new xhrStats._XMLHttpRequest()
-  xhr.open('POST', url, true)
-  xhr.setRequestHeader('Content-Type', 'application/json')
-  xhr.send(JSON.stringify(bufferToSend))
-  xhr.timeout = 4 * 1000
-  // xhr.onload = function ()e) { }
-  // xhr.onerror = function ()e) { }
-  // xhr.ontimeout = function ()) { }
-}
-event(window, 'beforeunload', transport._flushBuffer)
-event(window, 'unload', transport._flushBuffer)
-event(window, 'pagehide', transport._flushBuffer)
-event(document, 'mouseout', function (e) {
-  e = e || window.event
-  e = e.relatedTarget || e.toElement
-  if (!e || e.nodeName === 'HTML') {
-    transport._flushBuffer()
+
+  if (navigator.sendBeacon) {
+    navigator.sendBeacon(url, JSON.stringify(bufferToSend))
+  } else {
+    var xhr = new xhrStats._XMLHttpRequest()
+    xhr.open('POST', url, !pageEnd)
+    xhr.setRequestHeader('Content-Type', 'application/json')
+    xhr.send(JSON.stringify(bufferToSend))
+    xhr.timeout = 4 * 1000
   }
-})
+}
diff --git a/lib/unload.js b/lib/unload.js
@@ -0,0 +1,31 @@
+/* global window */
+'use strict'
+var unload = module.exports = {}
+
+var event = require('event')
+var transport = require('transport')
+var pageChange = require('./pageChange.js')
+
+unload.forSure = function () {
+  pageChange._pageEnd()
+  transport._flushBuffer(true)
+}
+
+unload.maybe = function () {
+  transport._flushBuffer(false)
+}
+
+event(window, 'beforeunload', unload.forSure)
+event(document, 'mouseout', function (e) {
+  e = e || window.event
+  e = e.relatedTarget || e.toElement
+  if (!e || e.nodeName === 'HTML') {
+    unload.maybe()
+  }
+})
+event(document, 'keydown', function (e) {
+  e = e || window.event || { }
+  if (e.ctrlKey || e.metaKey) {
+    unload.maybe()
+  }
+})
diff --git a/test/testPageChange.js b/test/testPageChange.js
@@ -27,4 +27,10 @@ describe('Testing pageChange', function () {
     sinon.assert.calledWith(transport.gauge, 'pageload.localhost_9876/context_html.dynamic', 750)
     sinon.assert.calledWith(transport.count, 'pageload.localhost_9876/context_html.visits')
   })
+
+  it('should measure engagement', function () {
+    window.clock.tick(100)
+    window.trigger('popstate')
+    sinon.assert.calledWith(transport.gauge, 'pageload.localhost_9876/context_html.engagement', 325)
+  })
 })