Categories: Google Tag Manager

不同開發環境的 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 正確的埋到你的網站，你就能輕鬆的從各方的到追蹤資料。

read more: Google Tag Manager 教學、Google Tag Manager 跟 Google Analytics 傻傻分不清楚？

針對不同環境設定 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 權限，並建議在右上角找到使用者設定將語言設為英文會比較好懂。

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

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

Variable

Lookup Table

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

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

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

詳細步驟圖片可以看這篇

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

設定 Triggering 條件，Choose a trigger > 點右上角 + 建立一個新的 Trigger 命名為 History Change，Trigger Type 選 History Change，trigger on All History Change

做完以上的步驟 💦，你就可以在 GA 上看到 browser history 以 page 的形式出現囉 🎉🎉🎉

更多 GTM 進階的應用，推薦閱讀：
IT 鐵人賽：Google Tag Manager Micro Challenge 系列

我也還沒看完。

文章出處

Tin

Facebook Comments

About Post Author

Code For Marketing

鼓勵行銷人學習「工程思維」培養數據敏銳度，推廣善用工具的知識教育組織，透過數據與工程的掌握與應用讓行銷人提升價值，有效運用行銷工程。

See author's posts

Code For Marketing

鼓勵行銷人學習「工程思維」培養數據敏銳度，推廣善用工具的知識教育組織，透過數據與工程的掌握與應用讓行銷人提升價值，有效運用行銷工程。

Comments are closed.

Share
Published by
Code For Marketing
Tags: Google tag manager
6 years ago

Recent Posts

新使用者留存率分析

https://www.youtube.com/watch?v=MEydBzWAABo newn

3 years ago

SEO Basic 基礎SEO 知識(2) – 從內容看SEO

3 years ago

SEO 基礎知識 – 帶你初階認識SEO的基本知識

3 years ago

Retention 留存率分析Part 1 – 帶你認識基本的留存率分析架構

Part 2 留存用戶分析～加入會員即可觀看，免費體驗一個月，活動請參考： https://blog.codeformarketing.co/subscribe-pressplay-dija/

3 years ago

CFM電子報第四期

Hello 各位讀者～本期為第四期電子報，本次電子報我們將帶大家來看看一些最新的行銷時事以及工具的更新的有趣內容！ 目錄： Google網址檢查工具現在可以顯示多個參照網頁了 舊版的Google取消連結工具將在2021年1月19日終止服務 Google Search Console要使用者透過完成驗證程序來證明自己是資源的擁有者 Google搜尋出現內容複製鏡像網站的Canonical Bug Google解釋為何一些使用不良SEO策略的網站仍有不錯的排名 Google正在致力於改善robots.txt測試工具 Google Ads身分驗證制度即將上路 這些常見的SEO錯誤會有害於你的排名 Google指出：太專注於一種SEO策略可能會有害於整體SEO結果 Google面臨的反信任訴訟對行銷人會有什麼影響？ Google在華盛頓的暴力事件後暫停投放政治廣告 Google網址檢查工具現在可以顯示多個參照網頁了 Google近期在Google網站管理員的網址檢查工具中，讓一些URL可以顯示多個參照網頁了。…

3 years ago

CFM 電子報第三期

Hello 各位讀者～本期為第三期電子報，本次電子報我們將帶大家來看看一些最新的行銷時事以及工具的更新的有趣內容！ 目錄： 英國「Watchdog」對Google Ads的數據政策變更展開調查 你可以使用資料排除功能來避免轉換追蹤問題影響智慧出價 2021年SEO數位行銷的七個潮流 英國「Watchdog」對Google Ads的數據政策變更展開調查 英國的組織Watchdog已經開始針對Google近期對廣告數據系統的大翻新計畫展開調查，因為Watchdog認為這次的翻新可能會讓Google在線上廣告產業中，排除更多競爭對手。 英國的政府機構「競爭及市場管理局」(Competition and Markets Authority, CMA)聲明其將會針對Google近期關於從Chrome和Chromium架構的瀏覽器引擎中，移除第三方cookie的改變展開調查。 Cookie是小型文字檔案，是某些網站為了記錄使用者資訊(例如使用者名稱)而儲存在用戶端上的資料。它能幫助企業更有效率的鎖定客群投放廣告，對提供免費內容的網站也相當有幫助，但它也能用來記錄使用者在網路上的行徑。 Google在2022年即將推出的「數位沙盒」(digital sandbox)提案中，提到以自家的工具替代第三方cookie的計畫。但Watchdog認為這樣的改變會削弱出版者盈利的能力，以及破壞數位廣告競爭，讓Google更加根深蒂固的壟斷市場。 競爭及市場管理局的執行長Andrea Coscelli聲明：…

3 years ago