vue埋点框架,vue数据埋点,vue项目前端埋点的实现

vue埋点框架,vue数据埋点,vue项目前端埋点的实现

本文主要介绍vue项目前端嵌入点的实现,通过示例代码进行了非常详细的介绍,对大家的学习或工作有一定的参考价值。有需要的朋友下面和边肖一起学习。

埋点方案的确定。行业的掩埋方案主要分为以下三类:

代码嵌入:在需要嵌入的节点调用接口,用它上传数据。如百度统计;

可视化嵌入:通过可视化工具配置的嵌入,即所谓的“无痕嵌入”。页面加载时,前端可以读取配置数据,自动调用接口进行嵌入。比如开源的Mixpanel

无埋点:前端自动收集所有事件并报告埋点数据。比如国内的神策数据;

当时工期紧,人力不足,显然不允许我们开发可视化嵌入方案,也没有嵌入方案,只好采用代码嵌入方案。

命令式埋点

命令式嵌入,顾名思义,开发者需要手动嵌入需要嵌入的节点。比如点击按钮或链接后的回调函数,当页面准备好时发送请求。每个人都必须熟悉这个代码:

//页面加载时发送嵌入请求。

$(文档)。ready(function(){

//.这里有一些商业逻辑

sendRequest(参数);

});

//单击按钮时发送隐藏请求。

$('button ')。单击(函数(){

//.这里有一些商业逻辑

sendRequest(参数);

});

我们很容易发现,这种做法很可能会将嵌入式代码侵入到业务代码中,使得整个业务代码变得繁琐且容易出错,后续的代码也会变得更加膨胀且难以维护。因此,我们需要将掩埋代码与具体的业务逻辑解耦,即声明性掩埋代码,以提高掩埋代码的效率和代码的可维护性。

声明式埋点

理论上,声明式嵌入只需要关注两个问题:

需要掩埋的DOM节点;

所需数据

因此,我们可以很快想出一种声明式嵌入的方法:

//key表示埋藏点的唯一标识;Act表示埋点模式。

按钮数据-stat=' {key:' 111 ',act:' click'} '埋点/按钮

然后可以遍历DOM树,找到[data-stat]的节点,将click事件绑定到这个按钮上,通过请求在回调函数中发送这些参数。

在DOM节点(html)上声明埋藏点与业务逻辑(通常在Javascript文件中)是分离的。打电话也很方便。

看起来很美,但是这样能解决问题吗?显然,这是不够的。还需要解决以下问题:

遍历DOM树的时间是一个简单的例子。表格的行数据是异步加载的,表格所在行的操作按钮需要被埋起来,所以遍历DOM ready时显然是找不到的。

掩埋事件的数量问题,如何保证掩埋事件不会重复绑定到元素,一次操作发送N个掩埋请求?

如何处理特有的掩埋行为,比如显示掩埋点的页面,显示掩埋点的区域?

解除绑定时如何销毁绑定的事件?

1.自定义指令实现埋点数据统计

通常有必要在项目中进行数据嵌入。这时,使用自定义命令将非常简单。

在项目条目文件main.js中配置我们的定制指令

//坑位置指令

Vue.directive('stat ',{

bind(el,binding) {

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

const data=binding.value

let前缀=' store

if (OS.isAndroid || OS.isPhone) {

前缀=' mall

}

analytics.request({

ty: `${prefix}_${data.type} `,

dc: data.desc || ' '

},' n ');

},假);

}

});

2.使用路由拦截统计页面级别的 PV

因为第一次尝试在单页应用中嵌入数据,项目上线一周后,数据统计后台发现首页的PV远高于其他页面,数据非常异常。后来和数据后台的人交流,问了埋点的统计原理,才发现问题。

传统应用在页面加载的时候一般会有一个异步的js加载,就像百度的统计代码一样,所以我们在加载每个页面的时候,都会统计数据;但是在单页面应用中,页面加载只初始化一次,所以其他页面的统计需要我们自己手动上报。

解决办法

使用vue-router的beforeEach或afterEach钩子来报告数据。根据业务逻辑选择哪一个最好。

const analyticsRequest=(to,from)={

//只统计页面跳转数据,不统计当前页面查询的不同数据。

//所以这里只使用了path。如果需要计数查询,可以使用to.fullPath

if (to.path!==from.path) {

analytics.request({

URL:` { location . protocol }//{ location . host } { to . path } `

});

}

};

router.beforeEach((收件人,发件人,下一个)={

if(to . matched . some(record=record . meta . requires auth)){

//这里进行登录等前置逻辑判断。

//判断通过后,上报数据。

.

analyticsRequest(至,自);

}否则{

//如果不需要判断,直接报数据。

analyticsRequest(至,自);

next();

}

});

在组件中使用我们的自定义说明。

基于 jquery + widget 的老项目,

然后这些项目中的DOM操作都是通过jquery甚至原生DOM API实现的,Vue的自定义指令无法工作。

基于变异观察器API的Mixin

MutationObserver是DOM3标准中提出的标准API,它为开发者提供了感知某个DOM节点变化的能力。您可以监控以下场景:

ChildList:插入和删除目标节点的子节点引起的更改。

属性:目标节点属性变化引起的变化。

CharacterData:目标节点的文本节点变化引起的变化,比如通过appendData()。

子树:目标节点的后代节点变化引起的变化。

AttributeOldValue:当属性监听设置为true时,可以记录更改前的属性值。

CharacterDataOldValue:当characterData monitoring设置为true时,可以记录更改前的属性值。

AttributeFilter:您可以设置要监控的属性列表。

不过为了保证MutationObserver能在所有浏览器中正常工作,我们还是引入了这个API的polyfill。详情可以在这里找到。

在具备这种能力的前提下,我们可以在任何DOM操作下触发Vue重新解析指令。

我们把MutationObserver封装成一个Vue mixin,非Vue应用的业务代码只需要引入这个mixin,也可以很好的解耦。

详细的实现原理可以在下面的伪代码中找到:

让观察者;

导出默认值{

ready() {

//打开监视

观察者=新突变观察者(突变={

这个。$编译(这个。$ El);

});

observer.observe(这个。$el,config);

},

销毁(){

//清洁工作

observer . disconnect();

observer . taker records();

}

}

这就是本文的全部内容。希望对大家的学习有帮助,支持我们。

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: