Meta 像素

進階

有關另類執行方式的貼士，包括透過單一頁面的網頁應用程式使用像素，以及透過按鈕點擊次數和頁面捲動來追蹤轉換。

一般資料保護規章

如果您在受《一般資料保護規章》（GDPR）約束的國家／地區經營業務，請參閱我們的 GDPR 文件以了解如何符合相關規定。

使用 IMG 標籤安裝像素

雖然您可以使用 IMG 標籤安裝像素，但建議您參閱我們的執行指南，以了解替代方法。

如需使用輕量級執行方式安裝像素，您可選擇使用 <img> 標籤來安裝。若要這樣做，請在網站標題或正文中的開頭和結尾 <noscript> 標籤之間加入以下程式碼，然後將 {pixel-id} 替換為您的像素編號，以及把 {standard-event} 替換為標準事件。

<img src="https://www.facebook.com/tr?id=&#123;pixel-id&#125;&amp;ev=&#123;standard-event&#125;" height="1" width="1" style="display:none"/>

使用 <img> 標籤安裝的像素亦支援參數，您可以將參數加入查詢字串中。例如：

<img src="https://www.facebook.com/tr?id=12345
  &amp;ev=ViewContent
  &amp;cd[content_name]=ABC%20Leather%20Sandal
  &amp;cd[content_category]=Shoes
  &amp;cd[content_type]=product
  &amp;cd[content_ids]=1234
  &amp;cd[value]=0.50
  &amp;cd[currency]=USD" height="1" width="1" style="display:none"/>

限制

  • 無法在每次頁面載入時多次觸發像素
  • 無法追蹤由用戶介面互動（例如按鈕點擊）觸發的標準或自訂事件
  • 傳送自訂數據或長網址時會受到 HTTP GET 限制
  • 無法以非同步方式載入

IMG 標籤安裝範例

以下範例展示了如何使用虛擬像素 ID（12345）和自訂參數（例如 cd[currency]=USD），在虛擬網站的各個主要頁面中安裝 Meta 像素 IMG 標籤。

在商品頁面中，一個像素負責追蹤 PageView 事件，另一個像素則負責追蹤 ViewContent 事件：

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/> 
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=ViewContent"/>

在加到購物車頁面中，一個像素負責追蹤 PageView 事件，另一個像素則負責追蹤 AddToCard 事件：

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/> 
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=AddToCart&cd[currency]=USD&cd[value]=0.00"/>

在購買頁面中，一個像素負責追蹤 PageView 事件，另一個像素則負責追蹤 Purchase 事件：

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/> 
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=Purchase&cd[currency]=USD&cd[value]=0.00"/>

iOS 14.5+ 彙總事件成效衡量 IMG 像素

Meta 的彙總事件成效衡量協定可以讓您衡量來自 iOS 14.5 或更新版本裝置用戶的網站及應用程式事件。系統可能會使用經過專門設計的統計模型，可在資料有所欠缺或不完整時讓您更全面地了解成效。

我們強烈建議您在使用像素 IMG 標籤時，跟隨本文件中「使用 IMG 標籤安裝像素」部分的指示，或放棄使用 IMG 標籤並改為跟隨我們的執行指南操作。

缺少 IMG 像素資料

運行時間 JavaScript

如果您使用運行時間 JavaScript 來產生 JavaScript 圖像類別以設定 IMG 像素，但沒有將該圖像類別附加至網站的 DOM 樹狀結構（例如使用第三方 JavaScript 函式庫傳送 IMG 像素），則您必須加入以下程式碼，否則 Meta 將不會收到您的 IMG 像素資料。

var nativeBridge = window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.receiveImgPixel;
if (nativeBridge) {
    const postObj = {
        id: {pixel-id},
        ev: {standard-event},
        cd: {stringified-custom-data},
        dpo: {data-processing-options},          // Optional CCPA param
        dpoco: {data-processing-option-country}, // Optional CCPA param
        dpost: {data-processing-option-state},   // Optional CCPA param
    };
    nativeBridge.postMessage(JSON.stringify(postObj));
}

沙盒屬性

如果您將像素 IMG 放入擁有 sandbox 屬性的 iframe，則您必須加入 allow-scripts 值，否則 Facebook 將不會收到您的 IMG 像素資料。

為自動重新導向的情況啟用 AEM

我們擴展了 AEM 的功能，以在廣告客戶的優化像素事件獲觸發時，考慮來自所有與廣告客戶相關網頁的轉換。這些特定情況包括廣告客戶使用短網址產生器或根據地理位置作重新導向、有多個業務範圍，或者依靠代理商刊登廣告。如果您符合任何一種情況並想啟用 AEM，我們建議您執行以下事項：

  • 在要取得轉換的每個相關網域使用相同的 Meta 像素，即相同的像素編號和像素事件名稱組合
  • 確保這些網域均有優先考慮您要從中取得轉換的 AEM 事件

追蹤按鈕的點擊次數

訪客點擊按鈕後，Meta 像素的 JavaScript 程式碼會自動偵測並傳送相關表格欄位給 Meta。

假設您有一個電子商務網站，而點擊「加到購物車」按鈕不會將用戶帶往新頁面。您可能想在點擊按鈕時啟動事件。

在這個範例中，我們會在載入頁面時啟用 ViewContent 標準事件。當有人點擊「加到購物車」按鈕時，我們就會啟用 AddToCart 標準事件。

為此，請首先載入您想在載入頁面時觸發的 Meta 像素程式碼：

<!-- Facebook Pixel Code --> <script> fbq('track', 'ViewContent', { content_name: 'Really Fast Running Shoes', content_category: 'Apparel & Accessories > Shoes', content_ids: ['1234'], content_type: 'product', value: 0.50, currency: 'USD' }); </script> <!-- End Facebook Pixel Code -->

然後，在載入新的頁面時或點擊「加到購物車」按鈕後觸發 AddToCart。處理按鈕點擊有多種方法。以下是在按鈕新增 eventListener 的範例。

<!-- Somewhere there is a button that performs Add to Cart --> <button id="addToCartButton">Add To Cart</button> <!-- Add Pixel Events to the button's click handler --> <script type="text/javascript"> var button = document.getElementById('addToCartButton'); button.addEventListener( 'click', function() { fbq('track', 'AddToCart', { content_name: 'Really Fast Running Shoes', content_category: 'Apparel & Accessories > Shoes', content_ids: ['1234'], content_type: 'product', value: 4.99, currency: 'USD' }); }, false ); </script>

您可以透過多種方法處理點擊事件，不過請務必在點擊後呼叫 fbq 函數。

視乎執行像素的具體方式，像素協助工具可能會在有人點擊按鈕前顯示錯誤。您可以點擊按鈕來確認像素能正確觸發，以解除像素協助工具的錯誤。

根據分享設定觸發事件

在這個範例中，假設您有一個網誌，而且想追蹤已閱讀文章所有內容的用戶。除捲動至頁面結尾外，用戶並無其他動作。

以下是載入像素的頁面 HTML 範例：

<!DOCTYPE html> <html> <head> <!-- Facebook 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/en_US/fbevents.js'); fbq('init', '<FB_PIXEL_ID>'); fbq('track', "PageView"); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=<FB_PIXEL_ID>&ev=PageView&noscript=1" /></noscript> <!-- End Facebook Pixel Code --> </head> <body> <h1>Scroll Page until the Lead event is fired</h1> <div style="height: 120vh; width: 100vw; background-color: #00f;"></div> <h1 id="fb-fire-pixel">Lead event will fire when this phrase enters the screen</h1> <div style="height: 120vh; width: 100vw; background-color: #000;"></div> </body> </html>

當擁有 id=fb-fire-pixel 的 h1 素材出現時，我們應該觸發 Lead 標準事件。如要確定某項素材會在畫面上顯示，我們可在頁面上新增以下程式碼：

// This code should be loaded together with Meta Pixel

var executeWhenElementIsVisible = function(dom_element, callback) {

  if (!(dom_element instanceof HTMLElement)) {
    console.error('dom_element must be a valid HTMLElement');
  }

  if (typeof callback !== 'function') {
    console.error(
      'Second parameter must be a function, got',
      typeof callback,
      'instead',
    );
  }

  function isOnViewport(elem) {
    var rect = elem.getBoundingClientRect();
    var docElem = document.documentElement;
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || docElem.clientHeight) &&
      rect.right <= (window.innerWidth || docElem.clientWidth)
    );
  }

  var executeCallback = (function() {
    var wasExecuted = false;
    return function() {
      if (!wasExecuted && isOnViewport(dom_element)) {
        wasExecuted = true;
        callback();
      }
    };
  })();

  window.addEventListener('scroll', executeCallback, false);
};

之後，我們需要定義當畫面上顯示該素材時觸發像素的方法：

// Get the element that should be visible to trigger the pixel fire
var element = document.getElementById('fb-fire-pixel');

// Then, set the event to be tracked when element is visible
// Note that second parameter is a function, not a function call
executeWhenElementIsVisible(element, function() {
  fbq('track', 'Lead');
});

根據頁面長度或百分比觸發事件

在這個範例中，假設您想追蹤已閱讀頁面一定長度或百分比的用戶。除捲動至所需的頁面長度或百分比外，用戶並無其他動作。

第一個範例是追蹤用戶所閱讀的頁面長度。在這個範例中，當用戶已閱讀多達 500px 的頁面長度時，我們就會觸發潛在顧客像素。

var executeWhenReachedPageLength = function(length, callback) {
  if (typeof length !== 'number') {
    console.error(
      'First parameter must be a number, got',
      typeof length,
      'instead',
    );
  }

  if (typeof callback !== 'function') {
    console.error(
      'Second parameter must be a function, got',
      typeof callback,
      'instead',
    );
  }

  function getWindowLength() {
    return window.innerHeight || 
      (document.documentElement || document.body).clientHeight;
  }

  function getCurrentScrolledLengthPosition() {
   return window.pageYOffset || 
     (document.documentElement || document.body.parentNode || document.body).scrollTop;
  }

  var executeCallback = (function() {
    var wasExecuted = false;
    return function() {
      if (!wasExecuted && getCurrentScrolledLengthPosition() > length) {
        wasExecuted = true;
        callback();
      }
    };
  })();

  if (getWindowLength() >= length) {
    callback();
  } else {
    window.addEventListener('scroll', executeCallback, false);
  }
};

executeWhenReachedPageLength(10, function() {
  fbq('track', 'Lead');
});

第二個範例是追蹤用戶所閱讀的頁面百分比。在這個範例中，當用戶已閱讀 75% 的頁面時，我們就會觸發潛在顧客像素。

var executeWhenReachedPagePercentage = function(percentage, callback) {
  if (typeof percentage !== 'number') {
    console.error(
      'First parameter must be a number, got',
      typeof percentage,
      'instead',
    );
  }

  if (typeof callback !== 'function') {
    console.error(
      'Second parameter must be a function, got',
      typeof callback,
      'instead',
    );
  }

  function getDocumentLength() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    )
  }

  function getWindowLength() {
    return window.innerHeight || 
      (document.documentElement || document.body).clientHeight;
  }

  function getScrollableLength() {
    if (getDocumentLength() > getWindowLength()) {
      return getDocumentLength() - getWindowLength();
    } else {
      return 0;
    }
  }

  var scrollableLength = getScrollableLength();

  window.addEventListener("resize", function(){
    scrollableLength = getScrollableLength();
  }, false)

  function getCurrentScrolledLengthPosition() {
   return window.pageYOffset || 
     (document.documentElement || document.body.parentNode || document.body).scrollTop;
  }

  function getPercentageScrolled() {
    if (scrollableLength == 0) {
      return 100;
    } else {
      return getCurrentScrolledLengthPosition() / scrollableLength * 100;
    }
  }

  var executeCallback = (function() {
    var wasExecuted = false;
    return function() {
      if (!wasExecuted && getPercentageScrolled() > percentage) {
        wasExecuted = true;
        callback();
      }
    };
  })();

  if (getDocumentLength() == 0 ||
    (getWindowLength()/getDocumentLength() * 100 >= percentage)) {
    callback();
  } else {
    window.addEventListener('scroll', executeCallback, false);
  }
};

executeWhenReachedPagePercentage(75, function() {
  fbq('track', 'Lead');
});

延遲觸發像素

假如您想追蹤在觸發像素事件幾秒前與您的網站互動的用戶。您可以使用 setTimeout 函數執行此動作。

// Delay pixel fire by 3 seconds
var seconds = 3;
setTimeout(function() {
  fbq('track', 'Lead');
}, seconds * 1000);

這個函數可用於追蹤頁面的「深入」瀏覽，這代表用戶不會太快捲動頁面，而且真的在閱讀內容。

根據每個連線階段所查看的文章數量觸發事件

如果您想知道誰在您的網站看過某個數量的文章，您可以使用連線階段計算器並在這種情況發生時載入 Meta 像素程式碼。

連線階段是每項網站要求的指定時間範圍內，用戶與您網站進行的一組互動。只要您偵測到用戶在指定時間範圍內的動態，就可以增加頁面瀏覽次數。

假設每個 site_request 有變數 sessionCountViews，您便可根據計到的頁面瀏覽次數新增 Meta 像素程式碼。

僅計算第 6 篇查看過的文章（範例）

if (site_request.sessionCountViews == 6) {
  fbq('track', "ViewContent", {
    sessionCountViews: site_request.sessionCountViews,
  });
}

使用多個像素選擇追蹤特定事件

如果您在同一個頁面擁有多個像素，並想使用每個不重複像素選擇觸發特定的事件，則應該使用 trackSingle 及 trackSingleCustom 功能。

在啟動了多個像素的頁面使用 track 函數（不論是使用多個基底程式碼還是在一個基底程式碼中合併多個像素），可能會造成觸發次數過多或意外行為，因此只應在特定情況下使用。

例如，我們針對兩個已啟動的像素觸發 PageView 事件，並選擇在其中一個像素觸發標準事件（Purchase），以及在另一個像素觸發自訂事件。

fbq('init', '<PIXEL_A>');
fbq('init', '<PIXEL_B>');
fbq('track', 'PageView'); //fire PageView for both initialized pixels

// only fire the Purchase event for Pixel A
fbq('trackSingle', '<PIXEL_A>', 'Purchase', {
      value: 4,
      currency: 'GBP',
});

// only fire the custom event Step4 for Pixel B
fbq('trackSingleCustom', '<PIXEL_B>', 'Step4',{
  //optional parameters
});

追蹤個別像素的事件

在一些較罕見的情況下，您可能只想將事件傳送至其中一個已安裝至網站的像素。例如，用來限制已傳送至網站上其中一個像素的資料。這些方法會追蹤單個像素的像素觸發情況。您可使用下列方式呼叫這些方法：

fbq('trackSingle', 'FB_PIXEL_ID', 'Purchase', customData);
fbq('trackSingleCustom', 'FB_PIXEL_ID', 'CustomEvent', customData);

自動設定

Meta 像素會傳送您網站上的按鈕點擊次數和網頁中繼資料（例如根據 Opengraph 或 Schema.org 格式架構整理的資料），協助您改善廣告刊登和成效衡量，並自動執行像素設定程序。如果您想設定 Meta 像素，以停止傳送此等額外資訊，則可在 Meta 像素基底程式碼的初始呼叫上方加入 fbq('set', 'autoConfig', 'false', 'FB_PIXEL_ID')。

<!-- Facebook 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/en_US/fbevents.js'); 
// Line to enable Manual Only mode.
fbq('set', 'autoConfig', false, 'FB_PIXEL_ID'); 
//Insert Your Facebook Pixel ID below. 
fbq('init', 'FB_PIXEL_ID'); 
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none"src="https://www.facebook.com/tr?id=FB_PIXEL_ID&amp;ev=PageView&amp;noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

內容安全政策

如果您的網站設有《內容安全政策》，則您應允許從 https://connect.facebook.net 載入 JavaScript。備註：像素可從兩個路徑載入指令碼：/en_US/fbevents.js 及 /signals/config/{pixelID}?v={version}。