Vue中如何實現自定義指令上報Google Analytics事件統計功能

這篇文章將為大家詳細講解有關Vue中如何實現自定義指令上報Google Analytics事件統計功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

發現問題

一般前端開發離不開數據統計，我們經常需要接入統計服務以方便運營，例如現在需要統計一個按鈕

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

關于“Vue中如何實現自定義指令上報Google Analytics事件統計功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。