埋点

1 什么是埋点

首先我们来说说什么是数据处理？

数据处理的过程往往追随下面的流程：收据采集—数据传输—数据存储/建模—数据统计/分析/挖掘—数据可视化/反馈。

在这里我们要明确的一点是，数据处理的整个过程中，“数据收集” 是第一步，它是我们进行数据分析的大前提，收集的数据将会直接影响最后的分析结果。所以，我们应重点考虑到收集数据的可靠性

• 接下来我们再说说什么是埋点？

简单的说，埋点就是定时、定点的采集数据，然后上报。

• 埋点方案有哪些？

方案一：代码埋点。就是在需要数据采集的地方抓取数据，然后上传。其优点在于它的准确性和针对性，指哪儿打哪儿，不浪费一颗子弹。

本文章所说的埋点指的是代码埋点

方案二：可视化埋点

方案三：无埋点

2 为什么要做埋点

我们统计每一位用户地图加载时长，附近单车出现时间，开锁耗时等关键性指标，以便对用户行为进一步分析优化。

3 埋点小工具 track.js 的使用方法

（1）引入

在当前文件中引入track

const { track } = require('../../utils/util')

（2）使用

track({
   action: {
      type: 'REQUEST',
      entityInfo: {
         entityType: 'BANNER',
         entityName: 1
      }
   },
   entityInfo: {
      entityBizType: 9
   },
   atPage: {
       pageName: 'MAIN_PAGE'
   }
})

4 埋点小工具实现原理

总体思路：

实现一个埋点小工具 track.js，在项目里需要进行埋点的位置都可以引入、调用，然后就可以自动发送埋点请求了

（1）设计 log 日志内容和数据格式

如下截图是一张

（2）收集日志，并发送给后端

注：下面写了一个最简单的收集日志小工具（track.js精简版），主要是为了凸显原理

let timer
var _track = {
  tasks: [], //任务队列，用于收集多个日志
  log(data) {
    _track.tasks.push(data)
    this.send()
  },
  send() {
    if(!timer) {
      timer = setInterval(function() { //定时器，控制日志延迟发送，不影响业务请求顺利发出
         _track.tasks.forEach(data => {
            // 在这里发送 log 日志
            request({
                url: 'https://XXX/x.gif' //请求一个空gif,目的是携带要发送的 log 日志
                data: {
                  client_id: 'html5',
                  log: JSON.stringify(data)
                }
            })
         })
         _track.tasks = []
         clearInterval(timer)
         timer = null
      }, 2000)
    }
  }
}
 
function track(data) {
    return _track.log(data)
}
  
// 缩短暴露出的方法名
function fn() {
  return track.log.apply(track, [].slice.call(arguments))
}
 
for (var name in track) {
  fn[name] = track[name]
}
 
module.exports = fn

（3）track.js 使用方法

在需要埋点的文件里面引入，直接调用track（）传递参数即可，在第 3 节使用方式里面已经说明

（4）调用 track() 之后发生了什么

track({params}) 被调用之后，日志内容以参数形式发送到 “空 gif” 请求里，这也是通用的日志统计方式

4 结合小程序业务埋点需要考虑的因素

（1）每次埋点内容都包括：用户信息，城市信息，地理位置。考虑如何实现？

• 思路：

在用户打开小程序的时候，一次性获取到用户的用户信息userId，城市信息location，地理位置citycode ，这三个值通常会被缓存在 storage 里面。然后在小程序运行过程中每一次需要发送 log 日志的时候，把其他值追加到这三个值后面

注意，这里应用缓存可以提升性能哦

• 代码实现：

track 小工具里面实现一个方法 getCommon()，并将这个方法暴露出去。在小程序启动的时候调用 getCommon() 收集用户信息，城市信息，地理位置这三个指标值

（2）每次埋点内容都包括：网络状态。考虑如何实现？

网络状态networkType

和上边一样做了缓存，并且会和其他日志内容一起被发送，具体缓存到哪里去了呢，待解答

（3）前端向后端发送数据统计请求埋点，怎么发送？

• 思路：

log 内容以参数形式发送到 “空 gif” 请求里，这也是通用的日志统计方式

• 代码实现：

wx.request({
  url: 'https://log.mobike.com/log/x.gif',
  data: {
    log: '{startTime: 1530179125563, endTime: 1530179138793, ...}'
  }
})

（4）初次进入小程序，会有多个统计指标要发送，同时业务上也要发出多个数据请求。如何协调这两者之间的发送顺序？

• 思路：

优先发送业务上的数据请求，统计指标 log 延后发送。如何做到延后呢？选定一个节点表示业务请求发送完成，比如附近的车出现，再统一发送所有埋点请求。这里要注意的一点是，log 的请求和业务的请求是独立的，没有封装到一起。

• 代码实现：

setInterval(function() { // 延迟两秒发送
  if (!wx.isRequestBusy) { // 如果现在没有发送业务请求，那就可以发送埋点请求咯
      // 在这里发送埋点请求
  }
}, 2000)

wx.isRequestBusy 是在 utils/request 里面自定义的方法，不是 wx 原生自带的方法。它用于标识当前业务是否处于 busy 状态，而不是用于标示 log 是否处于 busy 状态。