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

随机推荐

day1. python注释及变量
一.注释 1.单行注释 # # python 2.x print "你好" # python 3.x print("你好") 2.多行注释 ''' ''' 或 ...
requests入门实践02_下载斗图拉最新表情包
新版本移步:https://www.cnblogs.com/zy7y/p/13376228.html 下载斗图拉最新表情包要爬取的目标所在网址:http://www.doutula.com/phot ...
Mysql存储结构
索引是一种加快查询速度的数据结构,常用索引结构有hash.B-Tree和B+Tree.本节通过分析三者的数据结构来说明为啥Mysql选择用B+Tree数据结构. 数据结构 Hash hash是基于哈希 ...
Surface Pro 6 遇到的一系列问题
当屏幕很烫的时候,触摸屏会部分失灵,越烫越明显,但是 Surface Pen 仍然可以使用,建议这个时候关机,等它冷静了再开机不过不排除更新导致的触控失灵(新的更新没有考虑到老的硬件,微软也许之后永 ...
lombok的基本使用方法
在java刚开始学习的时候,首先就会学习封装.继承和多态,就拿封装来说,封装就是为了保护数据安全而将实体类内部数据保持为私有状态,如果外部程序想要访问里面的数据就必须调用此实体类提供的相关数据接口,这 ...
Vue CLI Webpack 创建Vue项目
简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...
QT QJson与QByteArray的转化
目录 QJsonObject转为QByteArray QByteArray转为QJsonObject 可以将QJsonObject与QByteArray互相转化,以便网络编程时客户端与服务器之间的通信 ...
C#开发笔记之01-为什么开源框架会大量的使用protected virtual？
C#开发笔记概述该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/957 访问. 我们在很多开源框架中会经常看到prote ...
JavaScript Babel说明
babel插件只是去唤醒 @babel/core中的转换过程转换模块需要手动安装 npm install @babel/core 转换方式需要安装 @babel/preset-env babel默认 ...
调试备忘录-J-Link RTT的使用（原理 + 教程 + 应用 + 代码）
MCU:STM32F407VE MDK:5.29 IAR:8.32 目录--点击可快速直达目录写在前面什么是RTT? RTT的工作原理 RTT的性能快速使用教程高级使用教程附上测试代码 2 ...

facebookPixel代码安装详解

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

随机推荐

热门专题