Vue自定義指令上報(bào)Google Analytics事件統(tǒng)計(jì)的方法
發(fā)現(xiàn)問題
一般前端開發(fā)離不開數(shù)據(jù)統(tǒng)計(jì)，我們經(jīng)常需要接入統(tǒng)計(jì)服務(wù)以方便運(yùn)營，例如現(xiàn)在需要統(tǒng)計(jì)一個按鈕
<template>
<button @click="handleClick" />
</template>
<script>
export default {
methods: {
handleClick() {
window.alert('button click')
}
}
}
</script>
引入 ga 后是這樣上報(bào)的
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)計(jì)代碼，和業(yè)務(wù)邏輯混在一起
不夠優(yōu)雅！
怎么優(yōu)雅
我們嘗試?yán)?Vue 的指令來自定義統(tǒng)計(jì)，這是我最終想要的統(tǒng)計(jì)方式
只需要在 template 里聲明好統(tǒng)計(jì)參數(shù)，用戶點(diǎn)擊則觸發(fā)上報(bào)
<template>
<button @click="handleClick"
v-ga="{
eventCategory: 'button',
eventLabel: 'button click'
}" />
</template>
抽離統(tǒng)計(jì)
將上報(bào)統(tǒng)計(jì)代碼單獨(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)一處理上報(bào)
./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?ui?組件過程中，我最近碰到了新的問題，vue--elementui中如何修改el-input樣式呢，今天小編通過示例代碼給大家詳細(xì)講解，需要的朋友參考下吧2023-05-05
vue?Proxy數(shù)據(jù)代理進(jìn)行校驗(yàn)部分源碼實(shí)例解析
Proxy提供了強(qiáng)大的Javascript元編程,有許多功能,包括運(yùn)算符重載,對象模擬,簡潔而靈活的API創(chuàng)建,對象變化事件,甚至Vue 3背后的內(nèi)部響應(yīng)系統(tǒng)提供動力,這篇文章主要給大家介紹了關(guān)于vue?Proxy數(shù)據(jù)代理進(jìn)行校驗(yàn)部分源碼解析的相關(guān)資料,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了vue如何實(shí)現(xiàn)文件上傳及預(yù)覽問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
vue3實(shí)現(xiàn)點(diǎn)擊空白區(qū)域隱藏div
這篇文章主要介紹了vue3實(shí)現(xiàn)點(diǎn)擊空白區(qū)域隱藏div方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue中的v-model綁定修飾符的實(shí)現(xiàn)原理
v-model 是Vue.js中的一個重要指令,通過它我們可以輕松實(shí)現(xiàn)數(shù)據(jù)的雙向綁定,本文介紹一些常用的 v-model 綁定修飾符,并解析它們的實(shí)現(xiàn)原理,感興趣的朋友一起看看吧2024-01-01
vue?懸浮窗且?guī)ё詣游焦δ軐?shí)現(xiàn)demo
這篇文章主要為大家介紹了vue?懸浮窗且?guī)ё詣游焦δ軐?shí)現(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue3系統(tǒng)進(jìn)入頁面前的權(quán)限判斷和重定向方式
這篇文章主要介紹了vue3系統(tǒng)進(jìn)入頁面前的權(quán)限判斷和重定向方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue3.0中的computed寫法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
解決antd datepicker 獲取時間默認(rèn)少8個小時的問題
這篇文章主要介紹了解決antd datepicker 獲取時間默認(rèn)少8個小時的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
useVModel()用來實(shí)現(xiàn)父子組件間數(shù)據(jù)的雙向綁定,若不想使用默認(rèn)回調(diào),也可以自己使用emit實(shí)現(xiàn)回調(diào),這篇文章主要給大家介紹了關(guān)于vue中useVModel()使用方法的相關(guān)資料,需要的朋友可以參考下2024-03-03