vue-cli的工程如何正确使用Google Analytics？

前言

最友善的方法，莫過于使用

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的統計，這裡不要重複統計
    }
  })
}
           

推薦閱讀資料

Google Analytics事件簡介