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 相关文章推荐
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
javascript实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
js下写一个事件队列操作函数
Jul 19 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
Ionic如何创建APP项目
Jun 03 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
js定时器+简单的动画效果实例
Nov 10 Javascript
angularjs 页面自适应高度的方法
Jan 17 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
JavaScript继承与聚合实例详解
Jan 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
ajax取消挂起请求的处理方法
2013/03/18 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
Python进阶-函数默认参数(详解)
2017/05/18 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
实践Vim配置python开发环境
2018/07/02 Python
flask-restful使用总结
2018/12/04 Python
django序列化serializers过程解析
2019/12/14 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
国外平面设计第一市场:99designs
2016/10/25 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
高二政治教学反思
2014/02/01 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
音乐节策划方案
2014/06/09 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
MySQL为id选择合适的数据类型
2021/06/07 MySQL