vue埋点实例,vue项目埋点
埋点分析是web分析中常用的数据获取方法。下面文章主要介绍如何通过Vue自定义指令实现前端埋点的相关信息。通过示例代码非常详细的介绍，有需要的朋友可以参考一下。
目录
前言埋藏点的举报方式有哪些？一般埋了哪些数据？需求分析，代码实现，点击类封装，暴露类封装，指令封装，使用不足总结
前言
在营销活动中，可以通过埋点获取用户的喜好和交互习惯，从而优化流程，进一步提升用户体验，提高转化率。
在嵌入方案的先前实现中，当特定按钮或图片被点击或暴露时，嵌入点通过事件被主动报告。当项目中的嵌入点很少时，这种方法很好。一旦项目中需要大量的嵌入点，就不可避免的要添加大量的业务代码。很大程度上也造成了掩埋逻辑和业务逻辑的高度耦合。
为了改善这种情况，我们对原有的掩埋方式进行了一些小的改进，大大提高了掩埋效率。
在阐述我们的葬地改造之前，有必要简单了解一些葬地常识。
埋点上报方式都有哪些？
要知道埋藏地点的种类很多，举报的方式也多种多样。有三种常见的前端嵌入方法：
手动嵌入可视化嵌入无痕嵌入手动嵌入，顾名思义就是手动编写代码，调用嵌入SDK提供的函数，给需要嵌入的业务逻辑添加相应的方法，上报嵌入数据。这也是以前用过的方法。
可视化埋葬点是指通过可视化系统对埋葬点进行配置。这样接触的不多，就不展开了。
无痕埋点，也叫自动埋点和全埋点。即拦截并掩埋所有全局事件和页面加载周期。
一般对哪些数据做埋点？
为了达到数据分析的目的，便于后续的运营和产品策略调整，一般需要对以下几点进行埋藏式统计：
页面嵌入：统计用户进入或离开页面的信息，如页面浏览次数(pv)、页面浏览次数(uv)、页面停留时间、设备信息等。点击嵌入：统计用户在页面浏览过程中触发的点击事件，如按钮、导航或图片的点击次数；暴露嵌入：统计特定元素是否被有效暴露。
需求分析
本论文是基于近期工程中增加埋设点的需求。我们需要的理想方案是：
埋点应尽量与业务分离，埋点逻辑应独立于业务，尽量不存在对业务代码的侵入。埋点逻辑要通过统一关闭来处理。由于该项目由Vue开发，因此考虑使用自定义指令来完成埋点报告。之所以选择自定义指令，是因为它可以在一定程度上解耦业务和埋点。
页面嵌入已经在框架级别为我们完成了。这里主要关心的是点击嵌入和暴露嵌入。
其实实现思路也很清晰：在需要掩埋的DOM节点上挂载特殊属性，通过嵌入式SDK监控对应属性对应的事件，事件触发时上报嵌入数据。
那么问题来了，如何监控？
对于click事件，我们可以使用addEventListener来监控click事件。很简单。
元素曝光有点麻烦。
让我们先来看看为什么我们需要监控风险：
为了衡量用户对产品的兴趣，需要计算该区域的点击率(点击/曝光)。为了保证点击率的准确性，我们必须保证用户确实浏览了这些产品(比如上图中机器酒产品的底部区域，因为用户需要滚动页面，所以用户有可能看到这个区域)。
那么如何判断元素出现在页面的可见区域呢？
按照之前的做法：监控滚动事件，通过getboundingClient()方法计算监控区域和窗口的位置，然后判断元素是否出现在页面的可见区域。然而，由于频率
基于此，浏览器特意为我们打造了一个十字路口观察仪，把性能相关的细节都处理掉，让开发者只关心业务逻辑即可：
由于用户浏览页面的不确定性，还必须要避免重复的曝光行为。这个在曝光之后，移除观察即可。
代码实现
上面的需求分析还是比较抽象，下面让我们结合代码来看一下最终的实现。
Click 类封装
点击事件的处理相对比较简单，每次点击触发数据上报即可：
//src/指令/track/单击. js
从导入{ sendUBT }././utils/携程
导出默认类别单击{
添加（条目){
//console.log(entry ，entry)；
常量跟踪值=条目。埃尔。属性[跟踪参数].价值
常量跟踪关键字=条目。埃尔。属性[ trace-key ].价值
const { clickAction，detail }=JSON.parse(traceVal)
常量数据={
动作：点击动作，
细节，
}
入口。埃尔。addevent侦听器( click ，function() {
console.log(上报点击埋点，JSON.parse(traceVal))
console.log(埋点键、跟踪键)
sendUBT(traceKey，data)
})
}
}
Exposure 类封装
曝光的相对复杂一些。
首先通过新的IntersectionObserver()实例化一个全局_观察员，如果得到有效曝光的（这里当元素出现一半以上则进行曝光),就去获取数字正射影像图节点上的跟踪键（埋点关键)和轨道参数（埋点值).
//src/directive/track/exposure。射流研究…
导入"交叉点-观察点"
从导入{ sendUBT }././utils/携程
//节流时间调整，默认100毫秒
路口观察者。原型[节流_超时]=300
导出默认类别风险{
构造函数(){
这个. observer=null
this.init()
}
init() {
const self=this
//实例化监听
这个.观察者=新的交叉观测器(
功能（条目、观察者){
entries.forEach((entry)={
//出现在视窗内
如果(条目。是交集){
//获取参数
//console.log(埋点节点，词条。目标。属性)；
常量跟踪关键字=条目。目标。属性[ trace-key ].价值
常量跟踪值=条目。目标。属性[跟踪参数].价值
console.log(traceKey ，traceKey)
console.log(traceVal ，traceVal)
const { exposureAction，detail }=JSON.parse(traceVal)
常量数据={
行动：揭露行动，
细节，
}
//曝光之后取消观察
自我.观察者。未观察到(条目。目标)
self.track(traceKey，data)
}
})
},
{
root: null，
根边距：“0px”，
阈值：0.5,//元素出现面积，0 - 1,这里当元素出现一半以上则进行曝光
}
)
}
/**
* 元素添加监听
*
* @param {*}条目
* @曝光的成员
*/
添加（条目){
这个。_观察者这个. observer . observer(entry . El)
}
/**
* 埋点上报
*
* @曝光的成员
*/
track(traceKey，traceVal) {
//console.log(曝光埋点、traceKey、JSON。parse(跟踪值))；
sendUBT(traceKey，traceVal)
}
}
指令封装
有了点击和曝光类，下一步就是某视频剪辑软件指令的封装了，也是之所以能实现半自动埋点的核心。
这里存在一个场景就是对于同一个按钮或者图片，同时存在既需要点击埋点又需要曝光埋点的场景。所以在指令的设计时支持了单独传入和同时传入的场景：
v-track:click exposure v-track:exposure//src/directives/track/index。射流研究…
从“vue”导入某视频剪辑软件
导入单击来源。/点击
从导入风险。/曝光度
//实例化曝光和点击
常数exp=新风险()
const cli=new Click()
Vue.directive(track ，{
bind(el，binding) {
//获取指令参数
const { arg }=绑定
arg.split( ).forEach((item)={
//点击
if (item===click) {
cli.add({ el })
} else if (item===exposure) {
exp.add({ el })
}
})
},
})
需要在src/index.js中同时引入：
“导入”。/指令/跟踪
使用
在需要掩埋的地方使用也非常简单：
图片
ref=imageDom
trace-key=o_img
垂直跟踪：点击曝光
:track-params=
JSON.stringify({
曝光操作： s_pictures ，
点击操作： c_pictures ，
详细信息：{
值：“测试”，
},
})
/
不足
通过对Vue自定义指令的简单封装，业务代码和嵌入代码在一定程度上解耦，无论是开发成本还是嵌入点的维护成本都比以前降低了很多。
但这只是最简单的实现，还有很多情况需要考虑：
时频曝光度很高，可以考虑批量举报吗？用户访问了页面的一半，突然把它剪下来，然后重新进入。这种情况怎么举报？用户不支持交叉点观察器。要不要考虑向后兼容？鉴于这套嵌入方案还在不断完善中，经过后续的完善和在业务中的顺利运行。我会和你分享细节。
总结
关于如何通过Vue自定义指令实现前端嵌入的这篇文章到此为止。关于Vue实现前端嵌入的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。