什么是 Google Analytics

Google Analytics 是一個多平臺埋點分析工具，即只要在平臺上添加相關(guān)的追蹤代碼(tracking code)，GA 就可以監(jiān)測和收集使用者在平臺上的各種行為資料，比如頁面停留時長、訪問次序、點擊了哪些內(nèi)部鏈接等等。官方提供了兩個SDK，一個是analytics.js，一個是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基本用法：頁面跟蹤與事件跟蹤

事件跟蹤與事件跟蹤是GA最基本最主要的用法。

頁面跟蹤

一般的網(wǎng)站，只需要在index.html中加個GA的代碼就能完成頁面跟蹤了，但是對于SPA來說并不行，因為路由之間的跳轉(zhuǎn)并沒有刷新頁面，GA感知不到，因此需要手動觸發(fā)。在vue-cli的工程中，可使用如下代碼簡單處理：

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

值得一提的是事件四個參數(shù)的設(shè)置：
event_category: 一般為一個大類，比如品牌brand,視頻video等等
eventAction: 一般為一個具體的操作，比如download, play, click等等
event_label: 一般為額外的一些信息，比如具體的品牌ID，視頻的title等等
value: 任意的度量值，必須為正的整數(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)計代碼和業(yè)務(wù)邏輯混在一起，總感覺不是很優(yōu)雅。可以考慮對需要統(tǒng)計的元素添加自定義指令，統(tǒng)一處理上報，當(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 埋點
Vue 自定義指令上報 Google Analytics 事件統(tǒng)計