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 標籤安裝範例

以下是在一個虛構網站的各個主要頁面上安裝 Meta 像素 IMG 標籤的範例，其中使用虛構的像素編號（12345）和自訂參數（例如 cd[currency]=USD）。

在產品頁面上，一個像素負責追蹤 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

如果您為了設定 IMG 像素而使用執行階段 JavaScript 產生 JavaScript 影像類別，但並未將該影像類別附加至網站的 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 的頁面長度後觸發 Lead 像素。

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% 後觸發 Lead 像素。

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 像素基底程式碼的 init 呼叫上方加入 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}。