使用dom的几个事件统计用户请求

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

posted on 2020-06-18 11:27 荣锋亮阅读(406) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）

历史上的今天：
2018-06-18 几个基于jvm 的微服务框架
2018-06-18 使用docker 部署graylog集群
2017-06-18 openresty 几个插件使用
2017-06-18 kong 了解
2017-06-18 openresty && hashids&& redis 生成短链接
2015-06-18 浏览器的标准模式和怪异模式

rongfengliang-荣锋亮