Vue自定義指令上報Google Analytics事件統(tǒng)計的方法
更新時間：2019年02月25日 09:50:28 作者：邱鴻彬
我們經(jīng)常需要接入統(tǒng)計服務(wù)以方便運(yùn)營，這篇文章主要介紹了Vue自定義指令上報Google Analytics事件統(tǒng)計的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
發(fā)現(xiàn)問題
一般前端開發(fā)離不開數(shù)據(jù)統(tǒng)計，我們經(jīng)常需要接入統(tǒng)計服務(wù)以方便運(yùn)營，例如現(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)
}
很簡單！
但當(dāng)頁面的按鈕增加，我們幾乎要在所有 handle 事件里侵入統(tǒng)計代碼，和業(yè)務(wù)邏輯混在一起
不夠優(yōu)雅！
怎么優(yōu)雅
我們嘗試?yán)?Vue 的指令來自定義統(tǒng)計，這是我最終想要的統(tǒng)計方式
只需要在 template 里聲明好統(tǒng)計參數(shù)，用戶點(diǎn)擊則觸發(fā)上報
<template>
<button @click="handleClick"
v-ga="{
eventCategory: 'button',
eventLabel: 'button click'
}" />
</template>
抽離統(tǒng)計
將上報統(tǒng)計代碼單獨(dú)個方法出來
./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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
element的el-form-item的prop作用小結(jié)
Vue表單驗證中的prop屬性用于指定需要驗證的表單字段,它定義了字段名稱并與驗證規(guī)則關(guān)聯(lián),確保數(shù)據(jù)的完整性和準(zhǔn)確性,本文就來介紹一下element的el-form-item的prop作用,感興趣的可以了解一下2025-01-01
Sentry 是一個開源的錯誤追蹤工具，可以幫助開發(fā)人員實時監(jiān)控和修復(fù)系統(tǒng)中的錯誤。這篇文章主要介紹了vue項目前端錯誤收集之sentry,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
vue2.0 computed 計算list循環(huán)后累加值的實例
下面小編就為大家分享一篇vue2.0 computed 計算list循環(huán)后累加值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue3?實現(xiàn)關(guān)于?el-table?表格組件的封裝及調(diào)用方法
這篇文章主要介紹了vue3?實現(xiàn)關(guān)于?el-table?表格組件的封裝及調(diào)用方法,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
vue?使用el-table循環(huán)輪播數(shù)據(jù)列表的實現(xiàn)
這篇文章主要介紹了vue?使用el-table循環(huán)輪播數(shù)據(jù)列表的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了前端框架Vue.js構(gòu)建大型應(yīng)用的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)秒殺倒計時組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
Vue查詢數(shù)據(jù)并通過bootstarp?table渲染數(shù)據(jù)
這篇文章主要為大家介紹了Vue查詢數(shù)據(jù)并通過bootstarp?table渲染數(shù)據(jù)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
Vue.js 2.0 移動端拍照壓縮圖片預(yù)覽及上傳實例
這篇文章主要介紹了Vue.js 2.0 移動端拍照壓縮圖片預(yù)覽及上傳實例，本來移動端開發(fā)H5應(yīng)用，準(zhǔn)備將mui框架和Vue.js+vue-router+vuex 全家桶結(jié)合起來使用2017-04-04
Monaco-editor,一個vs?code?編輯器,這篇文章主要為大家詳細(xì)介紹了如何在Vue2中使用Monaco?Editor,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01