透過 Google Tag Manager 快速幫助產品經理埋入關鍵點擊事件-GA系列(5)

我們在上一篇了解 GA Event 的概念以後，想必許多日常工作需要觀察網站數據的產品經理、網站數據分析師已經躍躍欲試的想要埋入點擊事件，來追蹤網站的用戶關鍵行為，我們在上一篇簡短的說明有三種方法可以埋入 GA Events，然而其中有兩項不管是採用 Analytics.js 或是 gtag.js 等 GA 引入法，都需要工程師的協助，對於網站迭代快速的產品團隊來說，與工程師一來一往改動 GA Event 略顯不便，本篇將介紹產品經理的福星，不需要依賴工程師即可完成 GA Event 的埋入 — Google Tag Manager ！

本次的介紹將快速幫助讀者了解 Google Tag Manager 點擊事件將如何埋入，將分成兩篇進行介紹

Topic 1：了解 Google Tag Manager 架構

在使用 Gmail 帳號申請 GTM 服務時，一個 Gmail 帳號是可以申請多個 GTM Account 的，而每一個 Account 底下都可以包含多個 Container （容器）來存放不同的網域追蹤代碼，我們用一張圖 快速了解 GTM 架構

我們從實際的設定介面其實可以很明白的看出來， GTM 的架構是相當彈性的，依照我們公司的架構方式，我們將自己的網站擺在一個 Account 底下，其餘客戶的網站再另開一個 Account 設立定多個不同網域的 Container 進行管理，如此可以區別我司自有網站及客戶的網站，並且設定不同的訪問權限給不同的組織人員。

Topic 2 ：了解 GTM 中的 Tag / Trigger / Variables

我們在 Google Tag Manager，不需大量依賴工程師即可完成的 Google Analytics 服務設定 — GA 系列（2）文章中有簡單介紹 Tag / Trigger 的概念，本次將說明得更為深入並添加 Variables 的說明。

我們先從下面圖片步驟複習一般使用 GTM 產生 GA 追蹤的流程

Step 1：在 Tags 區新增 Tag

Step 2：選擇你要為這個網域添加的代碼片段，因為我們要使用的是 Google Analytics 追蹤，因此選擇最基本的 GA Universal Analytics 服務

Step 3：選擇你要採用 GA 的何種追蹤，假設我們要進行用戶網頁瀏覽的追蹤，則選擇 Page View 即可，但讀者也可以很清楚的看到，這裡的選項中有一個 Event，我們將在後續介紹如何設定 Event 追蹤類型

Step 4：選擇好 GA 的追蹤類型，GTM 仍然不知道是要對哪個網域埋入這項 GA 代碼（讀者這時候可能會不解，明明我是在某個網域下進行這些設定的怎麼會不知道呢？首先，我們對每個網域的程式碼僅是埋入 GTM 的引入代碼，並不是直接引入 Google Analytics 的代碼片段，因此讀者當初在請工程師埋入 GTM 代碼後，後續仍需要設定這個網域對應的 GA Tracking ID 變數(variables)， GTM 才會知道啊！原來我們是要追蹤這個 GA Tracking ID 的 Page View）

以上步驟說明希望能夠快速喚醒讀者對於 Tag / Trigger / Variable 的概念理解，接下來我們要進入本篇的正題：透過 Google Tag Manager 埋入追蹤事件（Event）

Topic 3: 如何透過 Google Tag Manager 埋入追蹤事件（Event）？

我們在上一篇當中介紹了 Google Analytics 在追蹤事件時，需要定義 Category 、Action、Label、Value 等值，來完成一個追蹤的設定，接下來我們就示範如何從 Google Tag Manager 完成範例情境的事件追蹤。

事件情境（一）：

在同樣廣告區塊上，有一則廣告上的 Button Click to action 可以下載一部教學影片，數據分析人員對於每個用戶下載這個影片的花時感到非常好奇，倘若下載時間太長不是就太干擾用戶體驗了嗎？於是網站分析人員打算在這個下載按鈕中埋入 Event，並且定義各欄位值如下：

Step 1: 在 Tags 中新增代碼片段

Step 2 ：與前幾次代碼片段選擇 PageView 不同，我們這次要做事件的追蹤，因此 Track Type 應該選擇 Event，接下來 Category 、Action、Label 按照以上表格的命名方式填入，這時候讀者會發現 Label 的值不單純，加上了領層括號，這裡的意思是他是一個變數。

如我們上面所述，我們在 event value 這個欄位中，希望抓取的是每個用戶在下載影片時花費的時間，也就是說每個用戶下載時間必然非固定而是一個變數，並且需要透過工程師透過 Javascript 進行事件監聽才有辦法了解的值，因此 Value 的設定就不單純只是輸入文字，而是增加了變數的設定，我們如下說明：

點擊紅匡圈起來的部分可以添加新的變數

從變數的列表中可以發現並沒有任何一個變數可以紀錄用戶的下載時間，因此我們必須點擊右上角的 + 號自行新增變數

在 Variable Type 中我們選擇了 Custom Javascript 用以新增 Google Tag Manager 沒有內建的變數類型，Custom Javascript 允許工程師可以直接在GTM 後台添加客製 js 片段，最後我們在左上角完成這個變數的命名即完成了此事件 Value 變數的設定（js 片段僅為示意）

Step 3:最後記得要在 Google Analytics Setting 中選擇你的資源 GA ID 變數，並且因為我們事件是對於網站有進行互動的事件，所以在 Non-interaction hit 中應該要選擇 False

Step 4：設定好 Tag 後，接下來需要設這個 Tag 是通過何種方法被 Trigger 的，因此必須開始設定 Triggering的部分

由於這個觸發條件是點擊 button 所觸發的，與現有的 PageView 不同，因此我們必須點選右上角 + 號做添加

由於並不是網站上所有的點擊都該被計入，應該是首頁的影片下載按鈕才需要被計入這個事件，因此我們在紅匡當中應該選擇 Some Clicks 而非 All Clicks

在選擇 Some Clicks 以後，我們也必須定位出首頁的影片 button，GTM 內建了很多找到特定按鈕的方法，都需要設定人員對於 Html 有基礎的認識，這部分我們會在下回文章當中深入說明

Step 5:設定好 Triggering 後，就可以儲存這個代碼（Tags）片段了

Step 6 ：記得要做 submit 的動作才是真的將在 GTM 的設定發布上線喔！當然也可以點擊 Submit 旁的 Preview 先觀察自己的設定是否真的應用在網站上，再進行 Submit 的動作

到這裡，我們大致完成了 GTM 做事件追蹤的設定說明，讀者肯定會在跟著步驟走的過程中發現 GTM 在 Trigger Type、Variables 等有許多設定元素，這些進階元素的說明，我們會在下篇文章介紹各自的使用時機！

I bet you guys thirsty for more! Let’s wait and see :)