项目中的埋点

最新推荐文章于 2024-08-27 11:06:55 发布

weixin_30906671

最新推荐文章于 2024-08-27 11:06:55 发布

阅读量486

点赞数 1

文章标签：前端 javascript 前端框架 ViewUI

原文链接：http://www.cnblogs.com/sherrycat/p/11156560.html

版权

什么是埋点

所谓“埋点”，是数据采集领域（尤其是用户行为数据采集领域）的术语，指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。

埋点的技术实质，是先监听软件应用运行过程中的事件，当需要关注的事件发生时进行判断和捕获，然后获取必要的上下文信息，最后将信息整理后发送至服务器端。所监听的事件，通常由操作系统、浏览器、APP框架等平台提供，也可以在基础事件之上进行触发条件的自定义（如点击某一个特定按钮）。一般情况下，埋点可以通过监测分析工具提供的SDK来进行编程实现。

（SDK：软件开发工具包，Software Development Kit）

埋点的目的

在简书上看到@老虎色举的例子：

平时我们支付的时候打开支付宝，打开扫一扫，扫描对方的二维码，输入金额（2元，小金额免输入支付密码），点击确认，支付成功。

你为了资金的安全，做了两个设定。打开支付宝，打开扫一扫，扫描对方的二维码，弹出提示“您正在付款，请输入密码”，然后要你先输入支付密码（不能免输入），然后在输入金额（2元），点击确认时，弹出提示“为了保障你的安全，请先进行实名认证”，接着跳转到认证的页面。

先不管这两个设定是否合情合理，你这里就可以以埋点的形式将两次弹出做行为收集，并对相应的动作进行连串行为分析，并以此为根据形成用户画像等最终数据。

几种埋点方式

手记上的@谯洪敏对几种埋点做了详细的总结。

1.手动埋点（代码埋点）

纯手动写代码，调用埋点SDK的函数，在需要埋点的业务逻辑功能位置调用接口上报埋点数据。

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

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

手动埋点的本质：

从javascript中能轻松获得以下信息：

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

手动埋点常用方式：

（1）命令式

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

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

（2）声明式

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

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

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

（4）css埋点

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

这里使用了很巧妙的css的某些特征，这些可以触发发送请求的特征。

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

2.可视化埋点（框架式埋点、无痕埋点）

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

可视化埋点配置化能力相对手动埋点更强，是对手动埋点的补充而不是代替，很多手动埋点点都可以通过好的规划和架构变为可视化埋点。

3.无埋点

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

通过这个SDK代码，前端会自动全量采集全部事件并上报埋点数据，能够呈现用户行为的每一次点击、每一次跳转、每一次登录等全量、实时用户行为数据，这些数据传到后端后，可通过用户分群、漏斗对比等功能，分析不同访问来源、不同城市、不同广告来源等多维度的不同转化细节，细而全。

无埋点的优势：无埋点相比可视化埋点，在解决数据“回溯”问题上更有优势，如果你想分析某一天某个控件的点击情况，如果你没有针对这个按钮做可视化埋点，则只能从你针对这个按钮做可视化配置的这一时刻之后才有埋点数据，而无埋点，则从你部署SDK那一刻就一直有数据在收集；无埋点做热力图也更有优势，无埋点可以告诉使用者这个界面上每个控件分别被点击的概率是多大，通过热力图清晰可见。

无埋点劣势：自定义属性不灵活，传输时效性差，数据可靠性欠佳，耗费网络流量，还会增加服务器负载，而且兼容性也不佳。