Meta Pixel 像素代码

高级

本文将提供有关其他实现方式的技巧，包括在单页面网页应用程序中使用 Pixel 像素代码，以及通过按钮点击和页面滚动来追踪转化。

《通用数据保护条例》

如果您在受《通用数据保护条例》(GDPR) 约束的国家/地区开展业务，请参阅我们的 GDPR 文档，了解如何实现业务合规。

使用 IMG 标签安装 Pixel 像素代码

尽管您可以使用 IMG 标签安装 Pixel 像素代码，但建议您参阅我们的实现指南，了解其他实现方法。

如需使用轻量级实现方式安装 Pixel 像素代码，您可以借助 <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> 标签安装的 Pixel 像素代码还支持参数，而且您可以将这些参数添加到查询字符串中。例如：

<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 标签安装示例

下方是使用虚拟 Pixel 像素代码编号 (12345) 和自定义参数（例如 cd[currency]=USD）在虚拟网站的各个关键网页安装 Meta Pixel 像素代码 IMG 标签的示例。

在产品页面中，一个 Pixel 像素代码追踪 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"/>

在加入购物车页面中，一个 Pixel 像素代码追踪 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"/>

在购买页面中，一个 Pixel 像素代码追踪 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 Pixel 像素代码

Meta 全事件衡量协议用于衡量来自 iOS 14.5 或更高版本设备用户的网站事件和应用事件。可以使用统计模型，该模型旨在在数据缺失或不足时，提供更全面的结果视图。

我们强烈建议您在使用 Pixel 像素代码 IMG 标签时遵循本文档的“使用 IMG 标签安装 Pixel 像素代码”部分，或者放弃使用 IMG 标签并按照我们的实现指南操作。

缺失 IMG Pixel 像素代码数据

运行时 JavaScript

如果您通过使用运行时 JavaScript 生成 JavaScript 图像类来设置 IMG Pixel 像素代码，但并未将该图像类附加到网站的 DOM 树（例如使用第三方 JavaScript 库发送 IMG Pixel 像素代码），则您必须添加以下代码，否则 Meta 将收不到您的 IMG Pixel 像素代码数据。

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));
}

沙盒属性

如果您将 Pixel 像素代码 IMG 放入具有 sandbox 属性的 iframe，则您必须添加 allow-scripts 值，否则 Facebook 不会接收您的 IMG Pixel 像素代码数据。

在自动重定向场景中启用 AEM

我们已扩展 AEM 功能，将广告主经优化的 Pixel 像素代码事件被触发后来自所有广告主相关联网页的转化考虑在内（在该特定场景中，广告主可能使用网址缩短器或基于地理位置的重定向功能，可能有多个业务线，或者可能通过代理机构来运作广告）。如果您属于上述其中一种情形并且想启用 AEM，建议您执行如下操作：

  • 在产生转化的各相关网域中使用相同的 Meta Pixel 像素代码（即相同的 Pixel 像素代码编号和 Pixel 像素代码事件名称对）
  • 确保已在这些网域中优化产生相关转化的 AEM 事件

追踪按钮点击量

访客点击一个按钮后，Meta Pixel 像素代码的 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 函数。

根据 Pixel 像素代码实现方式的不同，在点击按钮前，Pixel 像素代码帮手可能会显示错误。您可以通过点击按钮来证实 Pixel 像素代码触发无误，以此消除 Pixel 像素代码帮手的错误。

根据可见性触发事件

本示例假设您有一个博客，并且希望追踪阅读完整篇文章的用户。除滚动到页面末尾外，用户没有再执行任何操作。

以下是加载 Pixel 像素代码的 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);
};

然后，我们需要定义当屏幕上显示该元素时如何触发 Pixel 像素代码：

// 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 时，我们将触发潜在客户开发 Pixel 像素代码。

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% 时，我们将触发潜在客户开发 Pixel 像素代码。

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');
});

延迟触发 Pixel 像素代码事件

假设您希望追踪在触发 Pixel 像素代码事件几秒钟前与网站互动的用户。您可以使用 setTimeout 函数来实现。

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

此函数可用于追踪页面的“互动”访问，也就是说用户确实在阅读页面上的内容，而不只是走马观花。

根据每个会话中浏览的文章数量触发事件

如果您希望知道哪些用户在自己的站点上浏览过一定数量的文章，可使用会话计数器，并在会话发生时加载 Meta 像素代码。

会话指的是在每个站点请求的指定时间范围内，用户与网站之间的一组互动。只要检测到用户在指定时间范围内的活动，便可以增加页面浏览量。

假设每个 site_request 有变量 sessionCountViews，则可根据计算的页面浏览量添加 Meta Pixel 像素代码。

示例：仅计算第 6 篇文章的浏览量

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

使用多个 Pixel 像素代码选择性地追踪事件

如果您在同一页面上有多个 Pixel 像素代码，并想有选择地在每个独立的 Pixel 像素代码上触发事件，应使用 trackSingle 和 trackSingleCustom 功能。

如果在已初始化多个 Pixel 像素代码的页面上使用 track 功能（使用多个基础代码或将其组合到一个基础代码中），可能会导致过度触发或难以预料的后果，因此仅应在特定情况下应用。

例如，我们在两个已初始化的 Pixel 像素代码上触发 PageView 事件，并在一个 Pixel 像素代码上有选择地触发标准事件 (Purchase)，而在另外一个 Pixel 像素代码上触发自定义事件。

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
});

追踪单个 Pixel 像素代码的事件

在很罕见的情况下，您可能希望将事件仅发送给网站上安装的其中一个 Pixel 像素代码，例如，以此限制发送给网站上其中一个 Pixel 像素代码的数据。这些方法会追踪单个 Pixel 像素代码的 Pixel 像素代码触发事件。使用以下代码进行调用：

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

自动配置

Meta Pixel 像素代码将发送来自您网站的按钮点击量和页面元数据（例如根据 Opengraph 或 Schema.org 格式组织的数据），以改进广告投放和成效衡量，并自动设置 Pixel 像素代码。如要将 Meta Pixel 像素代码配置为不发送此附加信息，您可以在 Meta Pixel 像素代码的基础代码中初始化调用的上方添加 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。注意：Pixel 像素代码可从两个路径加载脚本：/en_US/fbevents.js 和 /signals/config/{pixelID}?v={version}。