当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue自定义指令上报Google Analytics事件统计的方法

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

2019年03月17日  | 移动技术网IT编程  | 我要评论

1922年汕头台风,三国之吕布称霸,圣元股票

发现问题

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

<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))
}

编写指令

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

./plugins/analyst.js

import * as analyst from './services/analyst'

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

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

export default plugin

最终调用

import vue from 'vue'
import gaplugin from './plugins/analyst'

vue.use(gaplugin)

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网