行銷專欄戰國策 台灣SEO優化服務

行銷專欄

MARKETING

GTM 教學|Google Tag Manager 從零開始完整安裝與設定指南

戰國策 台灣SEO優化服務

一、GTM 是什麼?為什麼行銷人離不開它?

Google Tag Manager(GTM)是 Google 提供的免費標籤管理工具,讓行銷人員可以在不修改網站程式碼的情況下,自行安裝和管理各種追蹤代碼(Tag)。舉例來說,過去你要在網站上安裝 Meta Pixel、Google Analytics 追蹤碼、Google Ads 轉換追蹤碼,每一個都需要請工程師在網站原始碼中嵌入一段 JavaScript,來來回回溝通可能就要花上好幾天。

有了 GTM 之後,你只需要在網站上安裝一次 GTM 的容器代碼(Container Code),之後所有的追蹤代碼都可以透過 GTM 的視覺化介面來新增、修改和刪除,完全不需要再動到網站原始碼。這對行銷團隊來說是一個巨大的效率提升,也大幅降低了因為修改程式碼而導致網站出問題的風險。

二、GTM 的三大核心概念

要使用 GTM,必須先理解三個核心概念:代碼(Tag)、觸發條件(Trigger)和變數(Variable)。這三者的關係可以用一個簡單的比喻來理解:代碼是「要做什麼事」,觸發條件是「什麼時候做」,變數是「需要用到什麼資訊」。

概念 英文 功能說明 生活比喻
代碼 Tag 要執行的追蹤程式碼片段 快遞包裹(要送出去的東西)
觸發條件 Trigger 決定代碼何時被觸發執行 門鈴響了(什麼時候送出去)
變數 Variable 提供代碼和觸發條件所需的動態資訊 收件地址(送到哪裡、送什麼)

GTM 三大核心概念:代碼 Tag、觸發條件 Trigger、變數 Variable 的關係圖

三、GTM 帳號建立與容器安裝

步驟一:建立 GTM 帳號

前往 tagmanager.google.com,使用 Google 帳號登入後,點選「建立帳戶」。帳戶名稱通常填公司名稱,容器名稱填網站網址。目標平台選擇「網站」(如果是 APP 則選擇對應的平台)。

步驟二:安裝容器代碼

建立完成後,GTM 會提供兩段程式碼。第一段放在網站每個頁面的 <head> 標籤中,盡量靠近頂部;第二段放在 <body> 標籤開頭之後。如果你使用 WordPress,可以透過外掛(如 Insert Headers and Footers)來安裝,不需要直接編輯主題檔案。

步驟三:驗證安裝是否成功

安裝完成後,可以使用 GTM 內建的「預覽」功能來驗證。點選 GTM 介面右上角的「預覽」按鈕,輸入網站網址,系統會開啟一個除錯視窗,顯示哪些代碼被觸發、哪些沒有。也可以安裝 Chrome 擴充功能「Tag Assistant Legacy」來輔助檢查。

四、用 GTM 安裝 Google Analytics 4(GA4)

GA4 是目前 Google 的標準網站分析工具,透過 GTM 安裝 GA4 是最推薦的方式,因為後續要追蹤自訂事件時會方便很多。

步驟一:取得 GA4 評估 ID

登入 Google Analytics → 管理 → 資料串流 → 選擇你的網站串流 → 複製「評估 ID」(格式為 G-XXXXXXXXXX)。

步驟二:在 GTM 中建立 GA4 設定代碼

在 GTM 中點選「代碼」→「新增」→ 代碼類型選擇「Google Analytics:GA4 設定」→ 填入評估 ID → 觸發條件選擇「All Pages(所有頁面)」→ 儲存。

步驟三:發佈並驗證

點選 GTM 右上角的「提交」按鈕發佈變更。發佈後,回到 GA4 的即時報表,確認是否有數據開始進來。通常需要等待幾分鐘到幾小時,數據才會完整顯示。

GTM 安裝 GA4 三步驟流程:取得評估 ID、建立設定代碼、發佈並驗證

五、用 GTM 安裝 Meta Pixel(Facebook 像素)

Meta Pixel 是 Facebook 廣告投放的核心追蹤工具。透過 GTM 安裝 Meta Pixel,比直接在網站原始碼中嵌入更容易管理和維護。

步驟一:取得 Pixel ID

登入 Meta Events Manager → 選擇你的 Pixel → 複製 Pixel ID(一串數字)。

步驟二:在 GTM 中建立自訂 HTML 代碼

在 GTM 中點選「代碼」→「新增」→ 代碼類型選擇「自訂 HTML」→ 貼入 Meta Pixel 的基礎代碼(Base Code)→ 觸發條件選擇「All Pages」→ 儲存。

步驟三:設定標準事件追蹤

除了基礎代碼,你還可以透過 GTM 設定 Meta Pixel 的標準事件,例如 ViewContent(瀏覽內容)、AddToCart(加入購物車)、Purchase(購買完成)等。每個事件需要建立獨立的代碼,並設定對應的觸發條件。

六、GTM 進階應用:事件追蹤與自訂觸發條件

1. 按鈕點擊追蹤

追蹤特定按鈕的點擊是 GTM 最常見的進階應用之一。操作步驟:啟用內建變數中的「Click」相關變數 → 建立觸發條件(類型選「點擊 – 所有元素」,條件設定為 Click ID 或 Click Classes 等於目標按鈕的屬性值)→ 建立 GA4 事件代碼,事件名稱自訂(如 cta_button_click)。

2. 捲動深度追蹤

了解使用者在頁面上捲動到多深的位置,可以幫助判斷內容的吸引力。GTM 內建捲動深度觸發條件,可以設定在使用者捲動到 25%、50%、75%、90% 時觸發事件。

3. 表單提交追蹤

追蹤表單提交(如聯絡表單、報名表單)是衡量潛在客戶轉換的重要指標。GTM 提供「表單提交」觸發條件類型,可以在使用者成功提交表單時觸發追蹤事件。

4. 外部連結點擊追蹤

追蹤使用者點擊了哪些外部連結,可以了解使用者的行為路徑。建立觸發條件時,設定 Click URL 不包含你自己的網域名稱,就能捕捉所有外部連結的點擊。

5. 電子商務追蹤

如果你經營電商網站,GTM 可以搭配 GA4 的電子商務追蹤功能,記錄商品瀏覽、加入購物車、結帳流程和購買完成等完整的購物行為數據。這需要網站的資料層(Data Layer)配合推送電子商務相關的數據。

GTM 進階追蹤功能概覽:按鈕點擊、捲動深度、表單提交、外部連結、電子商務

七、GTM 的資料層(Data Layer)

資料層是 GTM 中一個非常重要但常被忽略的概念。資料層是一個 JavaScript 物件,用來在網站和 GTM 之間傳遞資訊。當網站上發生特定事件(如使用者完成購買),網站可以將訂單金額、商品名稱等資訊推送到資料層,GTM 再從資料層中讀取這些資訊,傳送給 GA4 或其他追蹤工具。

資料層的基本語法是 window.dataLayer.push(),例如:

window.dataLayer.push({
  ‘event’: ‘purchase’,
  ‘transaction_id’: ‘T12345’,
  ‘value’: 1500,
  ‘currency’: ‘TWD’
});

在 GTM 中,你可以建立「資料層變數」來讀取這些值,並在代碼中使用。資料層的設計需要前端工程師配合,但一旦建立好,行銷人員就能透過 GTM 自由運用這些數據。

八、GTM 除錯與常見問題排解

1. 預覽模式(Preview Mode)

GTM 的預覽模式是除錯的核心工具。啟動預覽模式後,會在瀏覽器底部顯示一個除錯面板,列出所有已觸發和未觸發的代碼、觸發條件的判斷結果、以及資料層中的數據。善用預覽模式可以在發佈前確認所有設定是否正確。

2. 常見問題:代碼沒有觸發

如果代碼沒有觸發,通常是觸發條件設定有誤。檢查觸發條件中的變數值是否正確(例如 Click ID 是否拼寫正確)、條件邏輯是否正確(「等於」vs「包含」)、以及是否有其他觸發條件衝突。

3. 常見問題:數據重複計算

如果發現 GA4 中的事件數據異常偏高,可能是同一個代碼被重複觸發。檢查是否有多個觸發條件同時指向同一個代碼,或者是否在 GTM 和網站原始碼中重複安裝了追蹤代碼。

4. 常見問題:跨網域追蹤

如果你的業務涉及多個網域(例如主網站和購物車在不同網域),需要在 GTM 中設定跨網域追蹤,確保使用者在不同網域間的行為能被正確串連。GA4 的跨網域追蹤設定在「管理 → 資料串流 → 設定代碼設定 → 設定網域」中。

九、常見問題 FAQ

Q1:GTM 是免費的嗎?

是的,Google Tag Manager 完全免費。Google 也提供付費的企業版(Tag Manager 360),但對大多數中小企業來說,免費版已經足夠使用。

Q2:安裝 GTM 會影響網站速度嗎?

GTM 本身的容器代碼非常輕量,對網站速度的影響微乎其微。但如果你在 GTM 中安裝了大量的追蹤代碼,這些代碼的總和可能會影響頁面載入速度。建議定期檢視並移除不再使用的代碼。

Q3:GTM 和直接在網站上安裝追蹤碼有什麼差別?

功能上沒有差別,追蹤效果是一樣的。差別在於管理效率:透過 GTM 管理,行銷人員可以自行操作,不需要每次都請工程師修改程式碼,也有版本控制和預覽除錯等功能。

Q4:不會寫程式也能用 GTM 嗎?

可以。GTM 的基礎功能(安裝 GA4、Meta Pixel、Google Ads 轉換追蹤等)完全可以透過視覺化介面完成,不需要寫任何程式碼。進階功能(如自訂 HTML 代碼、資料層操作)才需要基本的 JavaScript 知識。

Q5:GTM 可以用在 APP 上嗎?

可以。GTM 提供 iOS 和 Android 的 SDK,可以在行動應用程式中使用。不過 APP 版的 GTM 在功能和操作上與網頁版有些差異,建議參考 Google 官方文件。

十、讓 GTM 成為你的行銷數據基礎建設

GTM 是數位行銷的基礎建設,就像水電管線之於一棟建築。沒有 GTM,你的行銷數據就像散落各處的水管,難以統一管理和維護。有了 GTM,所有的追蹤代碼都在一個地方集中管理,新增、修改、刪除都變得簡單快速。

如果你的企業正在建置或優化數位行銷追蹤系統,戰國策集團提供從 GTM 建置、GA4 設定到完整的 SEO 優化一站式服務。我們協助超過三萬家企業客戶建立精準的數據追蹤體系,讓每一筆行銷預算都能被準確衡量。

選擇戰國策的五大優勢

  1. SEO關鍵字優化規劃 → 找出高潛力、高轉換率的詞庫,避免無效操作
  2. AI內容行銷優化 → 打造能被 Google 與 AI(ChatGPT、Perplexity)引用的結構化內容
  3. 技術 SEO → Schema、網站速度、行動體驗全面提升
  4. 外部連結建設 → 提升網站權重,建立長期穩定流量
  5. 跨國 SEO 佈局 → 不只台灣,包含美國SEO馬來西亞SEO新加坡SEO印尼SEO,多語系全方位部署

👉 立即聯繫 戰國策團隊

加入好友

歡迎撥打服務專線 0800-003-191 或加入戰國策官方 LINE:@119m 了解更多!

 

延伸閱讀:

X