Vue自定义指令上报GoogleAnalytics事件统计的方法 - CSDN文库

19 浏览量更新于2023-03-03 评论收藏 35KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

发现问题发现问题

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

<template>

<button @click="handleClick" />

</template>

<script>

export default {

methods: {

handleClick() {

window.alert('button click')

}

}

}

</script>

引入 ga 后是这样上报的

handleClick() {

window.alert('button click')

const params = {

hitType: 'event',

eventCategory: 'button',

eventAction: 'click',

eventLabel: 'click label'

}

window.ga('send', params)

}

很简单！

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

不够优雅！

怎么优雅怎么优雅

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

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

<template>

<button @click="handleClick"

v-ga="{

eventCategory: 'button',

eventLabel: 'button click'

}" />

</template>

抽离统计抽离统计

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

./services/analyst.js

export function send(data = {}) {

const params = {

hitType: 'event',

eventCategory: 'button',

eventAction: 'click',

eventLabel: 'click label'

}

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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38502814

粉丝: 5
资源: 927

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈