facebookPixel代码安装详解

最近接到一个需求，优化独立站的facebookPixel代码，完成后对这个项目进行复盘。首先要介绍facebookPixel的理论知识。

Facebook像素是一段JavaScript代码，其中加载了一个小的函数库，您可以使用这些函数来跟踪网站上Facebook广告驱动的访问者活动。它依赖于Facebook cookie，这使我们能够将您的网站访问者匹配到各自的Facebook用户帐户。匹配后，我们可以在Facebook Ads Manager和Analytics（分析）信息中心中统计他们的操作，以便您使用数据分析网站的转化流并优化广告系列。

Facebook Pixel像素代码安装在独立站或者合作伙伴的网站上，可以记录访客在网页上的特定浏览动作,比如“观看内容,加入购物车，点击购买按钮”等等,可以针对用户这些动作做Facebook广告和再营销，还可以看到前端广告跟后端的数据对比。前端的广告曝光跟click,有多少转化,归因到后端中去了，这对做facebook广告优化有着非常重要的参考意义。

安装必备基本代码：

基本像素代码在两个位置包含像素的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');
  fbq('init', '{your-pixel-id-goes-here}');
  fbq('track', 'PageView');
</script>
<noscript>
  <img height="1" width="1" style="display:none"
       src="https://www.facebook.com/tr?id={your-pixel-id-goes-here}&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

安装前需要了解的基础知识

标准事件，可以使用使用 fbq('track') 函数来追踪下列标准事件

自定义事件

可以通过调用像素的fbq('trackCustom')函数来跟踪自定义事件，以自定义事件名称和（可选）JSON对象作为其参数。就像标准事件一样，自定义事件可以在网页<body>加载或访问者执行诸如单击按钮之类的操作时，在网页的打开和关闭标签之间的任意位置调用该函数。自定义事件名称必须是字符串，并且长度不能超过50个字符。

对象属性（JSON格式）

获得了基本代码，并且对事件和对象属性有了基本的了解以后，我们可以开始正式的安装代码了。

要安装像素，我们强烈建议您在跟踪网站访问者操作的每个页面的开始和结束标记之间添加其基本代码。大多数开发人员将其添加到网站的永久标头中，因此可以在所有页面上使用。
将代码放置在代码中<head>可减少浏览器或第三方代码阻止像素执行的机会。它还可以更快地执行代码，从而增加在访客离开您的页面之前对其进行跟踪的机会。注意，跟踪代码是异步的，不会影响网站的性能。

将其添加到网站后，请加载包含像素的页面。这应该调用fbq('track', 'PageView')，它将PageView在事件管理器中作为事件进行跟踪。当然，我们不可能仅仅追踪PageView事件，作为一个电商网站，我们还可能需要追踪商品详情页浏览，加入购物车，结账等操作，这些操作有些需要页面加载时触发，有些需要对页面元素进行操作的时候进行触发，示例代码如下：

页面加载时触发商品详情浏览，参数为商品的基本信息

<!-- 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 -->

点击加入购物车按钮时触发

<!-- 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>

代码安装完成后，判断是否安装成功，需要通过第三方的工具检测。工具名字叫Facebook Pixel Helper，是谷歌浏览器的一个扩展，安装后可以通过顶部的插件检测页面的事件是否加载。切记，检测的时候打开翻墙，只有在翻墙状态下才能够加载上fb的基础js，才能进一步的触发事件。

facebookPixel代码安装详解-LMLPHP

如图所示，标识代码已经安装成功并生效。

facebookPixel代码安装详解-LMLPHP

也可以在控制台查看有没有发送请求。

至此，跟踪代码安装检测完成。上线后至少24小时生效。注意对对象属性的格式一定要按照说明文档来，如果不对的话可能报错。如果用上面的检测方法检测过还报错的话，有可能就是参数错误了，认真检查即可。

facebookPixel代码安装详解-LMLPHP

检测结果如图，就证明安装完成并且完美生效啦！！！

低级码农312

facebookPixel代码安装详解