Google Tag Manager 新版學習札記

先前稍微玩了一下 Google Tag Manager 但一直沒有正式放到網站上（主要是... 沒有人有時間再去研究，還有一堆 GA 調整的票掛在那邊沒時間做啊啊啊啊），但因為某顆布丁說要有光就有了光，於是我這星期又重新把沈寂數個月的「研究轉換到 GTM」那張票挖出來。

快速分享一些東西，或許能幫上跟我狀況 / 程度差不多的人。

這篇文：

• 不是教學，是快速概覽：我是站在「如果是我的話，看了以後可以省一些摸索時間」來寫的，而介面選項在哪裡什麼的，自己摸吧 XD
• 不是去技術文：GTM 本身雖然沒有限制是開發人員才能使用，但會不會 JavaScript 影響規劃時能用的把戲，我直接以小會一點 js 的角度來看

那就開始囉！

改名

如果你用過舊版的，有些名詞換了，個人認為是更好懂：

• Rules 改稱為 Trigger
• Macro 改稱 Variable

改名這種事情，其實對初學者來說超級重要的，因為在求助時，找到的文件可能都還是舊版。

概念

基本流程如下

1. 新增 Container，就是... 意義上可以歸類的一組東西
2. 請開發人員將 Container 產生的 GTM 程式碼放上網站。理想上無論你以後怎麼改設定，這就是少數幾次真的會動到網站程式碼的時候了。
3. 在 Container 中可以新增各種 Tag，可以想為「要做的事」
4. 每個 Tag 可以藉由多種 Trigger「觸發」
5. 另外 Trigger 跟 Tag 中可以藉由各種 Variable 來設定雜七雜八的東西
6. 設定完畢後，可以用 Preview / Debug 來測試
7. 測試沒問題就發佈，相關設定就會直接套用到網站上
8. 若以後有要改什麼，就從 Step 3 再走一遍，而開發人員理想上不用更動什麼程式碼

舉例：「使用者在進入這一頁點選『喝我喝我』按鈕後，就告訴 GA 這人在進來多久以後才按這個鈕」，這句話裡：

• Tag 是「就告訴 GA 這人在進來多久以後才按這個鈕」
  • 其中「進來多久」很可能是 Variable
• Trigger 是使用者「點選『喝我喝我』按鈕」

Tag 與 Trigger

Tag 的設定不盡相同。簡單的狀況：以設定「讀入此頁時，就在 GA 中記上一筆 pageview」這樣的事情來說，只要新增一個 GA 的 Tag、選擇 Pageview、並且設定在 All page 觸發就結束了。

但複雜的話就很複雜：一樣以 GA 為例，你有「一大堆」的欄位可以指定要傳送怎樣的資訊給 GA，舉凡 UserID、Enhanced eCommerce data 等等都可以（也必須）在這裡設定。這部分有必要搭配相關的開發文件來查閱該怎麼傳。

每個 Tag 都可以指定讓很多種 Trigger 觸發，這裡會是聯集，也就是說如果你設定了 3 個 Trigger，那只要符合 3 個中的任一種情形，都會觸發此 Tag。若想用「交集」，也就是要符合所有條件才會動，那設定上得自己兜成一個 Trigger（單一 Trigger 內的各條件是交集），或者另外新增 Exception。

舉例：我們希望在使用者登入的情況下（這裡有個 Variable 可以得知使用者是否登入），點擊某頁 A 上的某個連結 B 會觸發 Tag。有兩類設定方式：

1. 在一個 Trigger 裡，設定在 A 頁啟用 Link Click 追蹤，並僅在使用者已登入 且 點擊 B 連結時觸發
2. 或者，也可以設定某個 Trigger 是在 A 頁啟用 Link Click 追蹤，並僅在點擊 B 連結時觸發。此時該 Tag 還要記得另外新增一個若使用者未登入則不觸發此 Tag 的 Exception

兩種方式主要看規劃，講簡潔好維護當然是 1，但或許某些時候還是會想用 2。

Exception 其實也是一種 Trigger，你可以想成「如果符合這個 Trigger 的條件，我就不觸發」。正所謂敵不動我不動，敵一動我亂動（此句意味不明。）

當然一個 Trigger 也可以觸發兩個以上的 Tag。

Variable

記得先進 Variable 把一些預設的 Built-In Variables 開起來，例如我開了 Page 跟 Click 的大部分。

這些做啥用？例如 Click Element 可以作為 Trigger 的條件，讓你做到「如果點選了 DIV.triggerme 底下的 A 元素，就觸發這個 Tag」，以此類推。

Variable 有許多類型，我覺得比較有用的東西例如：

• Constant: 常數（固定值），例如 GAID 會用在很多 Tag 上，先拉出來做常數設定好。一個重點是在這邊設定好以後就會變成各欄位的下拉選單。
• Custom JavaScript: 大概是變化最多最厲害的一種，可以用 JavaScript 抓/拼出各種想要的值交給 GTM。
  
  • 一行看熱鬧： function(){ return {{Click Element}}.getElementsByClassName("text")[0].getAttribute("data-event-label"); }
  • 其中 {{Click Element}} 是 Variable 的引用方式
  • GTM 高人 Zorro 曾指點，其實 GTM 內建 jQuery，所以不見得要像我那樣用原生 DOM API 抓東西。但... 我就習慣了... 然後沒有公開說支援的東西我也會擔心不告而別壞光光 :/
• Data Layer Variable: 網頁上送來的 Data Layer 資訊要從這裡轉成變數給其他人用
• Lookup Table: 如果你會 JavaScript 的話差不多就是 Switch ... Case 的精簡版，需求簡單又懶得寫程式時是蠻方便

Preview / Debug

GTM 內建的除錯工具，啟用後在瀏覽網頁時下半部會分割視窗顯示，平常測試起來會比用瀏覽器內建的 developer console 方便非常多。主要功能是查閱各種狀態（網頁載入、DOM 完備、網頁讀完、各種點擊事件）下：

• 到底哪些 Tag 被觸發了
  • 以及，送出了什麼資訊
  • 而如果沒被觸發又因為哪些條件沒滿足（這個非常好用）
• 各自訂變數值

由於他會把各狀態當下的所有數值記錄下來，所以你也可以在十幾個事件之後才回頭查第三次 click 觸發了什麼東西。下圖代表在剛載入的時機點由於網頁 URL 不符規則，於是沒有觸發。

Preview 時的 GTM 設定只有你才看得到，或者你也可以分享給其他特定人。總之，即使在 production 上測試也是沒問題的。

其他筆記

• 瀏覽器相容性：寫 Custom JavaScript 要注意瀏覽器相容性，畢竟這段 js 碼是真的會在瀏覽器上跑。
• 由於 GTM 的設計，只要你會寫 JavaScript 就幾乎可以不靠開發人員調整網頁，就能自幹所有的變數（例如，自己爬最終訂單畫面來解析出訂單內容資料）。
  • 不過基礎 Metadata 我會仍然傾向商請網站開發人員送 Data Layer 過來，以免網頁結構有些許更動時讓 GTM 死在路邊。
• 閱讀文件後我認為 GTM for iOS / Android App 實際作用倒沒有像網站上那麼大，開發人員仍然得自己送出幾乎所有的事件（App 沒有 DOM 可以抓啊...），差異點是：
  1. 有些設定過的 Data Layer 值可以直接重複使用
  2. 可以在軟體發佈以後才透過 GTM 改一些設定值

小結

網站分析師善用 GTM 的話可以省很多「等開發人員有空」的時間，有什麼要調整的東西時開發人員也比較不會覺得很煩。站在「網站企劃分析人員多少都得懂點網頁技術」的角度上，是蠻推薦每個人都可以學學。不過相較 GA 已經深入行銷人的領域、在用詞與操作上幾乎只要懂網路基本原理就可以用，GTM 就還是很技術人的工具。

當然，即使你完全不會寫 JavaScript，也還是可以用 GTM 快樂做些事情、不用等 RD 幫你處理，但會寫 JavaScript 的情況下，用起來根本不是同個級別的。無論如何，Google 提供不少範例，或可作為一個入口。

有打算下個月或下下個月在摩茲工寮弄個簡單的 GTM 分享，有興趣的下面留言一下吧。