facebookPixel代码安装详解

2020 年 9 月 4 日
筆記

最近接到一个需求，优化独立站的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',
  '//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="//www.facebook.com/tr?id={your-pixel-id-goes-here}&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

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

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

活动名称	活动说明	对象属性	升级对象的custom_event_type值
`AddPaymentInfo`	在结帐流程中添加付款信息时。一个人单击“保存帐单信息”按钮。	`content_category`，`content_ids`，`contents`，`currency`，`value` 不需要。	ADD_PAYMENT_INFO
`AddToCart`	将产品添加到购物车时。一个人单击添加到购物车按钮。	`content_ids`，`content_name`，`content_type`，`contents`，`currency`，`value` 不需要。动态广告必填：`content_type`和`contents`，或`content_ids`	添加到购物车
`AddToWishlist`	将产品添加到心愿单时。一个人单击添加到愿望清单按钮。	`content_name`，`content_category`，`content_ids`，`contents`，`currency`，`value` 不需要。	ADD_TO_WISHLIST
`CompleteRegistration`	完成注册表后。个人提交完整的订阅或注册表格。	`content_name`，`currency`，`status`，`value` 不需要。	完成注册
`Contact`	当某人通过电话，短信，电子邮件，聊天等开始与您的公司联系时。一个人提交有关产品的问题。	不需要。	联系
`CustomizeProduct`	一个人定制产品时。一个人选择一件T恤的颜色。	不需要。	CUSTOMIZE_PRODUCT
`Donate`	一个人向您的组织或事业捐款时。一个人将对人道主义协会的捐款添加到他们的购物车中。	不需要。
`FindLocation`	当某人通过网站或应用程序搜索您商店的位置而打算访问该实际位置时。一个人想在本地商店中找到特定的产品。	不需要。	FIND_LOCATION
`InitiateCheckout`	当某人在完成结帐流程之前进入结帐流程时。一个人单击结帐按钮。	`content_category`，`content_ids`，`contents`，`currency`， `num_items`，`value` 不需要。	INITIATE_CHECKOUT
`Lead`	注册完成后。一个人点击定价。	`content_category`，`content_name`，`currency`，`value` 不需要。	铅
`PageView`	这是默认的像素跟踪页面访问。一个人登陆您的网站页面。	不需要。	页面预览
`Purchase`	购买或结帐流程完成后。一个人已经完成了购买或结帐流程，并进入了“谢谢”或“确认”页面。	`content_ids`，`content_name`，`content_type`，`contents`，`currency`，`num_items`，`value` 必填：`currency`和`value` 动态广告必填： `content_type`和`contents`，或`content_ids`	采购
`Schedule`	当某人预约访问您的位置之一时。一个人选择预约牙医的日期和时间。	不需要。	时间表
`Search`	搜索时。有人在您的网站上搜索产品。	`content_category`，`content_ids`，`contents`，`currency`，`search_string`，`value` 不需要。	搜索
`StartTrial`	当某人开始免费试用您提供的产品或服务时。一个人选择游戏的空闲时间。	`currency`，`predicted_ltv`，`value` 不需要。	START_TRIAL
`SubmitApplication`	当某人申请您提供的产品，服务或程序时。一个人申请信用卡，教育计划或工作。	不需要。	递交申请
`Subscribe`	当某人开始申请您提供的产品或服务的付费订阅时。一个人订阅了您的流媒体服务。	`currency`，`predicted_ltv`，`value` 不需要。	订阅
`ViewContent`	访问您关注的网页（例如，产品页面或登录页面）。`ViewContent`告诉您是否有人访问了网页的URL，但没有告诉他们他们在该网页上看到或执行的操作。一个人登陆产品详细信息页面。	`content_ids`，`content_category`，`content_name`，`content_type`，`contents`，`currency`，`value` 不需要。动态广告必填：`content_type`和`contents`，或`content_ids`	VIEW_CONTENT

自定义事件

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

对象属性（JSON格式）

Property Key	Value Type	Parameter Description
`content_category`	String	Category of the page/product.页面/产品的类别。
`content_ids`	Array of integers or strings	Product IDs associated with the event, such as SKUs (e.g. `['ABC123', 'XYZ789']`). 与事件关联的产品ID，例如SKU（例如`['ABC123', 'XYZ789']`）。
`content_name`	String	Name of the page/product.页面/产品的名称。
`content_type`	String	Either `product` or `product_group` based on the `content_ids` or `contents` being passed. If the IDs being passed in `content_ids` or `contents` parameter are IDs of products then the value should be `product`. If product group IDs are being passed, then the value should be `product_group`. 无论是`product`或`product_group`基于`content_ids`或`contents`传递。如果传入的ID `content_ids`或`contents`参数是产品ID，则值应为`product`。如果要传递产品组ID，则值应为`product_group`。
`contents`	Array of objects	An array of JSON objects that contains the quantity and the International Article Number (EAN) when applicable, or other product or content identifier(s). `id` and `quantity` are the required fields. e.g. `[{'id': 'ABC123', 'quantity': 2}, {'id': 'XYZ789', 'quantity': 2}]`. 包含数量和国际物品编号（EAN）（如果适用）或其他产品或内容标识符的JSON对象数组。`id`并且`quantity`是必填字段。例如`[{'id': 'ABC123', 'quantity': 2}, {'id': 'XYZ789', 'quantity': 2}]`。
`currency`	String	The currency for the `value` specified.`value`指定的货币。
`num_items`	Integer	Used with `InitiateCheckout` event. The number of items when checkout was initiated.与`InitiateCheckout`事件一起使用。发起结帐时的项目数。
`predicted_ltv`	Integer, float	Predicted lifetime value of a subscriber as defined by the advertiser and expressed as an exact value.由广告商定义并以精确值表示的订户的预测生存期值。
`search_string`	String	Used with the `Search` event. The string entered by the user for the search.与`Search`事件一起使用。用户为搜索输入的字符串。
`status`	Boolean	Used with the `CompleteRegistration` event, to show the status of the registration.与`CompleteRegistration`事件一起使用，以显示注册状态。
`value`	Integer or float	The value of a user performing this event to the business.对企业执行此事件的用户的价值。

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

要安装像素，我们强烈建议您在跟踪网站访问者操作的每个页面的开始和结束标记之间添加其基本代码。大多数开发人员将其添加到网站的永久标头中，因此可以在所有页面上使用。
将代码放置在代码中<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，才能进一步的触发事件。

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

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

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

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

facebookPixel代码安装详解

VirMach 便宜 VPS

QNews

facebookPixel代码安装详解

分享此文：

Related Posts

Rancher 2.5特性解读丨更简单友好的API和Dashboard

Python 图_系列之纵横对比 Bellman-Ford 和 Dijkstra 最短路径算法

单机、分布式、集群的区别与联系

如何写好转正答辩PPT

VirMach 便宜 VPS

QNews

熱門文章

熱門搜尋