（转）前端埋点的那些事

为什么要埋点？现在的互联网公司越来越关注转化、新增、留存，而不是简单的统计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); //同上
});

这里的sendData有很多种方式，比如基于ajax发送json数据，或者使用url连接带上params，或者使用一像素图片带上数据，在或者使用head带上埋点也可以。封装方式多种多样。

 

• 声明式

<button data-mydata="{key:'uber_comt_share_ck', act: 'click',msg:{}}">打车</button>

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

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

• css埋点：

.link:active::after{
    content: url("http://www.example.com?action=yourdata");
}
<a class="