Vue项目代码埋点

主流埋点方案

目前主流的埋点方案包括

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

1、代码埋点

​ 在须要埋点的节点调用接口，携带数据上传。如百度统计等；

​ 缺点

​ 工做量较大，每个组件的埋点都须要添加相应的代码，入侵业务代码，增长项目复杂度。

2、可视化埋点

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

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

​ 缺点:

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

​ 须要借助第三方工具实现。

3、无埋点

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

​ 缺点

​ 没法灵活的定制各个事件所须要上传的数据

​ 无埋点采集全量数据，给数据传输和服务器增长压力

代码埋点分类

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

命令式埋点

​ 顾名思义，开发者须要手动在须要埋点的节点处进行埋点。如点击按钮或连接后的回调函数、页面ready时进行请求的发送。你们确定都很熟悉这样的代码：

// 页面加载时发送埋点请求 

$(document).ready(function(){    

    // ... 这里存在一些业务逻辑    

    sendRequest(params); 

});

 // 按钮点击时发送埋点请求

 $('button').click(function(){    

    // ... 这里存在一些业务逻辑    

    sendRequest(params); 

});

声明式埋点

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

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

​ 由于项目采用Vue框架，因此使用Vue中的自定义指令完成声明式埋点。

Vue.directive('log', {

    bind( el, binding ){


        el.addEventListener('click', ()=>{

            Axios.post

        })

    }

});

​ 只须要在须要记录的组件中配置使用v-log指令，加上详情参数就能够完成用户轨迹记录。以下:

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