不同開發環境的 GTM(Google Tag Manager) 設定 for staging and production

Tin

6 min readNov 2, 2018

此篇文包含：

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

此文為筆記。如果你跟我一樣是不懂 GA 也不懂 GTM 的開發者，或是想了解，可以將此文當作入門。

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

GTM 是什麼？

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

針對不同環境設定 GTM（適用 GA4）

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

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

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

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

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

step1. ADMIN 頁籤裡找到 Environment 這個選項，你會看到預設的環境：Live，點選 Get Snippet 可以得到追蹤碼，將 Live 的追蹤碼貼到你正式站的 <head> 裡面。
step2.建立一個自訂環境，取名為 Dev，在測試站、local 開發使用此環境的 Snippet。（你也可以選擇將 staging 與 development(local) 分開，但我找不到理由這麼做，所以 staging 與 dev 共用同一個）
step3.去到 Variable ，將 Environment Name 打勾，並針對兩個 GA ID 建立兩個 type = Constant 的變數（這時候你就知道為何要調成英文了吧，中文的真的很難從一堆文字中判斷 constant 是翻譯成啥），可以命名為：
1. GA4 MEASUREMENT ID— Dev
2. GA4 MEASUREMENT ID — Production

step4.還是在 Variable，建立一個 type = Lookup Table 的變數，將剛剛建好的 constant 塞進 row，使用 Input={{Environment Name}}，Output=GA ID Constant Variable，將其命名為：GA property all env。所以這裡我們會有：
Input / Output
Live / {{GA4 MEASUREMENT ID — Production}}
Dev / {{GA4 MEASUREMENT ID— Dev}}

step5. 去到 Tag，建立一個 GA4 — Configuration 標籤，tag type: Google Tag，Tag ID 選擇剛剛建好的 lookup table: {{GA property all env}}，trigger 選擇 All Pages + History Change。

step6. 發佈：點選右上角的 Submit > Publish，他會要你填版本名稱與描述，還有要發佈到 Live 環境，還是 Dev 環境，要按兩次發佈，分別發佈到兩種環境，你的 Tracking code 才會 work… …

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

✨ 如何在 local 確認設定成功、流量有進去？

利用 GTM preview 功能，路徑：GTM -> Admin -> Enviomnments -> {dev} -> Actions -> Share Link -> 輸入你的 url -> 複製下方的連結，go to link -> 會跳出 connect 視窗，按下 connect 就可以模擬不同環境下的 GTM 運作了。