pc 端的用户统计相对好处理点，我们可以基于window 的一些onload,onbeforeunload 以及一些特征处理（一些算法）
但是对于移动端h5的就有点少复杂了，移动端的用户操作习惯与pc 端的有不一样的地方，以下是一些尝试（方案不完备）
dom 几个新的event： pageshow,pagehide,visibilitychange
pageshow
pageshow 事件类似于 load 事件，load 事件在页面第一次加载时触发， pageshow 事件在每次加载页面时触发，即 load
事件在页面从浏览器缓存中读取时不触发
pagehide
pagehide 事件类似于 unload 事件，在用户离开网页时触发（如点击一个链接、刷新页面、提交表单、关闭浏览器、前进、后退等）
visibilitychange
事件用于监听网页发生变化(进入后台,进入前台)
集成使用
我们可以基于onload处理页面首次加载，同时也可以基于pageshow，pagehide查看用户的离开以及其他事件（但是在基于webview的就不太好了）
这种问题我们可以基于visibilitychange解决下（相对靠谱点,测试可行），同时对于数据的分析我们可以基于nginx 的empty_gif （使用openresty 会更强大）
基于nginx 的log 分析用户请求状态
- 简单web demo
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="cookieInit()" >
<div id="demapp" onclick="demo()">
this is a demo
<input text="demoapp" id="demoapp2">
<button onclick="demo4()">click</button>
</div>
<script>
window.onbeforeunload = closedemo;
window.addEventListener("pageshow",function(e){
var img = new Image(1,1);
var info = document.cookie;
var type = "pageshow";
img.src = "/images/demoapp.gif?c="+info+"&type="+type;
})
document.addEventListener("visibilitychange", function(e){
var img = new Image(1,1);
var info = document.cookie+document.visibilityState
var type = "visibilitychange";
img.src = "/images/demoapp.gif?c="+info+"&type="+type;
})
window.addEventListener("pagehide",function(e){
var img = new Image(1,1);
var info = document.cookie;
var type = "pagehide";
img.src = "/images/demoapp.gif?c="+info+"&type="+type;
})
function closedemo(){
var img = new Image(1,1);
var info = document.cookie;
var type = "close";
img.src = "/images/demoapp.gif?c="+info+"&type="+type;
}
function cookieInit(){
document.cookie="dalong=demoapp"
}
function demo4(){
var val = document.getElementById("demoapp2")
//console.log(val.value)
alert(val.value)
}
function demo(){
console.log("first")
}
function demo2(){
console.log("body click")
}
document.addEventListener("click", function(e){
e.preventDefault()
console.log(e)
console.log(JSON.stringify(e))
var img = new Image(1,1);
var info = document.cookie
img.src = "/images/demoapp.gif?c="+info;
})
</script>
</body>
</html>
- nginx.conf
worker_processes 1;
user root;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
gzip on;
real_ip_header X-Forwarded-For;
server {
listen 80;
charset utf-8;
default_type text/html;
location / {
default_type text/html;
index index.html;
}
location /id {
content_by_lua_block {
ngx.say(ngx.var.request_id)
}
}
location /images/ {
add_header Cache-Control no-store;
add_header Cache-Control must-revalidate;
empty_gif;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
说明
以上是一个简单的学习，基于上边的一些基本原理，以及openrety，我们可以制作一个简易但是高效的用户行为统计了
参考资料
https://developer.mozilla.org/zh-CN/docs/Web/Events
https://www.jianshu.com/p/7c85610d5404
https://blog.csdn.net/yihanzhi/article/details/88244913
https://www.cnblogs.com/rongfengliang/p/13088923.html
https://www.df5d.com/OpenResty/bhkh.html