Meta Pixel (Facebook Pixel) 安裝與事件追蹤

Meta Pixel (前身為 Facebook Pixel) 是在 Facebook 與 Instagram 投放廣告時不可或缺的分析工具。它能讓你追蹤使用者的站內行為，建立自訂廣告受眾 (Custom Audience)，並針對轉換目標 (Conversion) 進行廣告最佳化。

不論你的網站是電子商務 (E-commerce)、B2B 名單收集 (Lead Generation)、還是內容型網站，正確安裝 Meta Pixel 都是提升廣告成效的第一步。

基礎安裝 (Base Code)

首先，你需要將 Meta Pixel 的基礎程式碼安裝到網站的每一頁（通常放在 <head> 標籤內）。

取得 Pixel ID

前往 Meta Events Manager (事件管理工具)，建立一個新的資料來源，你就會獲得一組 Pixel ID。

安裝程式碼

將以下程式碼貼到網站所有頁面的 <head> 中，並將 你的_PIXEL_ID 替換成你實際的 ID。

<!-- Meta Pixel Code -->
<script>
  !(function (f, b, e, v, n, t, s) {
    if (f.fbq) return;
    n = f.fbq = function () {
      n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments);
    };
    if (!f._fbq) f._fbq = n;
    n.push = n;
    n.loaded = !0;
    n.version = '2.0';
    n.queue = [];
    t = b.createElement(e);
    t.async = !0;
    t.src = v;
    s = b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t, s);
  })(window, document, 'script', 'https://connect.facebook.net/zh_TW/fbevents.js');
  fbq('init', '你的_PIXEL_ID');
  fbq('track', 'PageView');
</script>
<noscript
  ><img
    height="1"
    width="1"
    style="display:none"
    src="https://www.facebook.com/tr?id=你的_PIXEL_ID&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->

這段程式碼會初始化 fbq 函式，並發送第一個標準事件：PageView (頁面瀏覽)。

事件追蹤 (Event Tracking)

基礎代碼只能告訴你「有人來過網站」，若要追蹤更具體的行為（如：購買、註冊、填表），則需要設定事件 (Events)。Meta 將事件分為兩大類：

標準事件 (Standard Events)：Meta 預定義好的事件名稱，如 Purchase, Lead。系統能自動辨識這些事件並用於廣告優化與歸因。
自訂事件 (Custom Events)：你自己定義的事件名稱，用於追蹤特殊需求。

常見標準事件 (General / Lead Gen)

適用於各種類型的網站，特別是 B2B、服務型或內容型網站。

潛在客戶 (Lead)

當使用者完成表單提交、索取報價單、或表現出高度興趣時觸發。

fbq('track', 'Lead', {
  content_name: '2024 春季健檢專案', // 表單或專案名稱
  content_category: 'Health Checkup', // 分類
  value: 0, // 若名單有預估價值可填入
  currency: 'TWD',
});

完成註冊 (CompleteRegistration)

當使用者註冊會員、訂閱電子報或參加活動時觸發。

fbq('track', 'CompleteRegistration', {
  content_name: 'Newsletter Subscription',
  status: 'active', // 自訂參數，例如帳號狀態
  value: 0,
  currency: 'TWD',
});

聯絡 (Contact)

當使用者點擊電話號碼、Email連結、或透過線上客服聯繫商家時。

fbq('track', 'Contact', {
  content_name: 'Customer Support Line',
});

搜尋 (Search)

當使用者在站內進行搜尋時觸發。

fbq('track', 'Search', {
  search_string: '慢跑鞋', // 搜尋關鍵字
  content_category: 'Product Search',
});

電商標準事件 (E-commerce)

為了讓 Meta 知道使用者看了哪個商品，進而在廣告中再次推播該商品給使用者 (DPA 動態產品廣告)，所有電商相關事件都強烈建議包含 content_ids 與 content_type 參數。

content_ids 的值必須與你上傳到 Meta Catalog (型錄) 的商品 id 完全一致。

檢視內容 (ViewContent)

當使用者到達在「商品詳情頁」時觸發。這是 DPA 廣告最基礎的訊號。

fbq('track', 'ViewContent', {
  content_ids: ['SKU_12345'],
  content_type: 'product',
  content_name: 'Stan Smith Shoes',
  content_category: 'Apparel > Mens > Shoes',
  value: 990,
  currency: 'TWD',
});

加入購物車 (AddToCart)

當使用者點擊「加入購物車」按鈕時觸發。

fbq('track', 'AddToCart', {
  content_ids: ['SKU_12345'],
  content_type: 'product',
  content_name: 'Stan Smith Shoes',
  value: 990,
  currency: 'TWD',
});

開始結帳 (InitiateCheckout)

當使用者點擊「去買單」或進入結帳流程的第一頁時觸發。

fbq('track', 'InitiateCheckout', {
  content_ids: ['SKU_12345', 'SKU_67890'], // 購物車內所有商品的 ID
  content_type: 'product',
  value: 1780, // 購物車總金額
  currency: 'TWD',
  num_items: 2, // 商品總數
});

新增付款資訊 (AddPaymentInfo)

當使用者在結帳流程中填寫完付款資訊或選擇付款方式時觸發。

fbq('track', 'AddPaymentInfo', {
  content_ids: ['SKU_12345', 'SKU_67890'],
  content_type: 'product',
  value: 1780,
  currency: 'TWD',
  payment_type: 'Credit Card', // 例如 Credit Card, PayPal, Cash
});

完成購買 (Purchase) - 最重要！

當使用者完成訂單，到達「感謝購買頁面」時觸發。這通常是廣告投放的最終優化目標 (Optimization Goal)。

fbq('track', 'Purchase', {
  content_ids: ['SKU_12345', 'SKU_67890'], // 購買的所有商品 ID
  content_type: 'product',
  value: 1780, // 訂單總金額 (通常包含運費與稅)
  currency: 'TWD',
  num_items: 2,
  order_id: 'T_12345', // 訂單編號，避免重複計算轉換
});

自訂事件 (Custom Events)

如果 Meta 的標準事件無法滿足你的需求，你可以使用 trackCustom 來定義自己的事件。自訂事件可以用來建立「自訂受眾 (Custom Discovery)」，也可以透過「自訂轉換 (Custom Conversions)」設定來轉換成可優化的目標。

語法： fbq('trackCustom', 'CustomEventName', { custom_param: 'value' });

範例：

捲動深度：當使用者閱讀文章超過 50% 時。

fbq('trackCustom', 'ScrollDepth', { depth: '50%', article_title: 'Meta Pixel 教學' });

促銷點擊：點擊首頁特定的 Banner。

fbq('trackCustom', 'ClickPromotion', { promo_id: 'SUMMER_SALE_2024' });

計時器：使用者停留在頁面超過 30 秒。

fbq('trackCustom', 'TimeOnPage', { seconds: 30 });

進階技巧：Advanced Matching (進階配對)

為了提升歸因準確度（特別是在 iOS 14+ 隱私權政策下），Meta 建議使用「進階配對」功能。這允許你在初始化 Pixel 時，同時傳送雜湊處理後的使用者資料（Email、電話等）。

fbq('init', '你的_PIXEL_ID', {
  em: 'email@example.com', // Meta 會自動幫你做 SHA-256 hash
  ph: '0912345678', // 格式需為長數字
  fn: 'Mike', // First Name
  ln: 'Lee', // Last Name
});

雖然 fbq 函式宣稱會自動 Hash，但為了資安考量，最佳實踐仍是在後端先進行 Hash，再將 Hash 過的字串輸出到前端變數中，確保明文個資不會出現在 HTML 原始碼裡。

驗證與偵錯

安裝完成後，如何確定 Pixel 有正常運作？

Meta Pixel Helper

這是最必備的 Chrome 擴充功能。

安裝 Meta Pixel Helper。
瀏覽你的網站。
點擊擴充功能圖示，它會顯示當前頁面觸發了哪些事件。
檢查是否有綠色勾勾，特別注意 content_ids 和 value 參數是否正確抓取。

Events Manager (事件管理工具)

前往 Meta 後台的事件管理工具，使用「測試事件 (Test Events)」功能。

輸入你的網站網址並開啟。
在網站上操作（點擊商品、加入購物車）。
回到後台看即時紀錄，確認伺服器有收到正確的事件與參數。

掌握這些電商標準事件，你的 Meta 廣告就能精準地找到「看過這雙鞋但還沒買」的潛在客戶，從而大幅提升 ROAS！