摘要：主流埋点方案目前主流的埋点方案包括代码埋点可视化埋点无埋点一代码埋点在需要埋点的节点调用接口，携带数据上传。二可视化埋点通过可视化交互的手段，代替代码埋点。也就是用一个系统来实现手动插入代码埋点的过程。
主流埋点方案
目前主流的埋点方案包括
代码埋点
可视化埋点
无埋点
在需要埋点的节点调用接口，携带数据上传。如百度统计等；
缺点
工作量较大，每一个组件的埋点都需要添加相应的代码，入侵业务代码，增加项目复杂度。
通过可视化交互的手段，代替代码埋点。将业务代码和埋点代码分离，提供一个可视化交互的页面，输入为业务代码，通过这个可视化系统，可以在业务代码中自定义的增加埋点事件等等，最后输出的代码耦合了业务代码和埋点代码。
可视化埋点听起来比较高大上，实际上跟代码埋点还是区别不大。也就是用一个系统来实现手动插入代码埋点的过程。
缺点:
业务属性数据，例如，订单号、金额、商品数据量等，通常要调用后台的接口，可视化埋点在这方面的支持有限；
需要借助第三方工具实现。
无埋点并不是说不需要埋点，而是全部埋点，前端的任意一个事件都被绑定一个标识，所有的事件都别记录下来。通过定期上传记录文件，配合文件解析，解析出来我们想要的数据，并生成可视化报告供专业人员分析因此实现“无埋点”统计。
缺点
无法灵活的定制各个事件所需要上传的数据
无埋点采集全量数据，给数据传输和服务器增加压力
代码埋点分类 代码埋点分为 命令式埋点和声明式埋点
顾名思义，开发者需要手动在需要埋点的节点处进行埋点。如点击按钮或链接后的回调函数、页面ready时进行请求的发送。大家肯定都很熟悉这样的代码：
// 页面加载时发送埋点请求
$(document).ready(function(){
// ... 这里存在一些业务逻辑
sendRequest(params);
});
// 按钮点击时发送埋点请求
$("button").click(function(){
// ... 这里存在一些业务逻辑
sendRequest(params);
});
声明式埋点对命令式埋点做了改进，将埋点的代码与具体的业务逻辑解耦。从而提高埋点的效率和代码的可维护性。代码如下:
// key表示埋点的唯一标识；act表示埋点方式
因为项目采用Vue框架，所以使用Vue中的自定义指令完成声明式埋点。
Vue.directive("log", {
bind( el, binding ){
el.addEventListener("click", ()=>{
Axios.post
})
}
});
只需要在需要记录的组件中配置使用v-log指令，加上详情参数就可以完成用户轨迹记录。如下:
// caption表示埋点的模块；paras表示用户的行为
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/53792.html
获取用户的交互习惯及喜好，进一步提升转化率，可以在之前的埋点方案实现中，都是在具体的按钮或者图片被点击或者被曝光时主动通过事件去上报埋点。但这种方法适合在埋点比较少时还行的项目，遇见项目中需要大量埋点时，添加的代码就太多了，就会埋点逻辑与业务逻辑的高耦合。 由此需要换种方式。我先给大家普及下埋点上报方式都有哪些？ 手动埋点 可视化埋点 无痕埋点 手动埋点，顾名思义就是纯手动写代码，调...
摘要：项目架构项目目录项目目录是采用自动生成，其它按需自己新建就好了。 项目架构 项目目录 ├── build ├── config ├── dist │ └── static │ ├── css │ ├── fonts │ ├── images │ ├── js │ └── lib ├── src │ ├── api │ ...
摘要：项目架构项目目录项目目录是采用自动生成，其它按需自己新建就好了。 项目架构 项目目录 ├── build ├── config ├── dist │ └── static │ ├── css │ ├── fonts │ ├── images │ ├── js │ └── lib ├── src │ ├── api │ ...
阅读 2870·2021-10-14 09:43
阅读 1655·2021-09-29 09:34
阅读 1743·2021-07-28 00:16
阅读 2962·2019-08-30 15:53
阅读 2903·2019-08-30 13:59
阅读 2960·2019-08-30 13:57
阅读 1089·2019-08-26 13:38
阅读 1892·2019-08-26 13:25
