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

随机推荐

ssm框架中applicationContext.xml文件中配置别名
在applicationContext.xml中配置如下: 通过以下property标签中给定name属性value属性及对应的值,来将domain包下所有实体类设置别名. 在xxxDao.xml中 ...
Linux分布式机器设置机器名字
查看主机的名字: hostname 1.临时修改 [root@localhost datas]# hostname slaver 临时修改,重启服务器后就不生效了 [root@localhost da ...
"点"醒自己
回顾: 过去的经历从18年开始在某机构进行了测试培训,9月正式加入测试小白大军,中间也经历了半年的空窗期,入职2个月应能力不够被公司辞退,后通过培训班的朋友内推到一家软件外包公司,工作到现在. 思考 ...
fastjson JSON.toJavaObject() 实体类首字母大写属性无法解析问题
fastjson JSON.toJavaObject() 实体类首字母大写属性无法解析问题
简单的 Nginx+Tomcat 配置负载均衡集群
简单 Nginx+Tomcat 配置负载均衡集群前期准备解压两个tomcat,修改端口号 server1:8081 server:8082 同时启动 nginx官网下载解压版nginx 创建一个简 ...
03-注释与API文档
1.注释:Comment分类: 单行注释:// 多行注释:/* */ 文档注释:/** */作用: ① 对所写的程序进行解释说明,增强可读性.方便自己,方便别人 ② 调试所写的代码特点: ①单行注释和 ...
Python Tricks —— 使用 pywinrm 远程控制 Windows 主机
启用 WinRM 远程服务: winrm quickconfig 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不 ...
SpringBoot实现发送邮件
1.QQ邮箱发送邮件设置首先登录QQ邮箱>>>登录成功后找到设置>>>然后找到邮箱设置>>>点击账户>>>找到POP3|SMT ...
Java泛型是什么?实战demo
1. 概述泛型在java中有很重要的地位,在面向对象编程及各种设计模式中有非常广泛的应用. 什么是泛型?为什么要使用泛型? 泛型,即“参数化类型”.一提到参数,最熟悉的就是定义方法时有形参,然后调用 ...
内网 Maven 编译
内网 Maven 编译有个特殊的需求,在不联网的情况下编译 Java 项目. 想到两种方案: 搭建 Nexus 私有镜像仓库. 直接把依赖 jar包放在编译机的 maven 本地库中. 步骤简述 ...

facebookPixel代码安装详解

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

随机推荐

热门专题