前言
最方便的方法，莫過於使用vue-analytics：https://github.com/MatteoGabriele/vue-analytics。
包是有了，可是真正使用起來會發現Google Analytics（下稱GA)可能沒檢測到或者出現漏統計的問題。本文的主題，就是討論幾個基本的檢查點和說明下GA的基本用法，確保GA正常工作。
本文分為以下幾部分：
- 如何正確地初始化
GA GA基本用法：頁面跟蹤與事件跟蹤- 如何檢查
GA是否正常工作 vue-cli工程添加GA的詳細步驟- 推薦閱讀材料
如何正確地初始化GA
必須按照Google官方要求，將以下代碼放到html文件，並且應該放在</head>之前：
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXX', 'auto'); // 將`UA-XXX`換成自己的ID
ga('send', 'pageview');
</script>
其他方式可以讓GA代碼運行起來，但是會引入一些問題。比如我們使用了vue的情況下，很自然地會想能不能直接在vue完成初始化，不想要去修改html。但是實測會出現2個問題。
-
第1個是GA的后台檢測不到，類似如下的提示：
-
第2個是Google其他的產品，比如
Ad Words，與GA配合，也會要求GA代碼放在</head>之前才能工作。
綜上，在初始化上目前只能老實按照Google的方法。
GA基本用法：頁面跟蹤與事件跟蹤
事件跟蹤與事件跟蹤是GA最基本最主要的用法。
頁面跟蹤
一般的網站，只需要在html中加個GA的代碼就能完成頁面跟蹤了，但是對於SPA來說並不行，因為路由之間的跳轉並沒有刷新頁面，GA感知不到，因此需要手動觸發。在vue-cli的工程中，可使用如下代碼簡單處理：
router.afterEach((to, from) => {
ga('set', 'page', to.path)
ga('send', 'pageview')
})
推薦使用vue-analytics，按照官方指導處理，可省很多事，否則需要自己手動再處理首次進入重復計數和GA不存在等異常情況。
import Vue from 'vue'
import router from './router'
import VueAnalytics from 'vue-analytics'
Vue.use(VueAnalytics, {
id: 'UA-XXX-X',
router,
autoTracking: {
pageviewOnLoad: false
}
})
鏈接：https://github.com/MatteoGabriele/vue-analytics/blob/master/docs/page-tracking.md
事件跟蹤
原生的代碼是
ga.event('category', 'action', 'label', 123)
如果用vue-analytics則是：
this.$ga.event('category', 'action', 'label', 123)
鏈接：https://github.com/MatteoGabriele/vue-analytics/blob/master/docs/event-tracking.md
值得一提的是事件四個參數的設置：
- category: 一般為一個大類，比如品牌brand,視頻video等等
- action: 一般為一個具體的操作，比如download, play, click等等
- label: 一般為額外的一些信息，比如具體的品牌ID，視頻的title等等
- value: 任意的度量值，必須為正的整數，比如表示品牌的價值，視頻的時長等等
如何檢查GA是否正常工作?
通常來說，需要檢查幾個點以確認GA有正常工作：
- GA有正常初始化
- 頁面加載時PageView有發出，並且只發了一次；
- 路由切換時PageView有發出，並且只發了一次；
- 事件可以正常發出;
要檢查這幾點，最方便的是使用Chrome的Tag Assistant插件。下面分步驟說明如何用該插件做檢查。
1.下載Chrome插件：Tag Assistant(https://chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk)
2.如何檢查初始化：點擊下面的Record，然后刷新頁面，然后即可看到當前加載的TAG。Google Analytics只是其中一種，其他還有像Remarketing Tag(再營銷代碼）等等，如下圖所示，這里我們只關心Google Analytics。如果是綠色的表示正常，否則就要根據提示排查下問題。
3.如何檢查PageView和Event:點擊Goole Analytics那個選項，可看到GA的詳細信息。如果有發送PageView或者Event，在下面可看到統計。
3.1 Pageview的具體信息：如下圖所示，發出了一個/login頁面的PageView，如果有多個不同的PageView，點左右可一一切換。我一般使用這個面板確認是否頁面加載后發出了多個相同的PageView，以及路由切換時是否有發出PageView。
3.2 event的具體信息：event的查看方法與pageview類似，就是內容變成event的category, action, label, value等信息而已。我主要用它來確認事件是否有發出以及參數是否正確。
vue-cli的工程添加GA代碼的詳細步驟
1.config/prod.env.js，添加GA代碼ID：
'use strict'
module.exports = {
NODE_ENV: '"production"',
GA: `"UA-113937480-1"`
}
2. build/webpack.prod.conf.js找到HtmlWebpackPlugin，最后添加了ga選項:
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency',
favicon: './static/bitbug_favicon.ico',
ga: env.GA // 添加ga選項，以便在index.html中可以引用
}),
3.index.html，在</head>之前添加，特別注意它的GA的ID是從配置中讀取而不是寫死的
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', <%= htmlWebpackPlugin.options.ga %>, 'auto');
ga('send', 'pageview');
</script>
4.src/main.js引入vue-analytics,參考源碼
import App from './App'
import router from './router'
import VueAnalytics from 'vue-analytics'
// GA初始化
if (process.env.GA) {
Vue.use(VueAnalytics, {
id: process.env.GA, // 從配置中讀取
disableScriptLoader: true, // 必須在html中完成初始化，這里顯式禁止去下載ga腳本
router, // 確保路由切換時可以自動統計
autoTracking: {
pageviewOnLoad: false // 當通過網址進來時已經GA在初始化時就發起一次pageview的統計，這里不要重復統計
}
})
}