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生产批量批处理执行命令
Jul 28 Javascript
Javascript的一种模块模式
Sep 08 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
前端 javascript 实现文件下载的示例
Nov 24 Javascript
详解javascript脚本何时会被执行
Feb 05 Javascript
使用 JavaScript 制作页面效果
Apr 21 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
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
PHP 错误处理机制
2015/07/06 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
nodejs log4js 使用详解
2019/05/31 NodeJs
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
python求pi的方法
2014/10/08 Python
优化Python代码使其加快作用域内的查找
2015/03/30 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
Python进阶篇之字典操作总结
2016/11/16 Python
一张图带我们入门Python基础教程
2017/02/05 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
Python中存取文件的4种不同操作
2018/07/02 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
Django celery异步任务实现代码示例
2020/11/26 Python
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
《伯牙绝弦》教学反思
2014/03/02 职场文书
土地转让协议书范本
2014/04/15 职场文书
党员服务承诺书
2014/05/28 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
医院营销工作计划
2015/01/16 职场文书
英语教师求职信范文
2015/03/20 职场文书
python glom模块的使用简介
2021/04/13 Python
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
Python开发五子棋小游戏
2022/04/28 Python
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL