埋点?数据统计?关闭浏览器前发送请求?看完这一篇搞定

2,792 阅读3分钟

这是我参与8月更文挑战的第 1 天,活动详情查看: 8月更文挑战

点赞、收藏、评论,三连击,回家不迷路 故事是这样发生的,由于公司业务发展需要,产品需要对不同人访问做一个访问记录及访问时长,这个访问时长就很难了,从开始到结束这个过程,我们需要把时间上传服务器,如果正常埋点你会发现,还没发送完成就已经被中止了。
于是我在百度上不停的查找方法,有时搜索手势不对,对收搜结果差别还是很大的,刚开始搜索我找到了一个叫onbeforeunload的事件,这是关闭浏览器前或者刷新浏览器会触发的事件,让我感觉希望的前线,具体如下:

onbeforeunload 事件属性

windowwindow.onbeforeunload=function(e){       
    var e = window.event||e;
    e.returnValue=("确定离开当前页面吗?");
}

等你搬到你代码里面你会发现,确实可以阻拦浏览器关闭或者刷新,但是出现弹框后所以js都不会执行了,请求也会停留,这。。。不符合我的需求啊。onbeforeunload详情解析


无奈,我只能继续开始寻找,寻找一个适合需求的方法,几经查找几个小时,发现一个新的方法它叫navigator.sendBeacon,刚开始我是一脸蒙逼的,内心不停的思索,这个玩意能满足我的需求?这么简单能发起请求?这东西怎么用,会不会很复杂?三连击连问。说实话能,解决三连问的问题

今日主角 navigator.sendBeacon(url, data)

  • url

    url 参数表明 data 将要被发送到的网络地址。

  • data

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

// 1. DOMString类型,该请求会自动设置请求头的 Content-Type 为 text/plain
const reportData = (url, data) => {
  navigator.sendBeacon(url, data);
};

// 2. 如果用 Blob 发送数据,这时需要我们手动设置 Blob 的 MIME type,
// 一般设置为 application/x-www-form-urlencoded。
const reportData = (url, data) => {
  const blob = new Blob([JSON.stringify(data), {
    type: 'application/x-www-form-urlencoded',
  }]);
  navigator.sendBeacon(url, blob);
};

// 3. 发送的是Formdata类型,
// 此时该请求会自动设置请求头的 Content-Type 为 multipart/form-data。
var data = {
   name: '前端名狮子'  ,
   age: 20
};
const reportData = (url, data) => {
  const formData = new FormData();
  Object.keys(data).forEach((key) => {
    let value = data[key];
    if (typeof value !== 'string') {
      // formData只能append string 或 Blob
      value = JSON.stringify(value);
    }
    formData.append(key, value);
  });
  navigator.sendBeacon(url, formData);
};
// 监听网页关闭或刷新
window.addEventListener('unload', logData, false);

function logData() {
    navigator.sendBeacon("/log", analyticsData);
}
    1. 先讲解线上测试方法
    • 判断是否发送成功线上测试地址
    • 测试代码写法,如下:
    if ('sendBeacon' in navigator) {
      window.addEventListener('pagehide', function() {
        navigator.sendBeacon(
          'https://putsreq.herokuapp.com/4GE2nVUuDoDGsNyKES2G',
          'Sent by a beacon!2');
      }, false);
    }
    
    • 测试结果查看方法如下(可以结合图片):
      1. 可以查看Requests次数。
      2. 测试前,可以清空记录clear history
      3. 查看发送请求头及内容Headers

image.png

    1. 可以利用浏览器自带保留请求接口或控制台输出的方法,刷新查看是否发送请求(这里需要注意几点)
    • 1.接口查看需要先点击preserve log,然后点击All,在网络捉取才会出现,因为navigator.sendBeacon发送的请求类型不属于平时请求的XHR类型。
    • 2.控制台查看需要先点击preserve log,然后刷新就不会把之前输出的全部清空。
    • 3.可以结合下面的图片进行操作,很方便。最后上传完可以叫后端查看数据是否提交成功了。

image.png

image.png

浏览器兼容性

image.png

这个博客也写的很详细

喜欢记得点个赞,谢谢