记录埋点用到的api

埋点背景

收集一段时间内用户光标在页面中的运动情况，包括光标移动、点击等行为：

统计用户在站点的停留时长
收集页面链接的点击数量等
统计页面停留时长时，用户关闭或者跳出页面的时候，请求未发出。

统计方式：

当前页面关闭的时候统计
- 统计时机： unload、beforeunload事件
- 问题：用户关闭或者跳出页面的时候，请求未发出
跳转到新的页面后统计
- 统计时机：将数据传递给下跳页，在下跳页发送数据
- 问题：下跳页中必须部署同样的统计脚本

几种方案的分析

通过beforunload或者unload事件

当前页面关闭统计方案

当前页面关闭统计方案解的思路就是阻塞页面关闭，先发数据统计请求，然后再关闭页面

阻塞AJAX请求的进行，使用同步AJAX

    window.addEventListener('unload',
      e => {
        sendLog()
      },
      false
    )
    function sendLog() {
      var xhr = new XMLHttpRequest()
      // 同步请求
      xhr.open(
        'post',
        url,
        false
      )
      xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8', false)
      const data = dealLogData({
        eventName: 'nov_lottery_page_demodmeo',
        properties: {
          eventId: '活动页面',
          label: '显示11月抽奖活动页面'
        }
      })
      xhr.send(JSON.stringify(data))
    }

用img阻塞AJAX请求

    window.addEventListener('unload',
      e => {
        this.postPoint({
          eventName: 'nov_lottery_page_demodmeo',
          properties: {
            eventId: '活动页面',
            label: '活动页面'
          }
        })
        new Image().src =
          'https://tse1-mm.cn.bing.net/th/id/OET.da357be831fd4520a7b69594bcba30b4?w=272&h=272&c=7&rs=1&o=5&pid=1.9'
      },
      false
    )

Beacon API Beacon 接口用于将异步和非阻塞请求发送到服务器。信标（Beacon ）请求使用HTTP协议中的POST方法，请求通常不需要响应。这个请求被保证在，页面的unload状态从发起到完成之前，被发送。而并不需要一个阻塞请求，例如 XMLHttpRequest 。

window.addEventListener('unload', function(event) {
  navigator.sendBeacon('/collector', data);
});

在开发环境一切正常，发到真机上，一切...不太正常！你会发现这个方法在IOS设备上可以正常发送请求，而在安卓设备上却会报错，需要request header为 CORS-safelisted-request-header

【实战篇】h5埋点与上报

埋点背景

几种方案的分析

当前页面关闭统计方案