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 相关文章推荐
JS中的prototype与面向对象的实例讲解
May 22 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
BootStrap3中模态对话框的使用
Jan 06 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
原生js实现日历效果
Mar 02 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 Javascript
Ajax实现三级联动效果
Oct 05 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
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
joomla组件开发入门教程
2016/05/04 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
vue之nextTick全面解析
2017/05/17 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
python使用多线程不断刷新网页的方法
2015/03/31 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
生物制药毕业生自荐信
2013/10/16 职场文书
新郎父亲婚宴答谢词
2014/01/11 职场文书
中国入世承诺
2014/04/01 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
软环境建设心得体会
2014/09/09 职场文书
颐和园导游词
2015/01/30 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android