wangqing
5 years ago
9 changed files with 242 additions and 24 deletions
@ -0,0 +1,110 @@ |
|||
var uaParser = require('ua-parser-js') |
|||
//https://afantasy.ninja/2017/05/08/user-tracking-iii/
|
|||
// 用户停留时间
|
|||
// addEvent() 是包装了 `window.addEventListener` 和 `window.attachEvent` 的事件监听函数
|
|||
var r = window.requestAnimationFrame |
|||
var c = window.cancelAnimationFrame |
|||
var h |
|||
var lt = 0 |
|||
var ltStart |
|||
var inActiveTime |
|||
var inActiveThreshold = 60 * 60 * 100 |
|||
// 创建一个心跳闭包，负责向 lifetime 增加累计时间
|
|||
var h = (function() { |
|||
var timer |
|||
|
|||
function beat() { |
|||
var now = new Date() |
|||
var diff = now - ltStart |
|||
lt = lt + diff |
|||
inActiveTime = inActiveTime + diff |
|||
ltStart = now |
|||
if (inActiveTime <= inActiveThreshold) { |
|||
timer = r(beat) |
|||
} else { |
|||
timer = null |
|||
} |
|||
document.getElementById('inActiveTime').innerText = inActiveTime |
|||
} |
|||
|
|||
return { |
|||
start: function() { |
|||
if (!timer) { |
|||
ltStart = new Date() |
|||
timer = r(beat) |
|||
} |
|||
}, |
|||
stop: function() { |
|||
if (timer) { |
|||
c(timer) |
|||
timer = null |
|||
} |
|||
} |
|||
} |
|||
})() |
|||
|
|||
function onFocus() { |
|||
h.start() |
|||
} |
|||
|
|||
function onBlur() { |
|||
h.stop() |
|||
} |
|||
|
|||
// 在 PC 端使用 focusin / focusout / focus / blur 事件
|
|||
if ('onfocusin' in document) { |
|||
document.onfocusin = onFocus |
|||
document.onfocusout = onBlur |
|||
} else { |
|||
window.onfocus = onFocus |
|||
window.onblur = onBlur |
|||
} |
|||
// 在移动端使用 Page Visibility API 检查页面是否 active
|
|||
var prefixes = ['', 'webkit', 'moz', 'ms', 'o'] |
|||
var pf |
|||
var hiddenKey |
|||
var eventKey |
|||
if (isMobile) { |
|||
for (var i = 0; i < prefixes.length; i++) { |
|||
pf = prefixes[i] |
|||
hiddenKey = pf ? (pf + 'Hidden') : 'hidden' |
|||
if (hiddenKey in document) { |
|||
eventKey = pf + 'visibilitychange' |
|||
break |
|||
} |
|||
} |
|||
if (eventKey) { |
|||
addEvent(document, eventKey, function() { |
|||
document[hiddenKey] ? onBlur() : onFocus() |
|||
}) |
|||
} |
|||
} |
|||
inActiveTime = 0 |
|||
h.start() // 开始计算 lifetime
|
|||
|
|||
function isMobile() { |
|||
const ua = uaParser(navigator.userAgent) |
|||
if (ua.device) { |
|||
let {type} = ua.device |
|||
if (type && type == 'mobile') { |
|||
return true |
|||
} |
|||
} |
|||
return false |
|||
} |
|||
|
|||
function addEvent(element, event, callback) { |
|||
if (element.addEventListener) { // 支持使用 addEventListener()
|
|||
if (event.slice(0, 2) === 'on') // 以 "on" 开头，不需要，则去掉
|
|||
event = event.slice(2) |
|||
element.addEventListener(event, callback) |
|||
} else if (element.attachEvent) { // 支持使用 attachEvent()
|
|||
if (event.slice(0, 2) !== 'on') // 没有以 "on" 开头，需要，则加上
|
|||
event = 'on' + event |
|||
element.attachEvent(event, callback) |
|||
} else { |
|||
event.slice(0, 2) !== 'on' ? element['on' + event] = callback : element[event] = callback |
|||
} |
|||
} |
|||
|
|||
|
|||
Loading…
Reference in new issue