Vue 自定義指令上報 Google Analytics 事件統計

摘要： 發現問題 一般前端開發離不開資料統計，我們經常需要接入統計服務以方便運營，例如現在需要統計一個按鈕 <template> <button @click="handleClick" /> </template> <scrip...

發現問題

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

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