一次搞懂GTM,設定、安裝與基本使用說明 - SEO - ESG 文章 蛋黃設計 - 最佳 ESG 數位永續平台提供者 蛋黃設計

SEO

一次搞懂GTM,設定、安裝與基本使用說明

Google Tag Manager(簡稱 GTM),是被業界廣泛使用的 SEO 網站分析工具之一,幫助企業輕鬆管理各種追蹤代碼,提升資料收集的效率與準確性。GTM 作為一款免費的標籤管理系統(Tag Management System, TMS),允許行銷人員透過介面快速發佈、修改和管理標籤,無需修改網站程式碼。透過 GTM,不僅能夠提升網站追蹤的靈活度,還能優化網站效能。

本篇文章將深入探討 GTM 的核心概念、優勢,以及如何有效運用它來提升網站數據分析與 SEO 效果,幫助你在數位行銷領域佔得先機!


Google Tag Manager 是什麼?

以下是節錄至 GTM 官方1中的介紹:

Google Tag Manager(GTM)是一款免費的標籤管理系統2(Tag Management System, TMS),由 Google 提供。它允許用戶透過簡單的網頁介面,設定和部署網站或行動應用程式中的各種標籤(Tags),如追蹤代碼和行銷分析工具,而無需直接修改網站的原始碼

- Google Tag Manager

標籤管理系統(Tag Management System, TMS)

💡小知識:Tag Management System 並不是 Google 專屬的系統,市場上有其他的服務提供商,但根據 W3Techs 在 2025 年 2 月的統計3 Google Tag Manager 在 TMS 市場占比約 99.7% 其次為 Adobe DTM 的 0.4% 以及 Tealium 的 0.2%。

隨著網頁技術的發展,有各式各樣針對「網站流量」或是「使用者在網站內瀏覽與操作流程」的分析工具,每一間公司的代碼都不太一樣,使用方式也有所不同,而 Tag Management System 可負責整合這些代碼,行銷人員或分析師不再需要在各種網站中分析使用者的歷程以及網站的流量,只需統一於 GTM 中設定,即可得到所有工具搜集的資料。

TMS 的優點
  • 網站內只需要一組分析代碼
    即可對應所有使用的分析工具,同時因為減少插入代碼,提升網頁效能與載入的速度
  • 可設定觸發條件
    依照不同觸發條件(點擊某按鈕、瀏覽某頁面、滾動某頁面到百分之多少等),行銷人員或分析師可以自行管理標籤,不需依賴工程人員,加速行銷活動的部署
  • 支援版本控制與回溯
    每次發布版本都會有記錄,可隨時回覆至某一個版本,應用於某些限定期間活動或是偶發狀況
  • 支援預覽與除錯
    正式發布前,可以先進行預覽與測試,確保正式上線可以正確接收資料

Google Tag Manager 跟 Googler Analytics 的差異

我的網站已經有使用 GA 分析了,是不是不需要使用 GTM 呢?首次踏入網站分析或是 SEO 領域的使用者常常會提出類似的問題。

我們在 GTM 中設定所有希望搜集到的原始資料,進而利用這些資料在 GA 中進行流量分析或是使用者行為分析。

簡單來說 Google Tag Manager 主要用來 管理和觸發 Google Analytics 相關的追蹤標籤,而 GA 本身是負責 收集和分析數據。你可以透過 GTM 設定 GA 標籤,並決定 GA 何時收集哪些數據。

舉一個簡單的例子:在只有設定 GA 的條件之下,可以直接於 GA 中得到蛋黃設計 - 註冊頁面的「瀏覽總量」,但如果想知道使用者從網站的哪個連結進入註冊頁面的話,便需要在 GTM 中對網站內有連結到註冊頁面的按鈕進行設定,設定完成後,便可以在 GA 中清楚得知,使用者最常點擊哪個按鈕進入註冊頁面,有了這些資料行銷團隊以及設計團隊便可以針對這些資料進行網站的推廣與改善。

Google Tag Manager 介面介紹與名詞解釋

帳戶頁面

帳戶頁面。圖片來源: Google
  1. 「帳戶」分頁:查看及編輯代碼管理工具容器,以及各個帳戶和容器的設定。
  2. 「Google 代碼」分頁:查看及編輯 Google 帳戶所有相關聯 Google 代碼的設定。
  3. 「建立帳戶」按鈕:建立與 Google 帳戶相關聯的代碼管理工具帳戶。
  4. 查看代碼管理工具帳戶的名稱。
  5. 查看及編輯代碼管理工具帳戶的設定。
  6. 查看及開啟代碼管理工具帳戶中的容器。
  7. 查看及編輯代碼管理工具帳戶中的容器。

帳戶與容器的關係:一個帳號內可以包含多組容器(一個容器等同一個網站),假設企業底下具有多個企業相關網站(企業官網、企業永續網站、投資人網站、活動網站等等),那可為企業建立一個「帳戶」,企業的每個相關網站都屬於獨立「容器」。

新增帳戶流程:點選「建立帳戶」(圖片中標示號碼 3),並且輸入至少一組容器(一個網站)的網址。

新增容器流程:在已有帳戶的條件下,點選該帳號右側「編輯」(圖片中標示號碼 5),選擇「建立容器」。

帳戶頁面中,會列出所有帳戶以及容器,如果要針對容器進行管理,需選擇對應的容器進行編輯。

容器編輯頁面

容器編輯頁面。圖片來源: Google
  1. 在代碼管理工具帳戶和各帳戶中的容器之間切換。
  2. 在目前的容器工作區中進行搜尋 (例如找出 Google 代碼)。
  3. 「工作區」分頁:您可透過此分頁前往工作區到達網頁。
  4. 「版本」分頁:您可透過此分頁前往不同版本的容器。使用右上角的按鈕 (圖片中標示號碼 7 的位置) 發布變更,即可建立版本。
  5. 「管理」分頁:您可在此存取容器的管理設定。
  6. 按一下「GTM-XXXXX」連結,即可查看容器安裝操作說明。
  7. 預覽及發布工作區版本。您可以透過畫面左上方的「版本」分頁 (圖片中標示號碼 4 的位置),存取舊版本。
  8. 建立及編輯代碼、觸發條件、變數和資料夾。

容器編輯頁面:每一個容器都會有一個獨立的編輯頁面。

GTM名詞解釋

  • 觸發條件
    GTM 內建多種實用的觸發條件,像是:網頁瀏覽、初始化、點擊元素或連結。在多數情況下,內建的觸發條件已經足夠應用,但使用者可以再額外新增客製化的觸發條件。 
    觸發條件是指控制代碼何時執行的規則。在 GTM 中,代碼不會自動執行,必須透過觸發條件來決定何時啟動,例如: 使用者瀏覽特定頁面(如「感謝頁」) 按鈕點擊(如「提交表單」) 滾動到特定百分比(如 50%)透過觸發條件,GTM 能夠確保代碼只在適當的時機執行,提高追蹤資料的準確性。
  • 代碼
    核心功能,可以在這邊選擇需要關聯的代碼種類,最常見的即為 GA,只要將 GA 的評估 ID 輸入,就可以將 GTM 搜集到的資料傳送到 GA 進行分析。除此之外還有像是 Hotjar, Linkedin Insight, Quora Pixel, Facebook Pixel 等常見的分析工具可以選擇。設定關聯代碼後,接著選擇「觸發條件」便完成設定。
  • 變數
    變數是一組用來儲存特定資料的變數值,可在代碼、觸發條件和其他變數中使用。變數的主要作用是動態傳遞資訊,讓代碼與觸發條件可以根據不同的條件執行。
    通常情況下,變數的設定需要和工程人員確認,由工程師在程式碼中編輯特定變數名稱,對照 GTM 的變數名稱設定,即可達成特定觸發條件。
  • 資料夾
    資料夾是 GTM 內部用來整理代碼、觸發條件和變數的工具。當 GTM 帳戶內有大量代碼時,透過資料夾分類可以讓管理更加有條理
  • 範本
    預先設計好的代碼或變數格式,讓使用者能夠快速設定代碼,而無需從零開始
  • 上線版本
    上線版本指的是目前正式運行中的 GTM 設定版本。每當 GTM 內的代碼、觸發條件或變數有所變更,都需要「提交」才會生效。
    • 版本管理功能:GTM 會記錄每次發佈的版本,可隨時回溯舊版本
    • 避免意外變更影響追蹤:如果新版本有錯誤,可立即回復到上一個穩定版本
    • 測試與除錯(Preview Mode):在發佈前,可以使用預覽模式確保標籤正確運作
    • GTM 透過上線版本的管理機制,確保追蹤代碼的變更可控,並能隨時還原舊版本,減少因錯誤設定而影響數據收集的風險。

如何安裝 Google Tag Manager

安裝 GTM 非常簡單,可參考「容器編輯頁面」單元中,點擊(圖片中標示號碼 6)的「GTM-XXXXX」就會看到以下的畫面

只需要將下列程式碼貼到網站中即可完成安裝(或交由資訊同仁協助),如果您的網站已經有對外的網址,也可以於貼上後輸入網址測試是否成功。

安裝 Google Tag Manager

就如同開頭提及的, TMS 最大的優勢之一即為,只需要貼一串程式碼即可完成絕大多數的資料搜集與分析。我們在上一個步驟中設定的所有代碼以及觸發條件,都只需要這串程式碼即可完成。

設定觸發條件

在容器編輯頁面中->點選「觸發條件」頁籤->點擊「新增」

新增觸發條件

點擊觸發條件設定卡片->選擇希望設定的條件類型。可以看到 GTM 內建很多實用的觸發條件,可依照真實使用情境來設定,這邊以「點擊 - 僅連結」為例。

選擇希望設定的條件類型

選擇「部分的連結點擊」->設定事件為「Click Classes」->輸入網站中按鈕的class(此處假設連結按鈕為.testing-btn),記得將事件命名為可辨別的名稱。這邊不一定要選擇class這個事件,可以選擇ID或是其他內建以及自定義的變數事件。

設定事件、按鈕連結的class以及為觸發事件命名

完成以上步驟,我們自定義的觸發條件就算設定完成了,接著要將代碼綁定到這個觸發事件。

設定代碼

當自定義的觸發條件設定完成後,接著我們可以到「代碼」頁籤->點擊「新增」,在上方選擇「Google Analytics:GA4 事件」,並在下方「觸發條件」卡片中,選擇剛剛新增的條件。

將自定義觸發條件,綁定到 GA 事件中

完成!儲存代碼後,便建立完第一個自定義的代碼。

確認是否設定成功

在正式提交之前,可以點擊「預覽」,讓 GTM 內建的 Tag Assistant 連結至您的網站,只需要輸入網站的網址後點擊「連結」,就可以開始為新增的代碼進行測試。確認可以搜集到設定的代碼後,就可以安心的提交。

每一個提交的版本,都可以輸入版本名稱以及說明文字,幫助管理人員了解不同版本間的差異。

發布版本

完成發布後,使用者只要觸發我們所設定的觸發條件,在 GA 中的「事件」單元,便可以搜集到所有在 GTM 中設定的代碼。

後續

GTM 的設定,並非只適用於全新的網站也不是一次設定終身有效,為了使搜集的資料更加貼近使用者,分析人員需要經常性的調整搜集資料的方式。

同時,我們可以在 GTM 容器編輯頁面利用標記診斷工具來查看「容器品質」的指標。盡可能將品質維持在極佳的狀態,確認故障代碼的原因、刪除未使用的代碼與觸發條件已提升容器品質。

容器編輯頁面中,可查看容器品質。

深度結合數位永續平台

Google Tag Manager 是數位永續平台內建永續工具之一,同時也包含 Google Analytics, Facebook Pixel 三大主流社群行銷整合工具,且在數位永續平台中不需要將程式碼貼回網頁原始碼,只需要將企業專屬的 「GTM-XXXXX」 編號貼進數位永續平台的後台內,即完成串接。

參考資料:
2 標籤管理系統(Tag Management System,簡稱 TMS)是一種工具,旨在協助網站和應用程式的管理者有效地添加、更新和管理各種追蹤代碼(通常稱為「標籤」),而無需直接修改網站或應用程式的原始碼。

日期

2025.02.17

分享

網址已複製

踏入永續,就是這麼有效率

專為永續而生,簡單、快速又美觀,您還在等什麼?