不同開發環境的 GTM(Google Tag Manager) 設定 + SPA page view 設定

此篇文包含：

GTM 是什麼？
如何針對 production, staging, development 三種環境設定 GTM
SPA 網站要如何讓 page view 進到 GA

聽說 GTM 是現在管理 Tracking Code 的潮流，在開發公司官網研究了一下如何實作，此文為筆記。如果你跟我一樣是不懂 GA 也不懂 GTM 的開發者，或是想瞭解，可以將此文當作入門。

雖然 GTM 標榜「給行銷人員用的追蹤工具」、「不用勞駕開發人員」，但是他初始的環境設定真是%#的麻煩，如果你是開發者的話，建議直接建立一個測試的 GTM 跟著操作，更好理解。

GTM 是什麼？

統一管理所有第三方行銷工具的工具（真饒舌），包括 Google AdWords, Google Analytics, Facebook Pixel 等等，你只要將 GTM 正確的埋到你的網站，你就能輕鬆的從各方的到追蹤資料。

針對不同環境設定 GTM

舉例，假設我們有兩個網站，一為官網，一為產品網站：
– https://wutingy.com
– https://app.wutingy.com

其測試站為：
– https://staging.wutingy.com
– https://app.staging.wutingy.com

而我們需要追蹤從官網到產品註冊的導流，所以我們產品、官網會共用同一個 GA Tracking ID，以便設定 funnel 來檢視目標是否達成。而你不希望 staging 的資料污染正式站的資料，所以你會有兩組 GA Tracking ID 在同一個 account 底下，一個給正式站，一個給測試站。e.g. UA-XXXXXXX-1, UA-XXXXXXX-2

而如何在一個 GTM 裡面設定不同的 Tracking ID？首先你必須有完整的 GTM publish 權限，並建議在右上角找到使用者設定將語言設為英文會比較好懂。

這篇有附詳細步驟圖片，以下大致說明一下：

ADMIN 頁籤裡找到 Environment 這個選項，你會看到預設的環境：Live，點選 Get Snippet 可以得到追蹤碼，將 Live 的追蹤碼貼到你正式站的 <head> 裡面。
建立一個自訂環境，取名為 Dev，在測試站、local 開發使用此環境的 Snippet。（你也可以選擇將 staging 與 development(local) 分開，但我找不到理由這麼做，所以 staging 與 dev 共用同一個）
去到 Variable ，將 Environment Name 打勾，並針對兩個 GA Tracking ID 建立兩個 type = Constant 的變數（這時候你就知道為何要調成英文了吧，中文的真的很難從一堆文字中判斷 constant 是翻譯成啥），可以命名為：
1. GA Tracking ID — Dev
2. GA Tracking ID — Live
還是在 Variable，建立一個 type = Lookup Table 的變數，將剛剛建好的 constant 塞進 row，使用 Input={{Environment Name}}，Output=GA ID Constant Variable，將其命名為：GA property all env。所以這裡我們會有：
Input / Output
Live / {{GA Tracking ID — Live}}
Dev / {{GA Tracking ID — Dev}}
去到 Tag，建立一個 Universal Google Analytics 標籤，track type: Page View，將 Enable overriding Setting in this tag 打勾，並選擇剛剛建好的 lookup table: {{GA property all env}}。
發佈：點選右上角的 publish，他會要你填版本名稱與描述，還有要發佈到 Live 環境，還是 Dev 環境，這邊卡很久因為不知道是要按兩次發佈，分別發佈到兩種環境，你的 Tracking code 才會 work… …

設定完以上（擦汗 💧，你在 local 就可以看到 GA 有流量進去了 🎉

SPA 網站要如何讓 page view 進到 GA

流量進去了，但是疑～url 怎樣都是 /，hmmm 因為開發使用 angular 與 react 為框架，屬於 Single Page Application，所以在瀏覽網頁時只有 browser history 會變，因此在 GTM 要做另外的設定。

詳細步驟圖片可以看這篇

將 Variable 設定裡的 New History Fragment 打勾
在 Tag 那邊，點開剛剛的 Universal Google Analytics 標籤，Tag Configuration > More Setting > Fields to Set > ADD FIELD > Field Name: page, Value: {{New History Fragment}}