微客导航 » 文章资讯 » Vue自定义指令上报Google Analytics事件统计的方法

Vue自定义指令上报Google Analytics事件统计的方法

2023-08-28 14:26:04 272

发现问题

一般前端开发离不开数据统计，我们经常需要接入统计服务以方便运营，例如现在需要统计一个按钮

引入ga后是这样上报的

handleClick(){
window.alert('buttonclick')

constparams={
hitType:'event',
eventCategory:'button',
eventAction:'click',
eventLabel:'clicklabel'
}

window.ga('send',params)
}

很简单！

但当页面的按钮增加，我们几乎要在所有handle事件里侵入统计代码，和业务逻辑混在一起

不够优雅！

怎么优雅

我们尝试利用Vue的指令来自定义统计，这是我最终想要的统计方式

只需要在template里声明好统计参数，用户点击则触发上报

抽离统计

将上报统计代码单独个方法出来

./services/analyst.js

exportfunctionsend(data={}){
constparams={
hitType:'event',
eventCategory:'button',
eventAction:'click',
eventLabel:'clicklabel'
}

window.ga('send',Object.assign({},params,data))
}

编写指令

监听带有v-ga指令的元素，统一处理上报

./plugins/analyst.js

import*asanalystfrom'./services/analyst'

constplugin=Vue=>{
Vue.directive('ga',{
bind(el,binding){
el.addEventListener('click',()=>{
//binding.value拿到v-ga指令的参数
analyst.send(binding.value)
})
},

unbind(el){
el.removeEventListener('click',()=>{})
}
})
}

exportdefaultplugin

最终调用

importVuefrom'vue'
importGaPluginfrom'./plugins/analyst'

Vue.use(GaPlugin)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

Vue自定义指令上报Google Analytics事件统计的方法

热门推荐

随机推荐