用户停留时长打点

2021-09-07 本文已影响0人 baxiamali

引子

移动看家运营页面，投放在和家亲/一级掌厅/微信/等渠道。以前接入的是和家亲的打点方案，现在需要增加安防的打点方案，重点记录指标：用户停留时长。

初始思路

停留时长的打点方案思路非常清晰：

第一步：在用户进入页面时记录时间点（在页面加载后记录）

第二步：在用户离开页面时记录时间点（在页面即将卸载时记录）

第三步：用时间点计算时长，并将信息通过打点接口发送给平台进行记录

项目实战

离开页面事件：onbeforeunload

window.onbeforeunload = funcRef

当浏览器窗口关闭或者刷新时，会触发beforeunload事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。

代码示例：

window.addEventListener('beforeunload', (event) => {
  // Cancel the event as stated by the standard.
  event.preventDefault();
  // Chrome requires returnValue to be set.
  event.returnValue = '';
});

注意点：

从2011年5月25日起, HTML5 规范声明:在该事件的处理函数中调用下列弹窗相关的方法时,可以忽略不执行,window.showModalDialog(), window.alert(), window.confirm() window.prompt().（无法用alert来确认是否进去了该事件）

需要指出的是，许多浏览器会忽略该事件并自动关闭页面无需用户的确认。火狐浏览器在配置页面about:config设有一个dom.disable_beforeunload的开关变量用于开启这个功能。

浏览器兼容性：
移动端兼容性很差，safari ，webview中都进入不到该事件。

移动端离开页面事件：onpagehide

window.onpagehide = event => {//...}

不要写在组件里面的unmount事件中，因为实际的使用情况不止是在组件内部进行页面跳转，还有可能跳转到外部项目链接，或者直接关闭页面。

移动端调试

怎样在移动端进行调试，确定用户离开页面的时候进入到了对应的事件呢？
我的方法是，在事件中设置对应的localstorage，离开页面后再次进去，看下是否设置成功即可。

遇到的问题

请求会丢失

在PC端Chorme浏览器调试发现：页面跳转时打点请求状态时canceled，未发送成功，关闭浏览器时打点请求发送成功。
在和家亲webview中，ios端打点未发送成功，但是平台有收到零星的时长打点，说明在某些机型打点请求发送成功了。但是这种方法不能保证请求一定被发出了，继续寻找解决方案。

解决方案

服务器端配置ignore_user_abort防止接口cancel —— 需要服务端进行配置，暂不使用。
将打点请求改成同步请求，缺点是由于请求是同步的，在请求时间内会阻塞页面关闭或跳转。

方法：

ajax调用设置async:false
xhr 调用设置 var request = new XMLHttpRequest(); request.open('GET', 'http://www.mozilla.org/', false);

结果：均无请求发送记录，查阅资料，因为这种操作会阻塞页面，部分高级浏览器已经不在支持在页面卸载时间中调用同步请求。

卸载事件中设置图片src为打点地址。缺点是由于请求是同步的，在请求时间内会阻塞页面关闭或跳转。
在页面卸载事件中将参数通过bridge传给native，让native去和平台通信。缺点：只能解决在native中的页面打点事件，无法同步解决其他场景下的打点遗漏问题。

终极解决方案
sendBeacon

navigator.sendBeacon() 方法可用于通过HTTP将少量数据异步传输到Web服务器。

这个方法主要用于满足统计和诊断代码的需要，这些代码通常尝试在卸载（unload）文档之前向web服务器发送数据。过早的发送数据可能导致错过收集数据的机会。然而，对于开发者来说保证在文档卸载期间发送数据一直是一个困难。因为用户代理通常会忽略在 unload (en-US) 事件处理器中产生的异步 XMLHttpRequest。

为了解决这个问题，统计和诊断代码通常要在 unload 或者 beforeunload (en-US) 事件处理器中发起一个同步 XMLHttpRequest 来发送数据。同步的 XMLHttpRequest 迫使用户代理延迟卸载文档，并使得下一个导航出现的更晚。下一个页面对于这种较差的载入表现无能为力。

有一些技术被用来保证数据的发送。其中一种是通过在卸载事件处理器中创建一个图片元素并设置它的 src 属性的方法来延迟卸载以保证数据的发送。因为绝大多数用户代理会延迟卸载以保证图片的载入，所以数据可以在卸载事件中发送。另一种技术是通过创建一个几秒钟的 no-op 循环来延迟卸载并向服务器发送数据。

这些技术不仅编码模式不好，其中的一些甚至并不可靠而且会导致非常差的页面载入性能。

官方示例

window.addEventListener('unload', logData, false);

function logData() {
    navigator.sendBeacon("/log", analyticsData);
}

data 参数是将要发送的 ArrayBufferView 或 Blob, DOMString 或者 FormData 类型的数据。

缺点是不能设置复杂的请求头，数据格式也有要求。

image