GTM是什麼?與GA差異?Google Tag Manager代碼管理工具設定與教學

這是一篇我希望當初我在學 Google Tag Manager 時，就有人能為我準備好的文章，當時的我雖然找不到，但在歷經無數的學習與鑽研後，現在，我將這篇文章交給你了！

在文章開始前想與你分享，透過 Google Tag Manager 將數據資料傳入至 Google Analytics 4 後的下一步該怎麼做呢?
Google BIgQuery 就是你的好幫手，透過這個工具能讓你將收回來的數據資料運用最大化。我在 2024 年開設的最新課程：數據啟航：Google Analytics 4 與 BigQuery 整合應用入門，將手把手教你如何使用這個工具！

了解更多課程內容

Google Tag Manage(代碼管理工具)是一個非常強大的工具，它使網站數據追蹤變得更容易，能節省網路行銷人以及工程師好幾倍的時間成本！過去 5 年，我自己也將它應用在大大小小的專案中，它已經成為我管理網站數據追蹤碼不可或卻的必要工具。

想要追蹤按鈕點擊? 沒問題，
想要追蹤表單提交? 一樣也能快速搞定！
進行網站使用者的行為追蹤，不需要寫任何一行程式，這就是 Google Tag Manager 最常見的基礎應用。

行銷人不需要再等到忙碌的工程師有空時(通常要好幾天)，才把你的追蹤碼安裝到網站裡，你自己就可以進行追蹤碼的部署，不過！有了這項工具，並不代表你不需要工程師了，反而是能使團隊更有效率的合作，所以，透過 Google Tag Manager 你就能夠更快速的安裝數據追蹤碼到網站裡，例如廣告轉換(Google Ads、Facebook Pixel)、網站分析(Google Analytics) … 等等。

不過，應該要從哪裏開始呢? Google Tag Manager 看起來有許多專業術語，的確，它對於初學者來說有一定的學習曲線，這也是我寫這篇文章的目的。

Google Tag Manager 是什麼

Google Tag Manager 是一個追蹤碼管理解決方案，它作為網站與第 3 方追蹤碼的中間層，可以節省許多人力與時間成本，而且完全免費。

你要做的，只是到 GTM 後台，設定想要安裝的追蹤碼以及希望的啟動時間點即可。
例如. 你希望在使用者到達感謝頁的時候啟動 Google Ads 轉換追蹤碼

你也可以把 GTM 想像成是一個學校糾察隊中控室，你可以設定違規行為，來讓糾察隊員為你做登記，假如邊走邊吃要做登記的話。

那麼

違規項目 = 邊走邊吃 = Google Ads 轉換(追蹤碼)

糾察隊的登記依據 = 行進中且嘴巴在咀嚼 = 到達感謝頁

所以

你可以設定很多違規項目以及登記依據，來讓糾察隊去登記各式各樣的違規行為，就好像網站有各式各樣追蹤碼，需要在特定時間點啟動。

GTM 還提供了很方便的測試功能 — 預覽模式，它可以讓你快速測試該啟動的追蹤碼，到底有沒有在特定行為發生時啟動，此外，GTM 還有一個超大的優點，就是數據追蹤碼的部署，不一定非得要去改動網站原始碼。

所以，相較於傳統直接將追蹤碼安裝到網站的方式，若你使用了 GTM，你只需要在後台點擊幾下就能完成追蹤碼的安裝。

Google Tag Manager 與 Google Analytics

許多初學者都會對於 Google Tag Manager 與 Google Analytics 之間的關係感到困惑，而不知道要使用哪一個，其實，它們是互相獨立的工具，並沒有誰取代誰。

Google Tag Manager 只是讓我們能方便管理追蹤碼，並且進行資料轉運，而 Google Analytics 則是專門用來蒐集訪客數據的工具，並且提供相應的報表。

所以，我們是透過 Google Tag Manager 來啟動 Google Analytics 進而達到蒐集數據的目的。

而且不只有 Google Analytics 可以透過 Google Tag Manager 做管理，其他類型的追蹤碼也可以：

Google Ads 轉換與再行銷
Facebook Pixel
Hotjar
任何 HTML 追蹤碼

5 個使用 Google Tag Manager 帶來的好處

好處一、快速部署追蹤碼

以下是使用傳統方式將追蹤碼埋入網站的日常

行銷人想要開始一個新的行銷/分析專案，需要蒐集使用者數據來衡量成效
行銷人將追蹤碼提供給工程師
如果想要蒐集的數據較複雜，則還需要許多信件來回以及會議討論
由於工程師很忙碌，通常要等上好幾天(禮拜)，整個數據追蹤專案才會完成

若使用 Google Tag Manager，在許多情況下，以上的冗長流程可以被大幅改善。

因為埋追蹤碼不一定非得要去改網站，你可以在後台安裝任何想要的追蹤碼，效率大幅提升。

好處二、提昇行銷人與工程師合作效率

Google Tag Manager 把數據追蹤分解成 3 個元件：代碼、變數與觸發條件，換句話說，只要能夠完成這 3 個元件的設定，就完成了一個數據追蹤。
由於行銷人與工程師有了共同的語言，因此溝通成本大幅降低。

好處三、所有追蹤碼都在同一個地方集中管理

若使用傳統方式將追蹤碼埋入網站，由於程式散落在網站程式的各處，不管是想要維護或者更新，都相當不便。

若使用 Google Tag Manager 所有追蹤碼都在後台很清楚的條列，由於追蹤碼都被元件化，因此維護更新非常方便，而且更重要的是，行銷人與工程師可以一起管理維護這些追蹤碼，這些追蹤碼不會再落入一個三不管地帶。

好處四、行銷人也能自行部署追蹤碼

由於 Google Tag Manager 將追蹤碼範本化，因此不需要寫程式就能完成追蹤碼的設置，這對於行銷人來說非常方便。

例如你可以在 GTM 後台的友善介面下，來完成一個 Google Analytics 事件設置：

好處五、內建測試工具

正確的數據絕對是一個數據追蹤專案的最基本要求，Google Tag Manager 提供的預覽模式可以讓使用者可以很方便以及完整的測試。

說到測試，當然也不能忘了許多很棒的瀏覽器插件，例如 Google Tag Assistant、Facebook Pixel Helper 與 dataLayer Inspector。

Google Tag Manager 是如何運作的

所有初學者要開始使用 GTM，一定要先認識這 3 個 GTM 主要元件：代碼、變數以及觸發條件

代碼：是一段要被安裝到網站上的程式。
它可以是數據追蹤碼模板。例如 Google Analytics，也可以是任意的 HTML，例如用來更換網站的按鈕顏色。當你建立一個代碼，就是請 GTM 幫你執行特定任務，例如，你可能會希望當使用者在網站進行點擊或者瀏覽時，紀錄 Google Analytics 數據。

觸發條件：是一個啟動條件，來決定代碼要什麼時候啟動。
代碼可能會需要在許多不同時間點啟動，例如點擊、網頁瀏覽甚至表單提交時… 等等，因此這些時間點就必須被定義在觸發條件。當一個觸發條件裡所設定的條件被滿足時，所有使用了該觸發條件的代碼都會啟動，而反過來說，沒有觸發條件的代碼是不會啟動的。

變數：它是一個小幫手，可以協助我們完成一些重要設定，它會被用在代碼以及觸發條件裡。變數可以用來：

儲存資料：例如超連結網址、超連結上的文字甚至訂單金額 … 等等
儲存代碼設定：例如 Google Analytics 設定變數可以用來儲存 Google Analytics 代碼的相關設定(資源編號、自訂維度 … 等)
程式：變數裡還可以寫程式來進行一些複雜的操作，不過對初學者來說太進階了，我們先不細談這個部分。

我們接著來看看這 3 個元件如何組合在一起：

接著來看一段範例，假如我們希望在使用者到達訂單完成頁時啟動一個 Google Ads 轉換，並且附帶訂單金額，看起來就會像是：

建立 Google Tag Manager 帳號

要開始使用 GTM 必須要先建立一個帳號，可以進到官方網站進行申請，並且點擊右上角的按鈕。

就像許多 Google 產品一樣 (Google Analytics、Google Ads)，你必須先有 Google 帳號才能開始進行 GTM 帳號申請，登入後會看到以下畫面。

建立帳號的同時，也必須進行容器設定，你可以根據你的平台選擇容器類型(網站、AMP、iOS 與 Android)。

Google Tag Manager 的帳號架構與 Google Analytics 帳號架構非常相似，帳號通常是以公司或者客戶為單位切分；而容器則要視數據策略的規劃來決定是否要讓多個網站共用，例如你同時經營電商以及部落格網站，兩個網站會互相導流且需要進一步分析彼此之間的成效關聯，又或者你希望使用部落格的數據來為電商網站下廣告，在這些情況下就適合共用同一個容器。

而反過來說，如果你經營兩個網站，彼此之間沒有任何關聯，也沒有需要交互運用資料，那麼共用容器可能就不是那麼的方便了。

安裝 Google Tag Manager 到網站

在建立 Google Tag Manager 後，就會在工作區裡看到一個彈出視窗，包含容器程式碼，你必須將這兩段程式碼交給工程師，並且根據指示進行安裝，<script> 區段要埋到 <head> 而 <nosript> 區段要埋到 <body> 開頭。

如何確認 Google Tag Manager 安裝成功

在安裝 Google Tag Manager 到網站後，就可以來測試是否有順利運作，推薦 2 種方法進行測試：

一、開啟預覽模式

首先到 Google Tag Manager 工作區裡點擊右上角的預覽

回到頁面進行重新整理

二、使用 Google Tag Assistant

Google Tag Assistant 是一個 Chrome 插件，可以很方便的用來測試 Google 相關的程式碼在網站上是否順利運作。

在將插件安裝到瀏覽器後，請點擊 Enable

接著再次重新整理頁面，就可以看到代碼安裝的情況

每個 Google 追蹤碼標籤可能有 3 種情況：

綠色代表完全沒問題
藍色代表運作中，但仍有部分可以改善
紅色代表錯誤

如是藍色或者紅色你可以點擊標籤來進一步查看改善建議

透過 Google Tag Manager 安裝 Google Analytics 網頁瀏覽

每個網站幾乎都要安裝 Google Analytics 來衡量成效，在過去，行銷人得在 GA 後台拿到追蹤碼，並且轉交給工程師進行安裝。

不過，現在我們已經安裝好 Google Tag Manager，所以行銷人自己就可以來安裝 Google Analytics，我們立即來建立第一個代碼吧！步驟如下：

首先到工作區的代碼區塊，點擊新增代碼

點擊代碼設定

選擇通用 GA

追蹤類型為網頁瀏覽，接著在 Googe Analytics 設定點擊下拉選單裡的新增變數，我們準備來建立第一個變數。

Google Analytics 設定變數是一個很方便功能，它可以節省我們大量的時間，它主要的概念是將代碼的相關設定存在變數裡，例如追蹤編號、跨網域設定甚至自訂維度 … 等，如果沒有使用這項功能，在管理上會非常不便。

我們想像一下那會是什麼樣的情況，例如你有 30 個 Google Analytics 代碼，而你突然需要新增一個自訂維度，而且所有代碼都要有這個維度，那麼，你必須要到 30 個代碼裡去修改 30 次才行，這幾乎是不可能的任務，非常耗費時間，此外，GA 資源編號是個必填的設定，因此你可能也不會希望每次要新增代碼都得要去 GA 後台查詢一次資源編號。

所以，使用設定變數，看起來就會像是，你把相關設定都存在變數裡，然後所有代碼都使用這個變數，所以每次要做更動只要改變數即可。

我們來完成 Google Analytics 設定變數的設定吧！首先，我們得將 GA 追蹤編號儲存到設定變數裡，這樣這樣 GTM 才知道要把資料送到哪一個 GA 帳號。

接著到 GA 後台 > 管理 > 資源 > 追蹤資訊 > 追蹤程式碼裡複製追蹤編號

儲存變數後，代碼就使用了 GA 設定變數；我們接著看到代碼設定下方，點擊觸發條件，然後為代碼設定一個 All Pages 的觸發條件，顧名思義這個觸發條件會在所有頁面都啟動。

接著點擊儲存代碼，就大功告成了！你已經完成了一個 Google Analytics 網頁瀏覽追蹤，這跟把 Google Analytics 追蹤碼直接埋到網站裡的效果是一樣的，我們接著來進行測試。

預覽模式

在發布變更之前，我們必須先測試代碼有沒有正常運作才行，這時我們就可以使用預覽模式來快速進行測試。

預覽模式開啟後，所出現的預覽面板，可以用來觀察代碼的相關運作情況！

請在工作區點擊右上角的預覽，點擊後就會看到橘色的提示訊息，代表預覽模式已經開啟。

接著回到網頁重新整理頁面，就可以看到，剛剛所建立的 Google Analytics 代碼已經啟動。

同時我們也可以到 Google Analytics 的即時報表裡來查看是否真的有收到數據，請到 GA 後台 > 即時 > 總覽。

的確，我們也可以在即時報表裡看到數據。

發布 Google Tag Manager 容器

在測試完成後，我們就可以提交變更，來讓變更真的生效在網站裡，請在工作區點擊右上角的提交。
(反過來說，在發布以前，開啟預覽模式時，變更只作用在你當下的瀏覽器，並不會影響到一般使用者)

在提交設定裡，有 2 個選項，分別是

建立版本：指的是把當下工作區所有變更儲存並建立版本，這就好像打遊戲存檔一樣，如果不小心被 Boss 打死還可以重頭來過，把版本做好分類，可以讓你隨時能將容器返回某個穩定的版本。
發布及建立版本：指的是除了建立版本，還同時將變更發布到線上，因此所有使用者都會吃到新的變更，換句話說，也就是正式的開始蒐集數據啦 ~~

我們要選擇發布及建立版本，並且為版本取個適當的名字，然後點擊右上角的發布。