Vue自定義指令上報Google Analytics事件統(tǒng)計的方法

更新時間：2019年02月25日 09:50:28 作者：邱鴻彬

我們經(jīng)常需要接入統(tǒng)計服務以方便運營，這篇文章主要介紹了Vue自定義指令上報Google Analytics事件統(tǒng)計的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

發(fā)現(xiàn)問題

一般前端開發(fā)離不開數(shù)據(jù)統(tǒng)計，我們經(jīng)常需要接入統(tǒng)計服務以方便運營，例如現(xiàn)在需要統(tǒng)計一個按鈕

<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 事件里侵入統(tǒng)計代碼，和業(yè)務邏輯混在一起

不夠優(yōu)雅！

怎么優(yōu)雅

我們嘗試利用 Vue 的指令來自定義統(tǒng)計，這是我最終想要的統(tǒng)計方式

只需要在 template 里聲明好統(tǒng)計參數(shù)，用戶點擊則觸發(fā)上報

<template>
 <button @click="handleClick"
  v-ga="{
  eventCategory: 'button',
  eventLabel: 'button click'
  }" />
</template>

抽離統(tǒng)計

將上報統(tǒng)計代碼單獨個方法出來

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

編寫指令

監(jiān)聽帶有 v-ga 指令的元素，統(tǒng)一處理上報

./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 指令的參數(shù)
 analyst.send(binding.value)
 })
 },

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

export default plugin

最終調(diào)用

import Vue from 'vue'
import GaPlugin from './plugins/analyst'

Vue.use(GaPlugin)

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue--elementui中如何修改el-input樣式
在使用?element?ui?組件過程中，我最近碰到了新的問題，vue--elementui中如何修改el-input樣式呢，今天小編通過示例代碼給大家詳細講解，需要的朋友參考下吧
2023-05-05
vue?Proxy數(shù)據(jù)代理進行校驗部分源碼實例解析
Proxy提供了強大的Javascript元編程,有許多功能,包括運算符重載,對象模擬,簡潔而靈活的API創(chuàng)建,對象變化事件,甚至Vue 3背后的內(nèi)部響應系統(tǒng)提供動力,這篇文章主要給大家介紹了關(guān)于vue?Proxy數(shù)據(jù)代理進行校驗部分源碼解析的相關(guān)資料,需要的朋友可以參考下
2022-01-01
vue如何實現(xiàn)文件上傳及預覽
這篇文章主要介紹了vue如何實現(xiàn)文件上傳及預覽問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
vue3實現(xiàn)點擊空白區(qū)域隱藏div
這篇文章主要介紹了vue3實現(xiàn)點擊空白區(qū)域隱藏div方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-04-04
Vue中的v-model綁定修飾符的實現(xiàn)原理
v-model 是Vue.js中的一個重要指令,通過它我們可以輕松實現(xiàn)數(shù)據(jù)的雙向綁定,本文介紹一些常用的 v-model 綁定修飾符,并解析它們的實現(xiàn)原理,感興趣的朋友一起看看吧
2024-01-01
vue?懸浮窗且?guī)ё詣游焦δ軐崿F(xiàn)demo
這篇文章主要為大家介紹了vue?懸浮窗且?guī)ё詣游焦δ軐崿F(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-06-06
vue3系統(tǒng)進入頁面前的權(quán)限判斷和重定向方式
這篇文章主要介紹了vue3系統(tǒng)進入頁面前的權(quán)限判斷和重定向方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue3.0中的computed寫法
這篇文章主要介紹了vue3.0中的computed寫法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
解決antd datepicker 獲取時間默認少8個小時的問題
這篇文章主要介紹了解決antd datepicker 獲取時間默認少8個小時的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue中useVModel()的使用方法(通俗易懂)
useVModel()用來實現(xiàn)父子組件間數(shù)據(jù)的雙向綁定,若不想使用默認回調(diào),也可以自己使用emit實現(xiàn)回調(diào),這篇文章主要給大家介紹了關(guān)于vue中useVModel()使用方法的相關(guān)資料,需要的朋友可以參考下
2024-03-03