页面统计时间问题解决过程

2018-10-15 17:38 热度: 72 我说呢

背景交代下:百度地图项目中一个H5的活动页面,需要统计下用户的PV、UV、页面停留时长等数据,以便验收运营效果,调整策略。

其实问题主要在于统计页面的停留时间上;本以为就是一个在开始进入的时候发送一个ajax请求,记录下时间,在退出监听window.onbeforeunload事件发送一下请求就搞定了。

第一版代码实现:

window.onunload = window.onbeforeunload = function (e) {
    $.ajax({...});
}

然而,结果并不那么如意:在PC端成功了,在Mobile上基本上没有统计到结束的时间。发现被浏览器cancel掉了,原来是异步的问题,然后就改成同步的。

var request = new XMLHttpRequest();
request.open('GET', url, false); // 同步请求
request.send(null);
伤心.png

测试下,iPhone可以了,安卓机又不行了(郁闷.png)。经过一番调试发现:

安卓机在百度地图app退出H5页面时,并不会触发onbeforeunload,应该是并不会把当前webview销毁,而是在下次重新进入一个H5页面的时候会销毁上一个(触发上一个H5的onbeforeunload事件)

机智.png

发现根本没有触发ajax,经过一顿google后,发现另一个事件,visibilitychange:

document.addEventListener('visibilitychange', function() {
  console.log( document.visibilityState );
});

但是这个事件的弊端是,如果app只是退出到后台运行(H5页面并没有关闭),也会执行该事件。

ganga.png

所以,带来的就是不管退出到后台还是真正的关闭webview,都会发送ajax,说 我结束了,其实有的时候并没有结束。

还有一点优化的就是,如果用户退出到后台会造成统计时间不准,因为你真正的退出的时候会再次发一次,这时候中间可能有很长时间并没有看当前页面,需要记录下退出到后台的时间,然后去除掉就可以了。

最后的伪代码:

if (navigator.userAgent.toLowerCase().indexOf('android') > 0) {
    document.addEventListener('visibilitychange', function () {
        if (document.visibilityState != 'hidden') {
            ...sync ajax...
        }
    });
}
else {
    window.addEventListener('pagehide', function () {
        ...sync ajax...
    }, false);
}

其中pagehide与onbeforeunload差不多(反正没找到不同)。

另外,中间还用了一个不太好的,就是使用了轮询机制(心跳机制)。弊端是不管关没关闭都会触发,另外统计时间不是那么准确。

参考资料:visibilitychangePageVisibilityAPI

查看评论 (1条)

1 楼 及时雨

2018-10-15 17:39

增加下热度

添加评论