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

編寫指令

監(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)文章

element的el-form-item的prop作用小結(jié)
Vue表單驗(yàn)證中的prop屬性用于指定需要驗(yàn)證的表單字段,它定義了字段名稱并與驗(yàn)證規(guī)則關(guān)聯(lián),確保數(shù)據(jù)的完整性和準(zhǔn)確性,本文就來(lái)介紹一下element的el-form-item的prop作用,感興趣的可以了解一下
2025-01-01
vue項(xiàng)目前端錯(cuò)誤收集之sentry教程詳解
Sentry 是一個(gè)開(kāi)源的錯(cuò)誤追蹤工具，可以幫助開(kāi)發(fā)人員實(shí)時(shí)監(jiān)控和修復(fù)系統(tǒng)中的錯(cuò)誤。這篇文章主要介紹了vue項(xiàng)目前端錯(cuò)誤收集之sentry,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-05-05
vue2.0 computed 計(jì)算list循環(huán)后累加值的實(shí)例
下面小編就為大家分享一篇vue2.0 computed 計(jì)算list循環(huán)后累加值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
vue3?實(shí)現(xiàn)關(guān)于?el-table?表格組件的封裝及調(diào)用方法
這篇文章主要介紹了vue3?實(shí)現(xiàn)關(guān)于?el-table?表格組件的封裝及調(diào)用方法,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-06-06
vue?使用el-table循環(huán)輪播數(shù)據(jù)列表的實(shí)現(xiàn)
這篇文章主要介紹了vue?使用el-table循環(huán)輪播數(shù)據(jù)列表的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
前端框架Vue.js構(gòu)建大型應(yīng)用淺析
這篇文章主要為大家詳細(xì)介紹了前端框架Vue.js構(gòu)建大型應(yīng)用的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
vue實(shí)現(xiàn)秒殺倒計(jì)時(shí)組件
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)秒殺倒計(jì)時(shí)組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
Vue查詢數(shù)據(jù)并通過(guò)bootstarp?table渲染數(shù)據(jù)
這篇文章主要為大家介紹了Vue查詢數(shù)據(jù)并通過(guò)bootstarp?table渲染數(shù)據(jù)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-04-04
Vue.js 2.0 移動(dòng)端拍照壓縮圖片預(yù)覽及上傳實(shí)例
這篇文章主要介紹了Vue.js 2.0 移動(dòng)端拍照壓縮圖片預(yù)覽及上傳實(shí)例，本來(lái)移動(dòng)端開(kāi)發(fā)H5應(yīng)用，準(zhǔn)備將mui框架和Vue.js+vue-router+vuex 全家桶結(jié)合起來(lái)使用
2017-04-04
Vue2中使用Monaco?Editor的教程詳解
Monaco-editor,一個(gè)vs?code?編輯器,這篇文章主要為大家詳細(xì)介紹了如何在Vue2中使用Monaco?Editor,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-01-01