- 登入
- 註冊
WordPress 追蹤代碼安裝教學：數位行銷代碼安裝完整設定指南（GA4、Meta Pixel、TikTok 一次搞定）
內容目錄
顯示
為什麼你需要一套統一的追蹤代碼管理工具？
經營電商或數位行銷，追蹤代碼是不可或缺的基礎設施。無論是 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（伺服器端追蹤）
- 自訂代碼 — 任何第三方追蹤碼都能加
更重要的是，它內建完整的 WooCommerce 電商追蹤，從瀏覽商品、加入購物車到完成結帳，所有事件自動觸發，不需要寫任何程式碼。
這篇教學將帶你從零開始，完成所有追蹤代碼的安裝與設定。
Step 1：新增追蹤代碼
這是最核心的步驟。點擊左側選單的 「數位行銷代碼安裝」 進入管理頁面，預設會在「追蹤代碼」分頁。
建立你的第一個追蹤代碼
- 點擊 「新增追蹤代碼」 按鈕，會彈出設定對話框
- 在對話框最上方，你會看到六個按鈕式的代碼類型選擇器：按鈕平台用途GTMGoogle Tag Manager容器管理、進階追蹤GA4Google Analytics 4網站分析、使用者行為Google AdsGoogle 廣告轉換追蹤、再行銷MetaFacebook / Instagram廣告轉換、受眾建立TikTokTikTok 廣告轉換追蹤、受眾建立自訂代碼任何第三方自由貼入追蹤碼
- 點擊你要設定的平台按鈕，下方會動態顯示對應的設定欄位
各平台設定說明
Google Tag Manager (GTM)
- Container ID：填入你的 GTM 容器 ID，格式為
GTM-XXXXXXX - 如果你已經在 GTM 裡管理所有追蹤碼，只需要安裝這一個就好
注意：如果你使用 GTM 來管理 GA4 和 Meta Pixel，就不需要在 數位行銷代碼安裝 裡另外新增 GA4 和 Meta 的追蹤代碼，避免重複追蹤。
Google Analytics 4 (GA4)
- 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)
- 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
- Pixel ID：填入你的 TikTok Pixel ID（在 TikTok Ads Manager > 資產 > 事件中可找到）
- 啟用 Server API（選填）：類似 Meta CAPI，透過伺服器端傳送事件
- Access Token（選填）：啟用 Server API 後需要填入
自訂代碼
- 名稱：為這段代碼取一個容易辨識的名稱（例如：「LINE Tag」、「Hotjar 追蹤碼」）
- 代碼內容：直接貼入完整的追蹤碼（含
<script>標籤）
自訂代碼功能非常實用，任何第三方服務提供的追蹤碼都可以透過這裡安裝，不需要去修改佈景主題的 header.php。
設定頁面排除或限定
每個追蹤代碼都可以設定 頁面排除 或 僅在特定頁面啟用：
- 在新增/編輯代碼的對話框下方，找到「頁面排除」或「僅限頁面」欄位
- 這是一個可搜尋的標籤輸入框，開始輸入頁面名稱就會出現搜尋結果
- 支援的頁面類型包含：
- 特殊頁面（首頁、部落格頁、購物車、結帳頁等）
- 所有文章和頁面
- WooCommerce 商品
- 分類和標籤頁面
- 點擊選項即可加入，已選項目會以標籤形式顯示，點擊 X 可移除
儲存
設定完成後，點擊對話框下方的 「儲存」 按鈕。你會在追蹤代碼列表中看到剛建立的項目，包含類型、ID 和啟用狀態。
每個追蹤代碼在列表中都有三個操作按鈕：
- 播放/暫停：快速啟用或暫停追蹤，不需要刪除
- 編輯：修改設定
- 刪除：移除追蹤代碼
Step 2：啟用 WooCommerce 電商追蹤
如果你的網站有安裝 WooCommerce，這一步非常重要。WooCommerce 轉換追蹤設定可以讓你精準知道每筆訂單的廣告來源，是廣告優化的核心數據。
一鍵開啟電商追蹤
- 在管理頁面上方，切換到 「電商設定」 分頁
- 你會看到一個主開關：「啟用 WooCommerce 追蹤」
- 打開這個開關，所有電商事件會自動啟用
開啟後，以下事件會自動在對應的頁面觸發：
| 事件名稱 | 觸發時機 | GA4 對應 | Meta 對應 |
|---|---|---|---|
| ViewContent | 瀏覽單一商品頁 | view_item | ViewContent |
| ViewCategory | 瀏覽商品分類頁 | view_item_list | ViewCategory |
| AddToCart | 加入購物車 | add_to_cart | AddToCart |
| RemoveFromCart | 從購物車移除 | remove_from_cart | – |
| ViewCart | 查看購物車頁 | view_cart | – |
| InitiateCheckout | 進入結帳頁 | begin_checkout | InitiateCheckout |
| Purchase | 完成購買 | purchase | Purchase |
子選項說明
主開關下方有幾個細項設定，可以根據你的需求調整：
- 訂單金額含稅：計算轉換金額時是否包含稅額。如果你的商品價格是含稅價，建議開啟
- 訂單金額含運費：計算轉換金額時是否包含運費。大多數情況建議關閉，因為運費不是商品收入
- 追蹤優惠券使用：記錄訂單使用的優惠券代碼，方便分析促銷活動成效
- 新/回購客戶辨識：自動判斷該筆訂單是新客戶還是回購客戶，並將此資訊傳送到追蹤平台
- 商品 ID 來源：可選擇使用 WooCommerce 的商品 ID 或 SKU 作為追蹤 ID。如果你有串接 Google Merchant Center 或 Meta Commerce Manager 的商品目錄，建議選擇與目錄一致的 ID 格式
常見錯誤：很多人在設定 Google Ads 轉換追蹤時，忘記在電商設定中開啟追蹤，結果 Google Ads 後台看不到任何轉換數據。記得追蹤代碼和電商設定是兩個獨立的步驟，兩邊都要設定。
Step 3：建立自訂事件
除了自動的電商事件，你可能還想追蹤特定的使用者行為，例如「點擊了 CTA 按鈕」、「捲動到頁面底部」、「在頁面停留超過 30 秒」等。數位行銷代碼安裝 的自訂事件建構器讓你不需要寫程式碼就能完成這些設定。
新增自訂事件
- 在「追蹤代碼」分頁中，找到「自訂事件」區塊
- 點擊 「新增事件」 按鈕
選擇觸發方式
在事件對話框中，第一個要設定的是觸發方式：
| 觸發方式 | 說明 | 適用場景 |
|---|---|---|
| 頁面瀏覽 | 使用者載入指定頁面時觸發 | 到達感謝頁、特定著陸頁 |
| CSS 點擊 | 使用者點擊符合 CSS 選擇器的元素 | CTA 按鈕、電話連結、下載連結 |
| CSS Hover | 滑鼠移入符合 CSS 選擇器的元素 | 產品圖片互動、選單展開 |
| URL 匹配 | 當前網址符合指定 pattern | 特定分類頁面、搜尋結果頁 |
| 捲動深度 | 頁面捲動到指定百分比 | 文章閱讀完成、到達表單位置 |
| 時間延遲 | 頁面載入後經過指定秒數 | 高度參與使用者辨識 |
選擇追蹤平台與事件名稱
- 選擇 代碼類型：Google / Meta / TikTok
- 選擇平台後，事件名稱的下拉選單會自動過濾，只顯示該平台支援的標準事件
- 選擇 事件名稱：
- 可以從預設清單中選擇標準事件（如 Google 的
generate_lead、Meta 的Lead、TikTok 的SubmitForm） - 也可以選擇「自訂」，輸入你自己的事件名稱
- 可以從預設清單中選擇標準事件（如 Google 的
實用技巧：盡量使用各平台的標準事件名稱，這樣在廣告後台中可以直接看到對應的事件報表。只有在沒有合適的標準事件時，才使用自訂名稱。
新增事件參數
- 點擊 「新增參數」 可以加入 key-value 格式的事件參數，例如：
button_text=立即購買page_section=herovalue=100
新增觸發條件（選填）
- 如果你想進一步限制事件觸發的條件，可以點擊 「新增條件」。支援的條件類型包含：
- URL 包含/不包含特定字串
- URL 參數等於特定值
- 使用者角色
- 裝置類型（桌機/手機/平板）
- 還有更多
儲存事件
- 確認設定無誤後，點擊 「儲存」
事件會出現在自訂事件列表中，顯示事件名稱、觸發方式、所屬平台。每個事件同樣支援啟用/暫停、編輯和刪除操作。
Step 4：調整全域設定
切換到 「設定」 分頁，這裡是全站層級的追蹤控制。
Consent 模式（隱私合規）
根據你的網站訪客所在地區和合規需求，選擇適合的 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：驗證追蹤是否正常運作
設定完成後，最重要的一步是確認所有追蹤代碼都正確觸發。以下是各平台推薦的驗證方式。
使用瀏覽器開發者工具
- 在 Chrome 中按下
F12或Cmd + Option + I開啟 DevTools - 切換到 Console 分頁
- 如果你有開啟 Debug 模式，會看到 數位行銷代碼安裝 輸出的事件日誌
- 在 Network 分頁中，可以搜尋
collect(GA4)、facebook.com/tr(Meta)、analytics.tiktok.com(TikTok) 確認請求有發出
Meta Pixel 驗證
- Facebook Pixel Helper：安裝這個 Chrome 擴充功能後，造訪你的網站，圖示會顯示偵測到的事件數量。點擊可查看每個事件的詳細參數
- Test Event Code：在新增 Meta Pixel 時填入 Test Event Code，然後到 Meta Events Manager > 測試事件中查看即時事件。確認無誤後記得清除 Test Event Code
Google 追蹤驗證
- 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 模式：
- 開啟瀏覽器 Console
- 瀏覽不同頁面、執行加入購物車、模擬結帳
- Console 會顯示每一個觸發的事件，包含事件名稱、參數內容、傳送到哪些平台
- 如果有錯誤，Console 也會顯示錯誤訊息
驗證清單：建議至少測試以下流程：
- 首頁載入 — 確認基本追蹤碼有載入
- 商品頁瀏覽 — 確認 ViewContent 事件觸發
- 加入購物車 — 確認 AddToCart 事件觸發
- 結帳頁 — 確認 InitiateCheckout 事件觸發
- 完成結帳 — 確認 Purchase 事件觸發（可用測試訂單）
所有事件會同時發送到你已啟用的所有追蹤平台（GA4、Meta、TikTok 等），使用各平台對應的標準事件名稱和參數格式，不需要額外設定。
此外，如果你同時啟用了伺服器端追蹤（如 Meta CAPI、GA4 Measurement Protocol），這些電商事件也會透過伺服器端同步發送，確保資料的完整性。
重點整理
Server API（伺服器端追蹤）和客戶端追蹤有什麼差別？需要兩個都開嗎？
兩者的差異在於資料傳送的路徑：
客戶端追蹤：透過使用者的瀏覽器發送資料到追蹤平台。優點是即時且簡單，缺點是可能被 Ad Blocker 攔截，且受到瀏覽器隱私政策（如 Safari ITP）的限制
Server API（伺服器端追蹤）：透過你的 WordPress 伺服器直接將資料發送到追蹤平台的伺服器。優點是不會被 Ad Blocker 攔截、資料更完整，缺點是設定較複雜
建議兩個都開。 各追蹤平台（Meta、Google、TikTok）都會自動對兩端的事件進行去重（deduplication），所以不會重複計算。同時啟用可以最大化資料的完整性和準確度。
以 Meta 為例：研究顯示同時啟用 Pixel + CAPI 的廣告主，轉換歸因數據平均提升 15-20%。這不是因為實際轉換變多了，而是原本被 Ad Blocker 遮蔽的轉換被成功補回。
自訂事件設定後，要怎麼確認有正確觸發？
驗證自訂事件是否正確觸發，最有效的方式是結合 Debug 模式和瀏覽器開發者工具：
1. 開啟 Debug 模式：到設定分頁打開 Debug 模式
2. 開啟瀏覽器 Console：按 F12 > Console 分頁
3. 模擬觸發條件：
- 如果是「CSS 點擊」觸發，就去點擊目標元素
- 如果是「捲動深度」觸發，就捲動頁面到設定的百分比
- 如果是「時間延遲」觸發，就在頁面上等待設定的秒數
- 檢查 Console 輸出：正確觸發時，Console 會顯示事件名稱和完整參數
4. 到各平台後台驗證：
- Meta：Events Manager > 測試事件（需要填入 Test Event Code）
- GA4：DebugView 即時查看
- TikTok：Ads Manager 事件管理頁面
5. 如果事件沒有觸發，最常見的原因有：
- CSS 選擇器寫錯（點擊/Hover 觸發）— 確認選擇器是否正確指向目標元素
- 觸發條件設太嚴格 — 嘗試先移除所有條件，確認基本觸發正常後再逐步加入條件
- 追蹤代碼本身未啟用 — 確認對應平台的追蹤代碼是啟用狀態
WooCommerce 電商追蹤支援哪些事件？
數位行銷代碼安裝 的 WooCommerce 電商追蹤支援以下 7 個標準電商事件：
1. ViewContent / view_item：使用者瀏覽單一商品頁面時觸發。會傳送商品名稱、ID、價格、分類等資訊
2. ViewCategory / view_item_list：使用者瀏覽商品分類頁面時觸發。會傳送分類名稱和該頁所有商品清單
3. AddToCart / add_to_cart：使用者將商品加入購物車時觸發（支援 AJAX 加入購物車）。會傳送商品資訊和數量
4. RemoveFromCart / remove_from_cart：使用者從購物車移除商品時觸發
5. ViewCart / view_cart：使用者查看購物車頁面時觸發
6. InitiateCheckout / begin_checkout：使用者進入結帳頁面時觸發。會傳送購物車內所有商品和總金額
7. Purchase / purchase：完成結帳付款後觸發。會傳送訂單編號、總金額、商品明細、使用的優惠券等完整資訊
所有事件會同時發送到你已啟用的所有追蹤平台（GA4、Meta、TikTok 等），使用各平台對應的標準事件名稱和參數格式，不需要額外設定。此外，如果你同時啟用了伺服器端追蹤（如 Meta CAPI、GA4 Measurement Protocol），這些電商事件也會透過伺服器端同步發送，確保資料的完整性。
同一個平台可以新增多組追蹤代碼嗎？例如兩組 Meta Pixel？
可以。 你可以在追蹤代碼列表中新增多組相同平台的代碼，例如兩組不同 Pixel ID 的 Meta Pixel，分別用於不同的廣告帳戶或事業部門。每組代碼都是獨立運作的，可以分別設定啟用/停用、頁面排除和僅限頁面規則。
實際操作上，只要重複執行「新增追蹤代碼」的流程，選擇同一個平台類型，填入不同的 ID 即可。在追蹤代碼列表中會顯示為兩筆獨立的項目，方便你個別管理。
注意：同一頁面載入多組相同平台的代碼時，該頁面的事件會同時發送到所有啟用中的該平台代碼。如果你只想讓特定頁面觸發特定的 Pixel，請善用「排除頁面」和「僅在特定頁面啟用」功能來區隔。
設定儲存後前台沒有看到追蹤代碼載入，可能是什麼原因？
這是最常見的問題，請依序檢查以下幾點：
1. 追蹤代碼是否為「啟用」狀態？ 在追蹤代碼列表中，確認該筆代碼的狀態顯示為綠色的「啟用」，而不是灰色的「停用」
2. 是否有設定頁面限定規則？ 如果你在「僅在特定頁面啟用」中選了特定頁面，追蹤代碼就只會在那些頁面載入。留空才是全站載入
3. 是否被排除了？ 檢查「設定」分頁中的「排除網站管理者」是否開啟。如果你用管理員帳號登入瀏覽，追蹤代碼會被排除不載入。請用無痕視窗或登出後測試
4. 追蹤 ID 格式是否正確？ 確認填入的 ID 格式無誤，例如 GTM 必須是 GTM- 開頭、GA4 必須是 G- 開頭
5. 如果以上都確認無誤仍然無法載入，請開啟 Debug 模式，到前台按 F12 查看 Console 是否有錯誤訊息，通常可以快速定位問題。
6. 也可以直接聯繫秒站客服協助您確認
