Google Tag Manager 教學：從界面引導到功能詳述的完整說明

Google 代碼管理工具 ( GTM ) 基本上是個容器，用於容納網站所有追蹤腳本或代碼

它可用於 PPC 轉化追蹤、再行銷、分析等

由於它們全部放在裡面，因此 GTM 可以輕鬆地追蹤和管理

更重要的是它是讓行銷人員及 IT 或開發部門滿意的緩衝 ( 稍後會詳細介紹 )

如同 Google Analytics Solutions：Digital marketing made ( much ) easier：Introducing Google Tag Manager 的記錄所言：「它於 2012 年 10 月推出，目的是用來幫行銷人員了解受眾群體行為並知悉網站效果！」

它有許多出色功能可幫您管理代碼需求 - 儘管這些工具已經用了一段時間，但許多行銷人員仍認為它們需要具有編碼經驗的人才能在網站上添加 "代碼"

考慮到這一點，有 4 個理由使得您需要關心它

它是免費的

在使用它前如果您不知道如何將 Javascript 添加到網站，則需要向 IT 部門尋求安裝幫助

但據我所知大多數開發人員都非常昂貴，因此將這些代碼添加到網站可能會花費大量時間

GTM 讓您回頭控制

當您開始時似乎自己執行代碼管理任務並不j是個明智選擇，畢竟它使您的工作量更大

話雖如此手動管理代碼有兩個主要好處，尤其是在早期：

更好的組織
更快地實施或調整

確實這兩個好處是並存的。如果您更有條理，那麼結果也可能會更快速

好處 1：GTM 作為組織中心
如果您用多個行銷自動化服務或代碼來管理多個網站，則 GTM 提供易於使用的界面來添加、刪除、啟用和禁用代碼，它還讓您控制觸發時間和位置，以及觸發後發生的情況。此外亦可井井有條防止數據丟失

好處 2：GTM 超級快
行銷人員面臨的最大障礙就是讓開發團隊擁有與它們相同的緊迫感

代碼實現和調整對於開發人員來說似乎是平凡的或不具有挑戰性的，這意味著該任務可能在其它優先事項上被優先忽略。或者也可以說如果的網站非常複雜且龐大，那麼對於開發人員來說，就顯得非常麻煩需要花更多時間處理

無論是因為混亂無序還是在等待開發人員，您都可以避免不必要推遲廣告活動的發佈日期，以及客戶喘不過氣來 - 想知道事情為什麼要花這麼長時間 ... 因為這是大多數行銷人員可以自行 DIY 的部份！

GTM 支持更快的頁面載入

您要關心的另一個原因不僅是人們瀏覽的時間，還要注意頁面的載入時間

借助 GTM 代碼得以簡化，這意味著代碼不再陷入困境並減慢頁面的載入速度

這直接通過兩種方式轉化為轉化：

＃1：增加用戶停留時間

就頁面載入時間而言，JavaScript可能是行銷人員最大的敵人。基本上 Javascript是精妙的事，在載入前不要讓其它任何東西加載，這意味著訪客可能會厭倦頁面載入過慢進而跳出頁面，而您也失去潛在的轉換。

通常頁面的各部分將按等待其它部分載入的順序進行載入，這稱為同步。但是 GTM 可以救助。由於 GTM 會在代碼準備好後立即加載，而不是按順序載入到其它代碼中，因此代碼會異步並同時在頁面上觸發，從而節省了大量時間

＃2：改進 SEO 性能

由於網站上用戶時間的增加會影響用戶體驗，因此這是 SEO 排名考慮因素

在以宏偉的角度來看，節省幾秒鐘的載入時間似乎並不重要

我的意思是 ... 幾秒鐘之內不會發生什麼事，對吧？錯了！

根據 How One Second Could Cost Amazon $1.6 Billion In Sales 的計算得出：「Amazon 每年的銷售成本可能高達 16 億美元，而放慢速度只有 1 秒鐘。另外 Google 的計算也得出，它們每天可能損失 800 萬次搜索，如果放慢速度 1/10 秒的話」

多個 GTM 用戶和權限

您應該關心 Google 代碼管理工具的原因是，您可以像 Google Analytics 一樣添加具有特定權限的多個用戶，還可控制誰有能力創建和編輯代碼、觸發器和變數

你可以在每個容器中授予訪問權限 - 用戶訪問選項的類型如下：

無法訪問：用戶無法在帳戶中看到該容器
讀取：用戶可以看到容器、容器中的代碼、觸發器和變數，但無法進行任何更改
編輯：用戶可以創建工作區並進行編輯，但無法創建版本或發佈
批准：用戶可以在帳戶中創建工作區、版本和進行更改，但不能發佈
發佈：用戶能夠創建工作區、版本、編輯並發佈它

稍後，我們將在後面的 "如何設置" 部分中介紹 GTM 的完整構建，但是創建用戶很簡單：

那麼，為什麼用戶和權限很重要？

我想您可能不希望 GTM 中的某些部分讓其它人觸摸，並使事情搞砸

如果使用不當 - 胡亂添加和編輯代碼、觸發條件和變數的能力可能會導致數據與轉換丟失和網站崩潰

四個故障保險，幫您防止犯任何錯誤並從中恢復

工作區
預覽
版本
內建第三方代碼

1）工作區

如果您有多個用戶在 GTM 中工作，那麼工作區可以輕鬆處理某件事，甚至不影響其它用戶的工作 - 非常適合有多個部門從事不同項目工作的公司，以及與代理機構合作的公司

2）預覽

作為 PPCer，我認為我們所有人都犯了一個錯誤 - 即發佈廣告只是為了意識到廣告文案中存在拼寫錯誤，但借助預覽功能 ... 您可以在代碼觸發頁面上即時查看 ( 如果該代碼已觸發的話 )

完成此操作後，請訪問該代碼應從其著陸的登錄頁面 - 您會看到某些代碼已被觸發，有些則還未。在發佈新代碼之前，您可以從那裡確定有效和無效方法

3）版本

每次將更改發佈到容器時都會創建一個版本。這將幫用戶創建更改的歷史記錄 - 何時進行更改以及由誰進行

當您發現某個地方的代碼壞了，就可重新發佈先前版本之一

您將看到創建和發佈上個版本的時間、發佈者和版本編號 ( ex：標記、觸發條件和變數 )

4）內置第三方代碼

如果您是 GTM 新手，那麼它們的內建第三方代碼對您來說就像是 Party

它只需很少的編碼經驗，並允許較少的技術用戶更加活躍地使用 GTM，這使得代碼的部署更加快捷，出錯的可能性也較小

內置代碼包括 Google Ads、Google Analytics 和 Google 再行銷等屬性

GTM 還提供了一些更受歡迎的代碼，例如 AdRoll、HotJar、LinkedIn、Bing UET 等

如何設置 GTM 的三個部分：

代碼：粘貼到網站頁面中的一小段代碼（通常是JavaScript）
觸發條件：定義何時何地執行代碼
變數：用於接收或儲存代碼和触發器要用的信息

終於可以開始了！要創建一個帳戶，請訪問 Google 代碼管理工具

如果您的首選電子郵件地址下沒有列出新帳戶，則會提示您添加一個新帳戶

依表格需求填入帳戶與容器名稱 & 選擇廣告平台

系統會要求您接受 GTM 的服務條款協議，然後您就可以開始了！

由於您已經創建了帳戶和容器，便可準備添加追蹤所需代碼、觸發條件和變數

規劃網站代碼

在開始實施任何代碼之前，請花點時間查看您的網站。退後一步，從訪問者的角度考慮

訪客如何瀏覽？它們將點擊哪些按鈕？您在哪一頁上需要什麼代碼？

您需要將某些代碼添加到網站的每個步驟中 ( Google 再行銷），而某些代碼僅在特定頁面上添加（轉化追蹤）

安裝代碼

好極了！現在是時候將該代碼植入到網站的每個頁面上

如下圖所示，您應該看到包含兩個代碼段的窗口

一個提示您將其放置在頁面的 <head> 中，另一個則是 <body> 之後

GTM 的組成元件

創建帳戶後，下一步就是設置容器、代碼、觸發條件、變數和文件夾

貨櫃

建立帳戶後，您需要創建一個容器。如果您熟悉 The Container Store，那就是類似的想法

The Container Store 的目的是為了讓人們將大量 "垃圾" 儲存到一個空間中的解決方案

而這本質上就是 GTM 容器

在這裡，您可以儲存所有代碼、觸發條件、變數和文件夾。它提供了運行和部署代碼的功能，並使其易於在一個地方進行管理。如果您只有一個網站，則只需要一個容器。將代碼放到網站後，您就成功添加了 GTM！

容器的三個組成部分是代碼、觸發條件和變數，也就是 GTM 的基礎

這基本上是整個系統的心臟

代碼

簡而言之，就是放在網站上根據特定用戶操作觸發的 JavaScript 代碼

以下是這些代碼從訪問者那裡捕獲的範例：

獲取：訪問者最終如何進到網站？它們曾用過哪些渠道到達那裡？
行為：它們正在查看哪些頁面？在網站上經過多少頁面，以及花費多少時間？
轉換：表單提交、交易

觸發條件和變數定義每個代碼的功能，我們將稍後進一步介紹

基本上代碼可以記錄網站上的任何行為或事件，並將數據發送到 Google 和第三方代碼

如果沒有 Google 代碼管理工具，則需要開發人員設置的來源檔將代碼直接放置在網站上

另外別忘了代碼可以包含多個觸發條件 ... 例如您可能有一個代碼，該代碼會在每次載入頁面以及該頁面發生點擊時觸發

第一個你將執行的代碼：Google Analytics
您可以添加 Universal Analytics 與 Classic Google Analytics 這兩個可進行選擇的 GA 代碼，但是如果您已經在使用 Classic GA，那麼現在可能是升級到 Universal 的合適時機！

要創建新代碼請至後台單擊 "新增代碼"

開啟畫面後在上方輸入可用於辨識的名稱 Google Analytics – Page Views，然後再點擊 "代碼設定" 後於接下來的畫面選擇第一個

再於 "代碼設定" 頁的 "追蹤類型" 確定選擇 "網頁瀏覽" 後，輸入你的 GA ID 或是選擇右邊圖示開啟變數清單

( 如果有點擊上方截圖中的右邊圖示的話 )

執行 GA HTML 代碼

與標準代碼實施相比，將通用 HTML 標記的 Google Analytics 添加到 GTM 的過程更加複雜

您可能需要開發人員或 IT 來協助完成此任務，但這可能是滿足複雜需求的最有效解決方案

HTML 代碼可讓您自定義，並希望確保流暢的用戶體驗

安裝完成後，任何調整都應由市場團隊在事後加以管理

觸發條件

此乃定義觸發哪個代碼以及何時觸發，並且只有在具有觸發條件的情況下才觸發

您可將所需的所有代碼添加到網站，但是如果沒有其它人觸發觸發條件，則什麼也不會發生

創建上述 Google Analytics 代碼後，您可以繼續創建觸發條件

如果您是第一次這樣做，請選擇 "All Page"

這意味著每次載入頁面時代碼都會觸發，這對於 Google Analytics 來說是必需的

你也可以選擇上圖右上角的 + 自創新的觸發條件

由於各自觸發條件的後續動作過於繁雜，為避免頁面過長，在此不隨機舉例說明

變數

此乃分配的任何值，並且在變數和触發器中都使用

在代碼中，變數捕獲購買商品時的動態值，例如交易金額。在觸發條件中觸發觸發條件時，變數定義過濾器。因此例如當某人到達/ thank-you 頁面時，URL 變數為/ thank-you

Google 代碼管理器提供一些常用的內置變數 - 頁面、實用程序、錯誤、點擊、表單和歷史記錄。您還可以創建用戶定義的自定義變數。在本文稍後的範示中，我們將用它

資料夾

我們需要定義代碼、觸發條件和變數嗎？插入資料夾，可能是容器所有這些部分中最簡單的

如果您用過 Google 雲端硬碟，則可能對這個概念很熟悉

因此在它的資料夾中，可以追蹤放在一起的電子表格、文件檔和投影片

而 GTM 資料夾則可以地組織代碼、觸發條件和變數 - 當您有多個人在 GTM 中工作並按團隊成員、項目或代碼類型來組織時，這樣做會變得更加容易

要創建它，請點擊左側的 "資料夾"，再按右上角的 "新增資料夾"

預覽並測試您的工作

創建代碼、觸發條件、變數並將它們分組到所需的資料夾後就幾乎可以啟動了！

我們在上面的 "為什麼您該關心" 部分中談到了預覽您的工作。在啟動前請完成測試過程，並確保一切正常

有東西搞砸了嗎？在測試時您可能會意識到發生了某些事情，因此需要刪除代碼
別擔心查看您的工作區變更，單擊便會顯示 "放棄變更" 或 "查看變更" 選項

提交

好極了！您已進入整個創作過程的最佳階段，您創建代碼的所有工作正在實現

在下一個截圖您將看到為這些更改創建新版本的選項 - 添加版本名稱和任何描述，以便以後需要時可以輕鬆識別。您將看到所做的工作區更改 - 類型、修改時間及 GTM 小組的成員，這使得驗證一切看起來不錯

恭喜，祝追蹤愉快！

技巧和最佳做法

好的，您已經創建了 GTM 帳戶並創建了一些新代碼
但是現在我們通過一些 GTM hack 和最佳做法來介紹有趣的部分，以使其對您更好

容器創建

最佳做法是為每個公司設置一個帳戶，為每個網站設置一個容器

許多公司不需要一個以上的容器。請記住 ... 關鍵是要鞏固

事件追蹤

此乃 GTM 真正發揮作用的領域 - 在 GTM 之前，如果您想追蹤按鈕點擊和視頻播放等事件，則需讓開發人員為每個事件添加追蹤代碼。當要添加大量代碼時，才能真正看到 GTM 的價值

事件追蹤非常棒！客戶曾經問過您訪客有多少次單擊連結、視頻或按鈕，而您不確定？

如果是，它將成為您的好夥伴

在開始實施前，您需要確保配置內建變量：網頁、點擊和表單

當您開始創建更多代碼並向下觸發時，便容易讓你達成想要的任何目的

捲動、捲動、捲動

您是否想知道你創建的所有內容是否真的引起了人們的關注，尤其是在首屏以下？

您可以用 HotJar 來提供熱圖分析，但即然咱們今天談的是是關於 GTM，自然有其解決方案

Parsnip.io 的 Rob Flaherty 創建了使用 jQuery 的外掛來衡量訪客向下滾動頁面的距離

首先創建一個觸發器並命名為 DOM Ready，這意味著 DOM 準備就緒時將觸發捲動深度代碼

DOM 代表文檔對像模型，但出於我們的目的，請將其視為整個 HTML 頁面

每次頁面或 DOM 完成載入時，瀏覽器都會觸發 DOM Ready 的觸發條件

而在創建觸發條件後，繼續創建代碼

點擊利用 jQuery Scroll Depth 追蹤使用者的閱讀情形連結 ( 請另開視窗 )

複製貼上其中的 HTML 程式碼於紅色框框中

使用 Javascript，我們可以連接到此 DOM Ready 觸發條件，以便代碼可以在瀏覽器每次載入新頁面時運作。另外在 "觸發條件" 上選擇剛剛設定好的 "網頁瀏覽" 來作為事件，便可在 "所有的網頁瀏覽" 上全部觸發

接下來我們將設置所需變數，好確保正確觸發

設定變數

變數分為四種不同的類型：類別、操作、標籤和值

而對於每個變數，您將在網頁變數類型中創建一個資料層變數

點擊後分別命名 eventCategory、eventAction、eventLabel、eventValue ( 後三者不截圖 )

應用變數

創建變數後將追蹤信息發送到資料層，然後創建特定於滾動深度的 Google Analytics 代碼

如果您將最後一項的 "非互動匹配" 設為 "是"，則這些事件不會影響網站跳出率

而在上方截圖下方的 "觸發條件" ( 畫面未顯示 ) 上選擇 "自訂事件"

為此事件命名，然後保存所有內容。測試您的版本好確保一切看起來不錯，然後發佈之

追蹤在線檔案下載

雖然轉化很重要，但請不要低估微轉化的力量，這些可以在轉換前甚至轉換後派上用場

例如在訪客下載白皮書後可以選擇下載其他 PDF。我們希望對此進行追蹤，好了解訪客興趣，因此我們可以在其它時間提供不同的東西

為此，請先創建一個新的觸發條件

選擇觸發條件類型，點擊 "所有元素"

從 "觸發此觸發器" 中，選擇 "部份點擊"，並將第一個下拉菜單更改為 Click URL、第二個則是 "與規則運算式相符（忽略大小寫）" ... 它將匹配文字字串的正規表達式，而忽略大小寫

在最後的表框中添加條件中的內容 - 如果要追蹤 PDF、PPT、PNG，則需要在後面框框處輸入 \。（pdf | ppt | png）$ ( 亦或可能需追蹤其它類型檔案，因此必須對此進行更改 )

創建觸發條件只需將其添加到代碼中，便會將數據發送到 GA，您可以在其中查看下載內容

此外您可以設置目標，以便在 GA 中輕鬆追蹤

追蹤離線檔案下載

相信你一定有疑問，如果將訪問量發送到社交媒體貼文或電子郵件中的連結該怎麼辦？

我們無法通過其它渠道添加 GTM，但可以通過它來破解

你需要在連結來自的站點與訪問者最終到達的站點間建立橋樑

同時設置 GA 和自定義 HTML 代碼，我們在上面的 "滾動深度" 部分中已進行了說明

使用計時器追蹤在線時間

雖然 Google Analytics 可以衡量網站停留時間，但通過 Google 代碼管理工具可以更準確衡量訪客的訪問時間

例如在網站的一頁上花了 1 分鐘，然後進入 "定價頁面" 閱讀一些信息，再關閉選項卡

在 Google Analytics 中不計算 "定價" 頁面上的時間。GA 會追蹤兩次點擊間的現場停留時間，而不是花在兩頁上的時間 ... 而這就是觸發條件的救援方法！

將間隔設為 30000 毫秒 ( 等於 30 秒 )、限制為 1、下方 URL 需另外新建變數且指定特定位置

建立後，您將需要創建代碼好將該事件推送到 GA

首先為您的計時器觸發條件 GA 創建一個新的事件追蹤類型代碼
將變數添加到類別 Timing、動作 30 秒、標籤 Page Path、Google Analytics 分析 Event GA 中好定義代碼，與設定下方的觸發條件 Trigger Configuration

設定觸發順序

並非所有代碼都生而平等，您可能希望某些代碼優先於其他代碼來觸發

如果您設定特定順序，則 "代碼排序" 將允許您指定是否要在另一個代碼之前或之後觸發

這對於要建立依賴關係確實會很有幫助。這是 Google 代碼管理工具提供的一項複雜功能，可以提供更多技術支持 ... 你可以閱讀代碼觸發順序來了解更多信息！

排除內部流量

請務必從 Google Analytics 追蹤中排除內部流量，這種流量可能會通過延遲網站和頁面瀏覽時間來干擾訪客數據。亦不會帶來轉化，從而降低總體轉化率

想要這樣作，請創建一個變數並將其命名為 IP Address，並選擇數據層變量 & 為其命名

接下來，您將創建觸發條件來觸發此操作

您將選擇 "自訂事件" 作為觸發條件類型，並為該事件添加名稱，然後選擇觸發條件

在下面的字段中選擇 IP 地址，然後添加要排除的 IP 地址

然後，您可以將此事件添加到通用 GA 代碼

安裝 Tag Assistant (by Google) GTM 代碼助手

驗證代碼從未如此輕鬆！

Google Tag Assistant 是個免費 Chrome 外掛，可幫您確保代碼（Google Analytics、Google Tag Manager，Adwords Conversion Tracking 等）能夠正常運行，或是需要更改好驗證是否按預期觸發 - 只需導航至任何頁面就會告訴頁面上所有代碼的錯誤報告及故障排除的改進建議

使用 Google Tag Assistant 記錄可以 ① 即時驗證、診斷和解決 Google Analytics 實施中的問題 ② 查找丟失或損壞代碼、無效事件和過濾條件、網站上的典型用戶流量等來進行下一步處理

記錄變更

可用的另一種觸發類型是 "記錄更改"

當瀏覽器記錄更改時將觸發，此觸發條件對於追蹤 AJAX 應用程序中的虛擬綜合瀏覽量很有用。用簡單的話來說就是當單擊頁面上的某些內容時看不到 URL 的更改，而是在 URL 的尾端添加了 # 號

當我單擊它時頁面重新載入，但 URL 不變，並且添加了代碼