文章目錄
Google Tag Manager 是什麼
Google Tag Manager,簡稱 GTM,叫谷歌代碼管理工具,是一款強大的免費代碼部署工具。
Google Tag Manager是一套代碼管理系統 (TMS,TMS全稱是Tag Manager System,Adobe Launch也屬於TMS之一),方便你快速更新追蹤程式碼和相關程式碼片段,你只要在專案中新增一小段「代碼管理工具」程式碼,就可以透過網頁式使用者介面輕鬆且安全地部署分析及評估代碼設定。
Google Tag Manager 能做什麼
- 埋設網站追蹤代碼(這是最主要的)
優點
- 簡化埋設網站追蹤代碼的流程,加速開發的速度:透過GTM,代碼管理不用再依賴工程師去埋相關的程式,分析師/行銷人可自己來進行管理。
- 提高網站的載入速度:透過 GTM 去載入代碼是異步執行,這代表網站不會被載入較慢的代碼給拖累,提升網站的使用者體驗。
- 代碼統一管理:所有的代碼統一儲存在 GTM 的容器內,可以隨時增刪改代碼,操作簡單,代碼管理方便,,降低工程人員的維護工作成本。
- 版本控制,:GTM可以協助我們進行版本控制,發生錯誤時可以即時回到前一版
- 測試環境:提供Tag Assistant用於實時測試和數據驗證,減少代碼埋錯的機會
- 和其他 Google 服務完美的整合:如Google Analytics、Google Optimize 和 AdWords 等
不足
GTM並不是只有優點和好處,它也有一些不足的地方:
- 如果GTM被擋掉,GTM所有的追蹤碼都將失效:GTM的追蹤碼其實是JS檔案,如果使用者的瀏覽器異常,或主動擋住GTM的追蹤碼,那麼GTM上設定的所有追蹤碼都將失效。
- 需要一定的開發基礎:因為GTM上有很多的 Java Script,如果有可能 GTM 裡面放的程式碼有誤,連帶影響網頁的正常功能,所以使用者具備一定的工程師背景會更適合。
- 需要一定的學習成本:GTM這個工具雖然說簡單很多,但裡面的各種設定還是需要一定的學習才能準確掌握。
Google Tag Manager的賬戶結構
Google Tag Manager的賬戶結構是:賬戶——容器
- 賬戶:GTM的最高層級,一般是一家公司對應一個賬戶,賬戶下面可以創建多個容器,如下圖中的“Haran Huang”就表示一個賬戶
- 容器:容器是存儲設定,一般是一個網站對應一個容器,如下圖中的“Digital Analytics – Basic Assessment”,“EC”,“GA4”和“Server”就表示不同的容器,每個容器都有一個容器ID,是以GTM-開頭
Google Tag Manager介面說明
Google Tag Manager的3大元素
接下來說明 GTM 最重要的三大元素:
- 代碼
- 觸發條件
- 變數
代碼
觸發條件
變數
安裝Google Tag Manager
接下來介紹如何安裝Google Tag Manager
創建容器
前往 Google Tag Manager代碼管理工具,並使用你的Google 帳戶登入,在Google Tag Manager中的賬戶右側點擊三個點,然後點選“建立容器”:
容器名稱:就是容器的名稱,為了便於區分,一般用網站的域名,我這裡是www.haranhuang.com
目標廣告平台:就是要安裝的目標廣告平台類型,一種有5種,根據實際情況去選擇,我這裡是網站,所以選擇“網路”
- 網路:就是網站類型
- iOS:就是iOS應用程式
- Android:就是Android應用程式
- AMP:谷歌的AMP
- Server:伺服器標籤追蹤
設置好後點擊“建立”就會創建容器。
獲取Google Tag Manger追蹤碼
創建好容器後就獲取Google Tag Manager的追蹤碼,打開容器,點擊「管理」——「安裝 Google 代碼管理工具」:
這個就是Google Tag Manager的追蹤碼,可以看到Google Tag Manager的追蹤碼是有兩段,一段要求安裝在head裡,一段要求安裝在body。
一般是按官方的要求安裝,當然,你可以將兩段追蹤碼都安裝到head裡。
安裝Google Tag Manger追蹤碼
让DE将追踪码添加到網站的模板頁:
一段到head裡,一段在body裡。
這樣就可以了。
驗證安裝
安裝後,需要驗證Google Tag Manager追蹤碼是否安裝準確。
在驗證之前,先需要在Google Tag Manager容器發佈一個版本,這樣Google Tag Manager追蹤碼才能正常加載,點擊右上角的“提交”就可以發佈版本:
然後打開Chrome開發者工具,找到Network,在Filter裡用“GTM-”過濾:
可以看到GTM的請求是正常加載,狀態是200表示加載成功,也就是Google Tag Manager追蹤碼安裝成功。
如果你使用的WordPress,延伸閱讀:WordPress中安裝Google Tag Manager追蹤碼