什么是 Google Analytics
Google Analytics 是一個(gè)多平臺(tái)埋點(diǎn)分析工具箍鼓，即只要在平臺(tái)上添加相關(guān)的追蹤代碼(tracking code)相赁，GA 就可以監(jiān)測(cè)和收集使用者在平臺(tái)上的各種行為資料相寇，比如頁(yè)面停留時(shí)長(zhǎng)、訪問(wèn)次序钮科、點(diǎn)擊了哪些內(nèi)部鏈接等等唤衫。官方提供了兩個(gè)SDK，一個(gè)是analytics.js绵脯，一個(gè)是gtag.js佳励。本文用的是官方推薦的gtag.js。
如何正確地初始化
只要把官方提供的腳本內(nèi)容放到index.html文件即可蛆挫。
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-149950392-1"></script>
<script>
window.dataLayer = window.dataLayer || []
function gtag() {
dataLayer.push(arguments)
}
gtag('js', new Date())
gtag('config', 'UA-149950392-1')
</script>
GA基本用法：頁(yè)面跟蹤與事件跟蹤
事件跟蹤與事件跟蹤是GA最基本最主要的用法赃承。
頁(yè)面跟蹤
一般的網(wǎng)站，只需要在index.html中加個(gè)GA的代碼就能完成頁(yè)面跟蹤了悴侵，但是對(duì)于SPA來(lái)說(shuō)并不行瞧剖，因?yàn)槁酚芍g的跳轉(zhuǎn)并沒(méi)有刷新頁(yè)面，GA感知不到可免，因此需要手動(dòng)觸發(fā)抓于。在vue-cli的工程中，可使用如下代碼簡(jiǎn)單處理：
router.afterEach((to, from, next) => {
window.gtag('config', this.GA_TRACKING_ID, {
page_title: title,
page_path: page,
page_location: location
})
})
事件跟蹤
原生的代碼是
window.gtag('event', eventAction, {
event_category: eventCategory,
event_label: eventLabel,
value: eventValue,
send_to: this.GA_TRACKING_ID
})
值得一提的是事件四個(gè)參數(shù)的設(shè)置：
event_category: 一般為一個(gè)大類浇借，比如品牌brand,視頻video等等
eventAction: 一般為一個(gè)具體的操作毡咏，比如download, play, click等等
event_label: 一般為額外的一些信息，比如具體的品牌ID逮刨，視頻的title等等
value: 任意的度量值呕缭，必須為正的整數(shù)，比如表示品牌的價(jià)值修己，視頻的時(shí)長(zhǎng)等等
代碼封裝
考慮到以后有可能會(huì)更換分析工具恢总，所以我會(huì)把接口都封裝到一個(gè)對(duì)象里面，就算以后更換工具睬愤，只要接口一致片仿，改變接口的實(shí)現(xiàn)即可。
//google-analyze.js
export default {
GA_TRACKING_ID: '', //ga的id
event(eventCategory, eventAction, eventLabel, eventValue) {
if (window.gtag) {
window.gtag('event', eventAction, {
event_category: eventCategory,
event_label: eventLabel,
value: eventValue,
send_to: this.GA_TRACKING_ID
})
}
},
page(page, title, location) {
if (window.gtag) {
window.gtag('config', this.GA_TRACKING_ID, {
page_title: title,
page_path: page,
page_location: location
})
}
}
}
自定義指令
把統(tǒng)計(jì)代碼和業(yè)務(wù)邏輯混在一起尤辱，總感覺(jué)不是很優(yōu)雅砂豌。可以考慮對(duì)需要統(tǒng)計(jì)的元素添加自定義指令光督，統(tǒng)一處理上報(bào)阳距，當(dāng)然這種方式不一定適合所有情況。
import ga from 'google-analyze.js'
export default {
bind(el, binding) {
el.addEventListener('click', () => {
// binding.value 拿到 v-ga 指令的參數(shù)
let { eventCategory, eventAction, eventLabel, eventValue } = binding.value
ga.event(eventCategory, eventAction, eventLabel, eventValue)
})
},
unbind(el) {
el.removeEventListener('click', () => {})
}
}
如何檢查GA是否正常工作?
使用Chrome的Tag Assistant插件,具體使用可以參考https://www.cnblogs.com/pheye/p/9014797.html
參考資料
vue-cli的工程如何正確使用Google Analytics结借？
Google Analytics 埋點(diǎn)
Vue 自定義指令上報(bào) Google Analytics 事件統(tǒng)計(jì)
