vue项目埋点

时间: 2020-01-24阅读: 17标签: 埋点

主流埋点方案

目前主流的埋点方案包括

  1. 代码埋点
  2. 可视化埋点
  3. 无埋点


一、代码埋点

在需要埋点的节点调用接口,携带数据上传。如百度统计等;

 缺点

工作量较大,每一个组件的埋点都需要添加相应的代码,入侵业务代码,增加项目复杂度。


二、可视化埋点

通过可视化交互的手段,代替代码埋点。将业务代码和埋点代码分离,提供一个可视化交互的页面,输入为业务代码,通过这个可视化系统,可以在业务代码中自定义的增加埋点事件等等,最后输出的代码耦合了业务代码和埋点代码。

可视化埋点听起来比较高大上,实际上跟代码埋点还是区别不大。也就是用一个系统来实现手动插入代码埋点的过程。

 缺点:

业务属性数据,例如,订单号、金额、商品数据量等,通常要调用后台的接口,可视化埋点在这方面的支持有限;

需要借助第三方工具实现。


三、无埋点

无埋点并不是说不需要埋点,而是全部埋点,前端的任意一个事件都被绑定一个标识,所有的事件都别记录下来。
通过定期上传记录文件,配合文件解析,解析出来我们想要的数据,
并生成可视化报告供专业人员分析因此实现“无埋点”统计。

 缺点

无法灵活的定制各个事件所需要上传的数据

无埋点采集全量数据,给数据传输和服务器增加压力

代码埋点分类

代码埋点分为 命令式埋点和声明式埋点

命令式埋点

顾名思义,开发者需要手动在需要埋点的节点处进行埋点。如点击按钮或链接后的回调函数、页面ready时进行请求的发送。大家肯定都很熟悉这样的代码

$(document).ready(function(){    
 
    // ... 这里存在一些业务逻辑    
 
    sendRequest(params);  //埋点
 
});
 
 // 按钮点击时发送埋点请求
 
 $('button').click(function(){    
 
    // ... 这里存在一些业务逻辑    
 
    sendRequest(params);  //埋点
 
});

声明式埋点

声明式埋点对命令式埋点做了改进,将埋点的代码与具体的业务逻辑解耦。从而提高埋点的效率和代码的可维护性。代码如下:

// key表示埋点的唯一标识;act表示埋点方式
<button v-log="{caption:'登录页', paras: '用户点击验证码发送'}">发送验证码</button>



//自定义指令
Vue.directive('log', {
 
    bind( el, binding ){
 
 
        el.addEventListener('click', ()=>{
 
            Axios.post  //发送请求
 
        })
 
    }
 
})

只需要在需要记录的组件中配置使用v-log指令,加上详情参数就可以完成用户轨迹记录。如下:

// caption表示埋点的模块;paras表示用户的行为
<button v-log="{caption:'登录页', paras: '用户点击验证码发送'}">发送验证码</button>
站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/8336

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广