快捷導(dǎo)航

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

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

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

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

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

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

很簡(jiǎn)單！

但當(dāng)頁(yè)面的按鈕增加，我們幾乎要在所有 handle 事件里侵入統(tǒng)計(jì)代碼，和業(yè)務(wù)邏輯混在一起

不夠優(yōu)雅！

怎么優(yōu)雅

我們嘗試?yán)?Vue 的指令來(lái)自定義統(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ú)個(gè)方法出來(lái)

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

編寫(xiě)指令

監(jiān)聽(tīng)?zhēng)в?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)

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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