关于前端埋点

为什么要埋点？现在的互联网公司越来越关注转化、新增、留存，而不是简单的统计PV、UV。而完整的数据采集是一切的前提。

埋点包括在IOS、Android、H5、小程序等前端埋点，也包括后端业务埋点。这里仅仅讲讲这些年和产品经理、运营撕逼上百个回合的前端埋点内容。

说说手工埋点、可视化埋点、无埋
手动埋点（代码埋点）
纯手动写代码，调用埋点SDK的函数，在需要埋点的业务逻辑功能位置调用接口上报埋点数据，友盟、百度统计等第三方数据统计服务商大都采用这种方案；

手动埋点让使用者可以方便地设置自定义属性、自定义事件。所以当你需要深入下钻，并精细化自定义分析时，比较适合使用手动埋点。

手动埋点的缺陷就是，项目工程量大，需要埋点的位置太多，而且需要产品开发运营之间相互反复沟通，容易出现手动差错，如果错误，重新埋点的成本也很高。这会导致整个数据收集周期变的很长，收集成本变的很高，而且效率很低。因为手动埋点需要开发人员完成，所以每次有埋点更新，或者漏埋点，都需要重新走上线发布流程，更新成本也高，对线上系统稳定性也有一定危害。

手动埋点的技术本质是什么呢？

我们看看从javascript中能轻松获得哪些信息：

域名：document.domainURLdocument.URL
页面标题：document.title
分辨率：window.screen.height & window.screen.width
颜色深度：window.screen.colorDepth
Referrer：document.referrer
客户端语言：navigator.language
除了上面的列举的常规信息以外，还有大量的业务数据，都需要通过手动写javascript去实现。

代码手动埋点常用的方式有以下几种：

命令式

$(document).ready(()=>{
// … 这里是你的业务逻辑代码
sendData(params); //这里是发送你的埋点数据，params是你封装的埋点数据
});
// 按钮点击时发送埋点请求
$(‘button’).click(()=>{
// … 业务逻辑
sendData(params); //同上
});
声明式

打车
这里声明了自定义属性data-mydata，你可以在你的SDK中去扫描和识别这些自定义属性，并解析封装数据，在SDK中按照自定义规则去绑定事件并发送埋点数据。

前端框架式

如果使用Vue或者React等前端框架，这些框架都有自己的各种生命周期，为了减少重复性的手动买点次数，可以再各个生命周期位置，根据你的需求封装你所需的埋点，比如你是SPA单页应用，你希望在每一个页面的componentDidMount埋点，并由此确定用户已经打开了页面。

css埋点

.link:active::after{
content: url(“http://www.example.com?action=yourdata”);
}
点击我，会发埋点数据
这里用了很巧妙的css的某些特征，这些可以出发发送请求的特征。

以上是比较常见的手动埋点方案，当然还有很多其他方式和有待挖掘的方案，也请大家补充

可视化埋点（框架式埋点，无痕埋点）
解决了纯手动埋点的开发成本和更新成本，通过可视化工具快速配置采集节点（圈点），在前端自动解析配置，并根据配置上传埋点数据，比起手动埋点看起来更无痕，这里的配置数据可以设置过滤条件，避免针对所有元素（比如全埋点），可以在调用开启自动监控API时通过设置一些特征属性，来过滤不符合条件的元素，实现只针对某些元素进行自动上报数据的需求。

比如国外比较早做可视化的是Mixpanel，国内比较早支持可视化埋点的有TalkingData，诸葛IO，2017年腾讯的MTA也宣布支持可视化埋点；相比于手动埋点更新困难，埋点成本高的问题，可视化埋点优化了移动运营中数据采集的流程，能够支持产品运营随时调整埋点，无需再走发版流程，直接把配置结果推入到前端，数据采集流程更