什么是 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)、訪(fǎ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è)大類(lèi)，比如品牌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ì)