• 註冊

忘記密碼了嗎？請輸入您的使用者名稱或電子郵件地址。您將收到一封包含建立新密碼連結的電子郵件。

WordPress 追蹤代碼安裝教學 2026｜GA4、Meta Pixel、TikTok 一次搞定

還沒申請好 GA4 帳號、拿到評估 ID 嗎？請先看「GA4 申請教學 2026｜註冊 Google Analytics 取得評估 ID」，6 步驟拿到 G-XXXXXXXXXX 後再回到這篇把代碼裝上網站。

延伸：想了解這個功能的設計背景，請看〈WordPress 追蹤代碼外掛推薦：數位行銷代碼安裝一站整合 GTM、GA4、Meta Pixel 與電商追蹤〉。

為什麼你需要一套統一的追蹤代碼管理工具？#

來源：Google Analytics 說明中心、Meta 像素安裝指南、TikTok Pixel 設定文件、Google Tag Manager 說明中心（查證 2026-06-03）

經營電商或數位行銷，追蹤代碼是不可或缺的基礎設施。無論是 GA4 安裝 WordPress、Meta Pixel 安裝教學，還是 WooCommerce 轉換追蹤設定，每個平台都有各自的安裝方式和設定眉角。

問題是：當你同時使用 Google Analytics 4、Meta Pixel、Google Ads、TikTok Pixel 時，網站上往往要安裝 3-5 個不同的追蹤外掛，不僅拖慢網站速度，設定也分散在不同地方，維護成本極高。

數位行銷代碼安裝 正是為了解決這個問題而生。它是一個全功能的 WordPress 追蹤代碼整合外掛，讓你在同一個後台介面就能管理所有追蹤平台，包含：

  • Google Tag Manager (GTM)
  • Google Analytics 4 (GA4) — 支援 Measurement Protocol（伺服器端追蹤）
  • Google Ads — 轉換追蹤與動態再行銷
  • Meta Pixel (Facebook) — 支援 Conversion API (CAPI)
  • TikTok Pixel — 支援 Events API（伺服器端追蹤）
  • 自訂代碼 — 任何第三方追蹤碼都能加

各平台伺服器端追蹤官方規格：GA4 Measurement Protocol、Meta Conversions API（CAPI）、TikTok Events API（查證 2026-06-03）

更重要的是，它內建完整的 WooCommerce 電商追蹤，從瀏覽商品，加入購物車到完成結帳，所有事件自動觸發，不需要寫任何程式碼。

這篇教學將帶你從零開始，完成所有追蹤代碼的安裝與設定。

來源：GA4 Measurement Protocol 開發者文件、Meta Conversions API 開發者文件、TikTok Events API 開發者文件（查證 2026-06-03）

行銷代碼安裝與追蹤4

Step 1：新增追蹤代碼#

本段提到的 GTM、GA4、Google Ads、Meta、TikTok 為各平台對應追蹤工具。各平台官方介紹：Google Tag Manager、Google Analytics 4、Google Ads、Meta Pixel、TikTok Pixel（查證 2026-06-03）

這是最核心的步驟。點擊左側選單的 「數位行銷代碼安裝」 進入管理頁面，預設會在「追蹤代碼」分頁。

建立你的第一個追蹤代碼#

  1. 點擊 「新增追蹤代碼」 按鈕，會彈出設定對話框
  2. 在對話框最上方，你會看到六個按鈕式的代碼類型選擇器：按鈕平台用途GTMGoogle Tag Manager容器管理、進階追蹤GA4Google Analytics 4網站分析，使用者行為Google AdsGoogle 廣告轉換追蹤，再行銷MetaFacebook / Instagram廣告轉換、受眾建立TikTokTikTok 廣告轉換追蹤、受眾建立自訂代碼任何第三方自由貼入追蹤碼
  3. 點擊你要設定的平台按鈕，下方會動態顯示對應的設定欄位

各平台設定說明#

Google Tag Manager (GTM)

來源：Google Tag Manager：設定與安裝容器（GTM-XXXXXXX 格式）（查證 2026-06-03）

  • Container ID：填入你的 GTM 容器 ID，格式為 GTM-XXXXXXX
  • 如果你已經在 GTM 裡管理所有追蹤碼，只需要安裝這一個就好

注意：如果你使用 GTM 來管理 GA4 和 Meta Pixel，就不需要在 數位行銷代碼安裝 裡另外新增 GA4 和 Meta 的追蹤代碼，避免重複追蹤。

Google Analytics 4 (GA4)

來源：GA4：建立資料串流與取得評估 ID（G-XXXXXXXXXX）、GA4 Measurement Protocol（伺服器端追蹤）開發者文件（查證 2026-06-03）

  • Measurement ID：填入你的 GA4 評估 ID，格式為 G-XXXXXXXXXX（在 GA4 後台 > 管理 > 資料串流中可找到）
  • Server API（選填）：如果你想同時啟用伺服器端追蹤以提升資料準確度，打開此開關
  • API Secret（選填）：啟用 Server API 後需要填入，可在 GA4 後台 > 管理 > 資料串流 > Measurement Protocol API Secrets 中建立

實用技巧：GA4 的伺服器端追蹤（Measurement Protocol）可以在瀏覽器端追蹤被 Ad Blocker 擋住時，透過你的伺服器直接將資料送到 Google，大幅提升資料完整性。

Google Ads

  • Conversion ID：填入你的 Google Ads 轉換 ID，格式為 AW-XXXXXXXXX
  • Conversion Label：填入轉換標籤（在 Google Ads 後台建立轉換動作後可取得）

這兩個值缺一不可，如果只填 Conversion ID 而漏掉 Label，轉換追蹤將無法正常運作。

Meta Pixel (Facebook / Instagram)

來源：Meta 像素安裝與設定（Pixel ID 取得位置）、Meta Conversions API（CAPI）總覽（查證 2026-06-03）

  • Pixel ID：填入你的 Meta Pixel ID（在 Meta Events Manager 中可找到）
  • 啟用 Conversion API (CAPI)（選填）：強烈建議開啟，可大幅提升廣告歸因準確度
  • CAPI Access Token（選填）：啟用 CAPI 後需要填入，在 Meta Events Manager > 設定 > 產生存取權杖中取得
  • Test Event Code（選填）：用於測試事件是否正確發送，格式如 TEST12345，確認沒問題後記得清除
  • Advanced Matching：預設開啟，會自動將已登入使用者的 Email、姓名等資料以 SHA256 雜湊後傳送給 Meta，提升廣告比對率

重要：Meta 官方已明確表示，未來將越來越依賴 Conversion API 的資料。如果你只使用瀏覽器端的 Pixel，廣告報表中的轉換數據可能會越來越不準確。建議一律同時啟用 CAPI。

TikTok Pixel

來源：TikTok for Business：建立 Pixel 與 Web Events 連線、TikTok Events API（伺服器端事件）開發者文件（查證 2026-06-03）

  • Pixel ID：填入你的 TikTok Pixel ID（在 TikTok Ads Manager > 資產 > 事件中可找到）
  • 啟用 Server API（選填）：類似 Meta CAPI，透過伺服器端傳送事件
  • Access Token（選填）：啟用 Server API 後需要填入

自訂代碼

  • 名稱：為這段代碼取一個容易辨識的名稱（例如：「LINE Tag」、「Hotjar 追蹤碼」）
  • 代碼內容：直接貼入完整的追蹤碼（含 <script> 標籤）

自訂代碼功能非常實用，任何第三方服務提供的追蹤碼都可以透過這裡安裝，不需要去修改佈景主題的 header.php。

設定頁面排除或限定#

每個追蹤代碼都可以設定 頁面排除 或 僅在特定頁面啟用：

  1. 在新增/編輯代碼的對話框下方，找到「頁面排除」或「僅限頁面」欄位
  2. 這是一個可搜尋的標籤輸入框，開始輸入頁面名稱就會出現搜尋結果
  3. 支援的頁面類型包含：
    • 特殊頁面（首頁、部落格頁、購物車，結帳頁等）
    • 所有文章和頁面
    • WooCommerce 商品
    • 分類和標籤頁面
  4. 點擊選項即可加入，已選項目會以標籤形式顯示，點擊 X 可移除

儲存#

設定完成後，點擊對話框下方的 「儲存」 按鈕。你會在追蹤代碼列表中看到剛建立的項目，包含類型、ID 和啟用狀態。

每個追蹤代碼在列表中都有三個操作按鈕：

  • 播放/暫停：快速啟用或暫停追蹤，不需要刪除
  • 編輯：修改設定
  • 刪除：移除追蹤代碼
行銷代碼安裝與追蹤3

Step 2：啟用 WooCommerce 電商追蹤#

如果你的網站有安裝 WooCommerce，這一步非常重要。WooCommerce 轉換追蹤設定可以讓你精準知道每筆訂單的廣告來源，是廣告優化的核心數據。

一鍵開啟電商追蹤#

  1. 在管理頁面上方，切換到 「電商設定」 分頁
  2. 你會看到一個主開關：「啟用 WooCommerce 追蹤」
  3. 打開這個開關，所有電商事件會自動啟用

開啟後，以下事件會自動在對應的頁面觸發：

來源：GA4 Ecommerce 事件規格（view_item / add_to_cart / begin_checkout / purchase）、Meta Pixel 標準事件對應表（ViewContent / AddToCart / InitiateCheckout / Purchase）（查證 2026-06-03）

事件名稱觸發時機GA4 對應Meta 對應
ViewContent瀏覽單一商品頁view_itemViewContent
ViewCategory瀏覽商品分類頁view_item_listViewCategory
AddToCart加入購物車add_to_cartAddToCart
RemoveFromCart從購物車移除remove_from_cart–
ViewCart查看購物車頁view_cart–
InitiateCheckout進入結帳頁begin_checkoutInitiateCheckout
Purchase完成購買purchasePurchase

子選項說明#

主開關下方有幾個細項設定，可以根據你的需求調整：

  • 訂單金額含稅：計算轉換金額時是否包含稅額。如果你的商品價格是含稅價，建議開啟
  • 訂單金額含運費：計算轉換金額時是否包含運費。大多數情況建議關閉，因為運費不是商品收入
  • 追蹤優惠券使用：記錄訂單使用的優惠券代碼，方便分析促銷活動成效
  • 新/回購客戶辨識：自動判斷該筆訂單是新客戶還是回購客戶，並將此資訊傳送到追蹤平台
  • 商品 ID 來源：可選擇使用 WooCommerce 的商品 ID 或 SKU 作為追蹤 ID。如果你有串接 Google Merchant Center 或 Meta Commerce Manager 的商品目錄，建議選擇與目錄一致的 ID 格式

常見錯誤：很多人在設定 Google Ads 轉換追蹤時，忘記在電商設定中開啟追蹤，結果 Google Ads 後台看不到任何轉換數據。記得追蹤代碼和電商設定是兩個獨立的步驟，兩邊都要設定。

Ck Joker 2026 03 26 @ 01.31.49@2x

Step 3：建立自訂事件#

除了自動的電商事件，你可能還想追蹤特定的使用者行為，例如「點擊了 CTA 按鈕」「捲動到頁面底部」「在頁面停留超過 30 秒」等。數位行銷代碼安裝 的自訂事件建構器讓你不需要寫程式碼就能完成這些設定。

新增自訂事件#

  1. 在「追蹤代碼」分頁中，找到「自訂事件」區塊
  2. 點擊 「新增事件」 按鈕

選擇觸發方式#

在事件對話框中，第一個要設定的是觸發方式：

觸發方式說明適用場景
頁面瀏覽使用者載入指定頁面時觸發到達感謝頁、特定著陸頁
CSS 點擊使用者點擊符合 CSS 選擇器的元素CTA 按鈕、電話連結，下載連結
CSS Hover滑鼠移入符合 CSS 選擇器的元素產品圖片互動，選單展開
URL 匹配當前網址符合指定 pattern特定分類頁面，搜尋結果頁
捲動深度頁面捲動到指定百分比文章閱讀完成、到達表單位置
時間延遲頁面載入後經過指定秒數高度參與使用者辨識

選擇追蹤平台與事件名稱#

  1. 選擇 代碼類型：Google / Meta / TikTok
    • 選擇平台後，事件名稱的下拉選單會自動過濾，只顯示該平台支援的標準事件
  2. 選擇 事件名稱：
    • 可以從預設清單中選擇標準事件（如 Google 的 generate_lead、Meta 的 Lead、TikTok 的 SubmitForm）
    • 也可以選擇「自訂」，輸入你自己的事件名稱

實用技巧：盡量使用各平台的標準事件名稱，這樣在廣告後台中可以直接看到對應的事件報表。只有在沒有合適的標準事件時，才使用自訂名稱。

新增事件參數#

  1. 點擊 「新增參數」 可以加入 key-value 格式的事件參數，例如：
    • button_text = 立即購買
    • page_section = hero
    • value = 100

新增觸發條件（選填）#

  1. 如果你想進一步限制事件觸發的條件，可以點擊 「新增條件」。支援的條件類型包含：
    • URL 包含/不包含特定字串
    • URL 參數等於特定值
    • 使用者角色
    • 裝置類型（桌機/手機/平板）
    • 還有更多

儲存事件#

  1. 確認設定無誤後，點擊 「儲存」

事件會出現在自訂事件列表中，顯示事件名稱、觸發方式、所屬平台。每個事件同樣支援啟用/暫停、編輯和刪除操作。

行銷代碼安裝與追蹤2

Step 4：調整全域設定#

切換到 「設定」 分頁，這裡是全站層級的追蹤控制。

根據你的網站訪客所在地區和合規需求，選擇適合的 Consent 模式：

  • 無（預設）：不做任何 Consent 管理，適合台灣在地網站
  • Google Consent Mode v2：符合歐盟 GDPR 要求，追蹤代碼會在使用者同意前以受限模式運作
  • Cookiebot 整合：如果你已經安裝了 Cookiebot 外掛，可以與其整合，自動根據使用者的 Cookie 選擇來控制追蹤

提醒：如果你的網站主要面向台灣市場，通常選擇「無」即可。但如果有歐洲或美國的訪客，建議至少啟用 Google Consent Mode v2。

排除網站管理者#

開啟此選項後，已登入的管理者（Administrator 和 Shop Manager 角色）瀏覽網站時不會觸發任何追蹤事件。這是非常重要的設定，可以避免你自己的瀏覽行為汙染分析數據。

強烈建議開啟此設定。

排除 IP#

如果你有固定 IP（例如辦公室網路），可以在這裡填入要排除的 IP 位址，每行一個。這些 IP 的訪客不會被追蹤。

爬蟲偵測排除#

預設開啟。系統內建 40 多種已知爬蟲的辨識規則，會自動排除搜尋引擎爬蟲（如 Googlebot）和各種自動化工具的流量，確保你的分析數據只包含真實使用者。

Debug 模式#

開啟後，外掛會在瀏覽器的 Console 中輸出詳細的事件日誌，包含每個事件的名稱、參數和傳送狀態。這在設定和除錯階段非常有用。

注意：Debug 模式僅供開發和測試使用，確認追蹤正常後請記得關閉，以避免對前端效能產生些微影響。

Step 5：驗證追蹤是否正常運作#

來源：GA4 DebugView 即時除錯、Meta Events Manager 測試事件（Test Event Code）、TikTok Pixel Helper 瀏覽器擴充功能（查證 2026-06-03）

設定完成後，最重要的一步是確認所有追蹤代碼都正確觸發。以下是各平台推薦的驗證方式。

使用瀏覽器開發者工具#

  1. 在 Chrome 中按下 F12 或 Cmd + Option + I 開啟 DevTools
  2. 切換到 Console 分頁
  3. 如果你有開啟 Debug 模式，會看到 數位行銷代碼安裝 輸出的事件日誌
  4. 在 Network 分頁中，可以搜尋 collect (GA4)、facebook.com/tr (Meta)、analytics.tiktok.com (TikTok) 確認請求有發出

各平台追蹤請求端點：collect 對應 GA4 Measurement Protocol、facebook.com/tr 對應 Meta Pixel、analytics.tiktok.com 對應 TikTok Pixel（查證 2026-06-03）

Meta Pixel 驗證#

  • Facebook Pixel Helper：安裝這個 Chrome 擴充功能後，造訪你的網站，圖示會顯示偵測到的事件數量。點擊可查看每個事件的詳細參數
  • Test Event Code：在新增 Meta Pixel 時填入 Test Event Code，然後到 Meta Events Manager > 測試事件中查看即時事件。確認無誤後記得清除 Test Event Code

Google 追蹤驗證#

來源：Google Tag Assistant Companion（Chrome 擴充功能）、GA4 DebugView 官方文件（查證 2026-06-03）

  • Google Tag Assistant：安裝 Chrome 擴充功能，可以即時查看 GA4 和 GTM 的觸發狀態
  • GA4 DebugView：在 GA4 後台 > 管理 > DebugView 中，可以看到即時的事件資料流。需要先在你的瀏覽器啟用 GA Debug 模式
  • Google Ads：轉換動作建立後通常需要 24-48 小時才會開始顯示數據

TikTok Pixel 驗證#

  • TikTok Pixel Helper：安裝 Chrome 擴充功能，可即時查看 TikTok Pixel 事件
  • 也可以在 TikTok Ads Manager 的事件管理頁面查看事件是否有接收到

外掛 Debug 模式#

如果你在 Step 4 開啟了 Debug 模式：

  1. 開啟瀏覽器 Console
  2. 瀏覽不同頁面，執行加入購物車、模擬結帳
  3. Console 會顯示每一個觸發的事件，包含事件名稱、參數內容，傳送到哪些平台
  4. 如果有錯誤，Console 也會顯示錯誤訊息

驗證清單：建議至少測試以下流程：

  1. 首頁載入 — 確認基本追蹤碼有載入
  2. 商品頁瀏覽 — 確認 ViewContent 事件觸發
  3. 加入購物車 — 確認 AddToCart 事件觸發
  4. 結帳頁 — 確認 InitiateCheckout 事件觸發
  5. 完成結帳 — 確認 Purchase 事件觸發（可用測試訂單）

所有事件會同時發送到你已啟用的所有追蹤平台（GA4、Meta、TikTok 等），使用各平台對應的標準事件名稱和參數格式，不需要額外設定。

此外，如果你同時啟用了伺服器端追蹤（如 Meta CAPI、GA4 Measurement Protocol），這些電商事件也會透過伺服器端同步發送，確保資料的完整性。

伺服器端追蹤規格：Meta Conversions API（CAPI）、GA4 Measurement Protocol（查證 2026-06-03）

延伸閱讀：功能設計背景與相關內容#

  • WordPress 追蹤代碼外掛推薦：數位行銷代碼安裝一站整合 GTM、GA4、Meta Pixel 與電商追蹤
  • 2026 創站點再進化：串聯 AI SEO，極速效能與精準再行銷的四大功能更新