前端埋点杂记

不论是哪个公司，对于投入了相当人力财力而发布的网页或者网站，总想知道效果如何，是否能达到预期的效果。那么要了解具体的效果，真实数据的支持是不可或缺的。其中前端的埋点是重要数据的来源之一。

埋点是网站分析的一种常用数据采集方法，采集的对象主要有用户行为数据，页面性能。大部分采集到的原始数据，还需要进行后期的加工，才能用于分析具体的表现。

埋点中有一部分是关于页面性能的数据，比如白屏时长、页面的http请求时间、页面的渲染时间、首屏加载时长等。通过Performance 我们便能拿到DNS 解析时间、TCP 建立连接时间、首页白屏时间、DOM 渲染完成时间、页面 load 时间等，如下所示：

//拿到Performance并且初始化一些参数
let timing = performance.timing,
start = timing.navigationStart,
dnsTime = 0,
tcpTime = 0,
firstPaintTime = 0,
domRenderTime = 0,
loadTime = 0;
//根据提供的api和属性，拿到对应的时间
dnsTime = timing.domainLookupEnd - timing.domainLookupStart;
tcpTime = timing.connectEnd - timing.connectStart;
firstPaintTime = timing.responseStart - start;
domRenderTime = timing.domContentLoadedEventEnd - start;
loadTime = timing.loadEventEnd - start;

console.log('DNS解析时间:', dnsTime,
'nTCP建立时间:', tcpTime,
'n首屏时间:', firstPaintTime,
'ndom渲染完成时间:', domRenderTime,
'n页面onload时间:', loadTime);

拿到这些数据后我们可以通过Ajax或者通过图片等的方式去提交埋点内容。

// 页面加载时发送埋点请求
$(document).ready(function(){
    ...
    sendRequest(params);
});
// 按钮点击时发送埋点请求
$('button').click(function(){
    ...
    sendRequest(params);
});

// 通过伪装成 Image 对象，传递给后端，防止跨域
let img = new Image(1, 1);
let src = `http://aaaaa/api/test.jpg?args=${encodeURIComponent(args)}`;
img.src = src;

//css实现的埋点
.link:active::after{
    content: url("http://www.example.com?action=yourdata");
}
<a>点击我，会发埋点数据</a>

//data自定义属性，rangjs去拿到属性绑定事件，实现埋点
<button data-mydata="{key:'uber_comt_share_ck', act: 'click',msg:{}}">购买</button>

埋点数据中还包含重要的一些用户行为数据。比如需求方关心的PV/UV（PV指页面浏览量或点击量；UV指访问某个站点或点击某条新闻的不同IP地址的数量）、用户的停留时间、页面的入口、用户的一些交互行为。

PV(page view)，即页面浏览量，或点击量。一个访问者在24小时(0点到24点)内到底看了某网站几个页面。同一个人浏览某网站同一个页面，不重复计算pv量，点n次也算1次。pv就是一个访问者打开了你的几个页面。

UV(unique visitor)，指访问某个站点不同IP地址的数量。当然这是基于ip的统计解释。在同一天内，uv只记录第一次进入网站的具有独立IP的访问者，在同一天内再次访问该网站则不计数。

此外，产品的前端代码在执行过程中也会发生异常，因此需要引入异常监控。及时的上报异常情况，可以避免线上故障的发上。异常的监控大部分可以通过try catch和window.onerror事件来捕获。

目前常见的前端埋点方法分为三种：代码埋点、可视化埋点和无痕埋点。

代码埋点，就是以嵌入代码的形式进行埋点，比如需要监控用户的点击事件，会选择在用户点击时，插入一段代码，保存这个监听行为或者直接将监听行为以某一种数据格式直接传递给server端。此外比如需要统计产品的PV和UV的时候，需要在网页的初始化时，发送用户的访问信息等。

三种方法对比
埋点方法	定义	优点	缺点
代码埋点	以嵌入代码的形式进行埋点，比如需要监控用户的点击事件，会选择在用户点击时，插入一段代码，保存这个监听行为或者直接将监听行为以某一种数据格式直接传递给server端。此外比如需要统计产品的PV和UV的时候，需要在网页的初始化时，发送用户的访问信息等。	可以在任意时刻，精确的发送或保存所需要的数据信息。	工作量较大，每一个组件的埋点都需要添加相应的代码
可视化埋点	通过可视化交互的手段，代替代码埋点。将业务代码和埋点代码分离，提供一个可视化交互的页面，输入为业务代码，通过这个可视化系统，可以在业务代码中自定义的增加埋点事件等等，最后输出的代码耦合了业务代码和埋点代码。	同代码埋点	埋点的控件有限，不能手动定制。
无埋点	无埋点并不是说不需要埋点，而是全部埋点，前端的任意一个事件都被绑定一个标识，所有的事件都别记录下来。通过定期上传记录文件，配合文件解析，解析出来我们想要的数据，并生成可视化报告供专业人员分析因此实现“无埋点”统计。	由于采集的是全量数据，所以产品迭代过程中是不需要关注埋点逻辑的，也不会出现漏埋、误埋等现象	无埋点采集全量数据，给数据传输和服务器增加压力；无法灵活的定制各个事件所需要上传的数据