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') 函数来追踪下列标准事件

活动名称	活动说明	对象属性	升级对象的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代码安装详解的更多相关文章

Linux ssh登录和软件安装详解
阿哲Style Linux第一天 ssh登录和软件安装详解 Linux学习第一天操作环境: Ubuntu 16.04 Win10系统,使用putty_V0.63 本身学习Linux就是想在服务器 ...
scribefire 多博客管理利器安装详解
scribefire 多博客管理利器安装详解一.ScribeFire介绍 ScribeFire 是 Firefox (火狐浏览器)上著名的博客写作工具,目前已跨平台支持多浏览器(Firefox,C ...
Oracle Database 12c Release 2安装详解
第1章 Oracle Database 12c Release 2安装详解 1.1 下载方法 oracle官网https://www.oracle.com 1)打开官方网站,找到下载连接 2)选择更多 ...
IntelliJ IDEA（2018）安装详解
转: IntelliJ IDEA(2018)安装详解置顶 2018年06月06日 22:58:45 Lazymanx 阅读数:95701 版权声明: https://blog.csdn.net/ ...
Win10 TensorFlow（gpu）安装详解
Win10 TensorFlow(gpu)安装详解写在前面:TensorFlow是谷歌基于DistBelief进行研发的第二代人工智能学习系统,其命名来源于本身的运行原理.Tensor(张量)意味着 ...
Windows下caffe安装详解(仅CPU)
本文大多转载自 http://blog.csdn.net/guoyk1990/article/details/52909864,加入部分自己实战心得. 1.环境:windows 7\VS2013 2. ...
(转)Win10 TensorFlow（gpu）安装详解
Win10 TensorFlow(gpu)安装详解写在前面:TensorFlow是谷歌基于DistBelief进行研发的第二代人工智能学习系统,其命名来源于本身的运行原理.Tensor(张量)意味着 ...
MYSQL之数据库初识、安装详解、sql语句基本操作
目录 MYSQL之数据库初识及安装详解 1.什么是数据库? 1.什么是数据?(data) 2.什么是数据库?(databases,简称DB) 2.为什要用数据库? 3.什么是数据库管理系统?(Data ...
【Linux开发】Linux下jpeglib库的安装详解
Linux下jpeglib库的安装详解首先要下载所需的库压缩包:jpegsrc.v6b.tar.gz或 jpegsrc.v8b.tar.gz 然后将下载的压缩包随便放在和解压到你喜欢的地方. # t ...

随机推荐

mysql主主半同步
1.半同步概述先了解下mysql的几种复制异步复制MySQL复制默认是异步复制,Master将事件写入binlog,提交事务,自身并不知道slave是否接收是否处理:缺点:不能保证所有事务都被所有 ...
Android 的Fragment组件（写完放假。。。）
今天写的有点晚,做个题目有点慢,然后搞其他事搞定就到了0点,总结下就差不多该睡了. 今天学长讲的是Fragment: 一个可以将activity拆分成几个完全独立封装的可重用的组件,每个组件有自己的生 ...
Meow 攻击会删除不安全（开放的）的Elasticsearch（及MongoDB）索引，然后建一堆以Meow结尾的奇奇怪怪的索引（如：m3egspncll-meow）
07月29日,早上照例一来,先连接Elasticsearch查看日志[禁止转载,by @CoderBaby],结果,咦,什么情况,相关索引被删除了,产生了一堆以Meow开头的奇奇怪怪的索引,如下图: ...
Javascript注意点
Javascript注意点在img标签中的src如果为相对路径, 但是在js获取的时候会转为全路径候选框中, 在执行onclick之前, 会由于html的特征先设置checked属性为a标签添加 ...
2020-03-27：分布式锁的问题，假如a线程在获得锁的情况下网络波动极端情况是断网了，这种情况是怎么处理的
福哥答案2020-04-04:超时释放锁.
基于token的会话保持机制
session简介做过Web开发的程序员应该对Session都比较熟悉,Session是一块保存在服务器端的内存空间,一般用于保存用户的会话信息. 用户通过用户名和密码登陆成功之后,服务器端程序会在 ...
js获取当前地址信息
var url = window.location.href; //获取当前窗口的Url; 结果:http://localhost:61768/Home/Index?id=2&age=18 v ...
真正从底层理解 Synchronized 实现原理
实现synchronized的基础有两个:Java 对象头和 Monitor. 在虚拟机规范中定义了对象在内存中的布局,主要由以下 3 部分组成: 对象头实例数据对齐填充而synchronize ...
【Net】StreamWriter.Write 的一点注意事项
背景今天在维护一个旧项目的时候,看到一个方法把string 转换为 byte[] 用的是写入内存流的,然后ToArray(),因为平常都是用System.Text.Encoding.UTF8.Get ...
python基础 Day8
python Day8 文件操作的识利用python代码写一个脚本操作文件的过程文件的路径:path 打开方式:读,写,追加,读写,写读编码方式:utf-8,gbk,gb2312 简单文件读取( ...

facebookPixel代码安装详解

facebookPixel代码安装详解的更多相关文章

随机推荐

热门专题