埋点是啥

最近做了一个有关埋点的需求，第一次听说埋点，有点懵逼，但是后面了解了一番，项目做了下来，从前端层面来说，感觉也没有那么难以理解，反而有点好玩，用通俗的话来讲，埋点就是在代码的世界里特定的地方安装的代码监控器，然后把它看到的内容，以及用户的交互用代码记录下来，给后台分析用户行为的捕获数据进而进行数据分析的一种手段。

埋点的类型

埋点的方式一般来说有三种；

1、展现埋点
展现其实是一个服务端的触发。服务端被触发后，用户侧将会展现什么内容，展现埋点需要记录的是页面展现的内容信息，即服务端下发的内容是什么（这些东西一定是当前页面主要内容，不包含一些交互信息）。
2、曝光埋点
哪些下发的内容被用户实际看到了。和展现埋点类似，由于屏幕有限，但内容可以无限。哪些内容被用户侧实际看到（曝光），需要记录的是单个“内容”被看到。一系列被下发的内容，可以触发多次曝光埋点。
3、交互埋点
交互埋点表明的是功能/内容被用户“点击”了。从埋点时机来说，这个是展现 & 曝光的下游。记录对于我们提供的“服务”的“消费”情况。比如，一个页面，用户可以点击，那么我们需要记录相应的交互动作埋点；比如，一个视频可以点赞，我们也可以记录交互埋点；比如，一个视频可以播放暂停，我们也可以记录消费埋点。总体来说，就是，我们要记录被看到的可交互功能/信息的“消费”数据。

埋点的上报方式

埋点的上报方式有三种；

1、手动埋点

手动埋点其实是代码埋点，他的本质其实就是用js代码拿到一些基本信息，然后在一些特定的位置返回给服务端，拿到数据以后我们可以在提交，或者通过图片的方式去提交埋点内容
这种埋点方式虽然能精准的监控到用户的行为，和网页性能等数据，但是你会发现，非常繁琐，需要大量的工作量，当然这部分工作也有人帮我们做了，比如像友盟、百度统计等给我们其实提供了服务。我们可以按照他们的流程使用手动埋点。

2、可视化埋点

这种埋点方案，又叫无痕埋点，解放了前端手动操的工作量，其实本质就是用系统去插入本来需要手动插入的埋点，这种埋点方式由于自带技术壁垒，所以开发人员基本基本不用考虑，花钱即可，比较靠谱的服务商国外的Mixpanel，国内较早支持可视化埋点的有TalkingData、诸葛 IO，腾讯 MTA 等。

3、无埋点

无埋点并不是没有任何埋点，所谓无只是不需要工程师在业务代码里面插入侵入式的代码。只需要简单的加载了一段定义好的SDK代码，技术门槛更低，使用与部署也简单，避免了需求变更，埋点错误导致的重新埋点。这也是大多网站的选择。

埋点实践

1 代码埋点

代码埋点的实践在vue项目中，埋点的代码尽量与业务代码分开，所以采用自定义指令的方式:

import track from './track.js'
export default {
  bind(el, binding, vnode) {
    el.addEventListener('click', () => { // 绑定事件
      track(binding.value); // 上送埋点
    })
  },
  unbind(el, binding, vnode) {
    el&&el.removeEventListener('click', () => { // 解绑事件
      track(binding.value);
    })
  }
}

埋点的使用

<el-button v-clickTrack="{
  'name': '表单页面-确定按钮-点击',
  'type': '点击',
  'id': '',
  'from': ''
}">确定</el-button>

2神策埋点

后续继续更新举例如何简单的使用神策埋点

前端有关埋点的科普