[Tool Note] — Google Analytics(GA) 及 Google Tag Manager(GTM) 怎麼用？

發表於 更新於 分類於 ， ， 文章字數： 4k 所需閱讀時間 ≈ 4 分鐘

GA

Introduction & 前言

前陣子拖工作專案之福，碰到了 Google Analytics(以下簡稱GA)，相信有碰到行銷的人應該或多或少都會聽過這個，本篇將會淺談 GA 及 GTM 可以做什麼，及如何設定。

本篇將會使用 Vue Cli 來做示範，並且搭配 vue-gtm 使用，如果是普通的 HTML 也可以輕易上手，沒毛病！

Summary & 摘要

關於行銷

GA 是用於 行銷、宣傳、分析 的利器，如果你正需要知道 GA 怎麼設定，以及如何查看報表設定等等，可以參考此篇，不過這邊只會淺談，不會過度深入研究。

GTM 是用來設定 觸發事件、條件、一些相關設定，緊接著會把相關參數傳送給第三方服務，例如 GA。

老樣子本篇文章使用於筆記，有錯誤的地方還請各路大神在下方留言並且給予指教，非常感謝。

關於GA

如果你在專案上曾經有過，怎麼樣才能使我的東西更有效地推廣，或是有疑慮我的使用者到底都怎麼來，怎麼去？亦或是工作上老闆曾對你說，為什麼我們的網站總是感覺很難推廣開來呢？這時候你可以考慮 GA 了！

GA 是數據分析工具，相信掛上 Google 你大概也可以想像得到普及程度及資訊獲取容易程度；另外使用 Google 搜尋引擎的人數應該也不需要筆者提供數據了，可能現在大家都離不開 餵狗(Google) 了，所以在數據的準確度上也可以放心的使用。

*在這邊我們介紹的將會是 GA 的免費版本，和付費版本差異在於免費的延誤值在 3-48小時，付費版本則確保資訊延誤值在 4小時 內，另外需要注意的是如果網站流量超過 一千萬，將會被強迫升級至付費版本。*

GA的好處

如果你曾經使用過其他的數據分析軟體，可能會想 GA 和其他的數據軟體有什麼差異，在 GA 上預設是 30分鐘 統計一次，所以不會造成數據重複(失真)的情況。

在分析上可以了解：

  1. 使用者怎麼進入網站

  2. 流量分析、如何開發使用者、活躍使用者的變化、使用者習慣分析、使用者造訪使用的工具

關於GTM

GTM

上面說了 GA 這邊也要簡短的介紹一下 **Google Tag Manager(以下簡稱GTM)**，這是一個類似中介站的東西，需要事先在 GTM 設定好相關的參數及觸發方法等等，然後再將這些資訊傳送到第三方服務，比方說 Google AdWords、FB Pixel、Bing 和 上方提到的 GA。

GTM 介紹很簡短吧，本篇將會簡短介紹如何設定 GTM。

前菜不用了

前面說了這麼多，這邊要教你如何進入 GA 及 GTM 的世界才是本篇的重點，本次我們將透過 Vue Cli 來實作一個分析專案。

如果你是使用 HTML ，可以再申請 GTM 及 GA 之後到 GTM 的管理後台，點擊右上角的 10個英文數字組合的代碼，在跳出視窗之後按照上面的方法埋入 GTM 代碼。

點擊 GTM 右上角的代號

按照彈窗的指示

之後再按照本篇下方的 GA 設定教學 即可。

Vue 專案分析之路

如果還不知道怎麼建立 Vue 專案可以參考 [Vue Notes] — Vue-Cli #1 初次見面。

由於當初有消息 Vue3 即將釋出，所以只寫了一篇就停止了，之後等 Vue3 正式釋出會再繼續研究。

安裝好 Vue-cli 之後就緊接著安裝我們需要用到的 vue-gtm，輸入 npm i vue-gtm -S。

按照彈窗的指示

*如果您已經會設定 GTM，可以跳至 **預覽設定*。

事前準備

在我們安裝好套件或使用 HTML 掛載好 GTM 追蹤碼之後，緊接著要來設定 GTM，這兩者之間的關係可以透過下圖來解釋。

流程介紹

我們先到 GTM 建立一個帳戶，如下圖：

申請步驟1

申請步驟2

在上面申請的內容，分別為 **帳戶(Account)、容器(Container)**，這兩個可以用下圖來簡單說明：

GTM簡單介紹

一個帳戶底下可以有好幾個容器，而容器通常會對應一個網址，接著在每個容器裡面會放進相關的觸發條件，最後再把觸發的結果相關參數傳送至第三方服務，比如 GA。

開始設定

大致了解運作流程後我們就開始設定吧，這邊我們先設定使用者瀏覽的事件，先到 GTM 左方的 觸發條件，新增一個 自訂事件，我們先取名為 click-event，並且選擇部分 自訂事件，要剛好 有事件發生且這些條件全都符合時，啟用這個觸發條件。

第一個自訂事件

接著先到 GA 去申請一個分析，填完內容及同意事項後會出現 追蹤ID 保存下來！

建立新的GA

複製追蹤ID

然後到 GTM 左方的變數新增一個變數，變數類型選擇 Google Analytics(分析)設定，然後填上剛剛的追蹤編號，這樣就可以和 GA 連結了。

新增變數

然後在順便新增一個 變數類型 為 資料層變數 的 userID，這將會是我們在專案觸發條件之後傳送進來的Key，可以先把這邊的變數想像成 JavaScript 的 全域變數，而這邊就是宣告一個 var userID;。

最後再選擇 GTM 左方的 代碼，然後新增一個 **Google Analytics(分析)設定：通用 Analytics(分析)**，追蹤類型選擇 事件，然後再分別填上 類別、動作、標籤、值，剛剛我們設定的變數就在這邊起作用了，我們可以直接帶入變數的 Key，點擊像 積木的Icon 後如下圖：

帶入變數

關於上面提到的 類別、動作、標籤、值 將會是在埋入 GTM 的地方會傳送過來的幾個值，如果想要傳送更多的變數，比如 userID 或是 url 等等，可能光靠上面幾個欄位放不下，這時候就可以勾選 在這個代碼啟用覆寫設定，然後填入剛剛拿到的 追蹤編號，之後打開下面的 更多設定，然後在打開 要設定的欄位，然後填入更多的變數。

預覽設定

到這時候其實可以先去看看我們的 GTM 有無掛載成功，如果你是使用普通的 HTMl 再貼上剛剛一開始提示的彈窗那些程式碼，應該就可以先預覽了，如果是 Vue-cli 可以接著使用下面的步驟。

在安裝完 vue-gtm 之後，按照 Document 的教學把套件掛進去專案裡。

掛載GTM

上面的步驟就像是在申請完 GTM 或是點擊 GTM 右上角的十個英文數字編號出現的彈窗，埋入代碼之後一樣的動作。

在做好的埋 Code 或是設定 vue-gtm 之後點擊 GTM 上方的預覽，再到你埋程式碼的網站，就會看見下方彈出 GTM 的預覽 Debug 視窗，就代表成功啦。

GTM的開發者工具

觸發設定

確定我們有掛載成功之後，別急著把剛剛設定的那些 GTM 提交出去，我們一樣可以先透過預覽查看是否有把事件正確的傳送到 GTM。

先到程式碼那邊，埋下我們的事件，因為我們前面選擇自訂事件，所這邊在我們想觸發的地方埋下我們的事件。筆者這邊放了一個按鈕，在使用者點擊之後會發送事件到 GTM：

1
<button class="button-primary" @click="sendGTMHandler()">Send GTM Event</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export default {
  name: 'App',
  data() {
    return {
      userID: 'ABC-123456'
    }
  },
  methods: {
    sendGTMHandler() {
      const vm = this;
      vm.$gtm.trackEvent({
        event: 'click-event',
        category: '點擊事件', // 類別 字元(必填)
        action: 'click', // 動作 字元(必填)
        label: vm.userID, // 標籤 字元(選填)
        value: null, // 標籤 數字(選填)
      });
    }
  }
}

透過套件的使用方法發送為上方的方法，如果你是使用前面提到的彈窗的內容埋進程式碼裡面，可以使用下面的方法，詳細可參考 Google Analytics Document：

1
2
3
4
5
6
7
8
9
10
//當使用者觸發 會發送 類別:導覽清單 ,動作:點擊 ,標籤:註冊會員 , 價值:200
ga('send', {
  hitType: 'click-event',
  eventCategory: '點擊事件', // 類別 字元(必填)
  eventAction: 'click', // 動作 字元(必填)
  eventLabel: vm.userID // 標籤 字元(選填)
  eventValue: null // 標籤 數字(選填)
});
// 簡化寫法
ga('send', 'click-event', '點擊事件', 'click', vm.userID);

之後去點擊看看你的按鈕吧，會發現 Debug 視窗出現一個新的事件，如果打開後你的事件出現在 Tags Fired 代表是成功的，如果是出現在 Tags Not Fired 代表是失敗的，點擊 Tags Fired 成功的事件進入後也會發現事件名稱旁邊會出現一個成功的小勾勾。

GTM的開發者工具

大功告成

最後我們來到 GA，因為剛剛有綁定 資料層 Data Layer，因為有填寫追蹤編號，所以在 GA 這邊會出現現在有什麼事件，以及有幾個人在線上等等，相關的數據統計都可以在這邊找到。

成功追蹤事件了

請別介意畫面有一邊黑色的，因為電腦截圖出現 Bug 所以卡住了。

範例

這邊也會放上範例，但是使用者還是必須自己去申請 GTM 及 GA 了，但可以直接把專案的 main.js vue-gtm id 改為自己的。

GitHub: 傳送門

Conclusion & 結論

其實 GTM 及 GA 還有很多可以設定，這邊先大致介紹一下如何入門使用，更多的可以再慢慢摸索，拖工作的福，這次摸了好久也有一些概念了，希望能幫到其他人，也順便筆記一下，之後自己忘記還能回來爬文。

如果你對 GTM 及 GA 有興趣也歡迎下面留言一起交流。

參考網站