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


Posted in Javascript onFebruary 25, 2019

发现问题

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
toString()一个会自动调用的方法
Feb 08 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
Javascript Objects详解
Sep 04 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
js图片轮播插件的封装
Jul 21 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
vue项目中极验验证的使用代码示例
Dec 03 Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 Javascript
写一个Vue Popup组件
Feb 25 #Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 #Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 #Javascript
JavaScript中的事件与异常捕获详析
Feb 24 #Javascript
Vue 组件注册实例详解
Feb 23 #Javascript
Vue Prop属性功能与用法实例详解
Feb 23 #Javascript
Vue自定义属性实例分析
Feb 23 #Javascript
You might like
多数据表共用一个页的新闻发布
2006/10/09 PHP
php模块memcache和memcached区别分析
2011/06/14 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
javascript 冒号 使用说明
2009/06/06 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
React组件的三种写法总结
2017/01/12 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
Python使用sorted对字典的key或value排序
2018/11/15 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
在django view中给form传入参数的例子
2019/07/19 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
写自荐信要注意什么
2013/12/26 职场文书
委托书模板
2014/04/04 职场文书
结婚保证书范文
2014/04/29 职场文书
节能宣传周活动总结
2014/05/08 职场文书
电子商务专业自荐信
2014/06/02 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
活动总结模板大全
2015/05/11 职场文书
创业计划书之游泳馆
2019/09/16 职场文书