最近接到一个需求，优化独立站的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代码安装详解的更多相关文章

  1. Linux ssh登录和软件安装详解

    阿哲Style   Linux第一天 ssh登录和软件安装详解 Linux学习第一天 操作环境: Ubuntu 16.04 Win10系统,使用putty_V0.63 本身学习Linux就是想在服务器 ...

  2. scribefire 多博客管理利器 安装详解

    scribefire 多博客管理利器 安装详解 一.ScribeFire介绍 ScribeFire 是 Firefox (火狐浏览器)上著名的博客写作工具,目前已跨平台支持多浏览器(Firefox,C ...

  3. Oracle Database 12c Release 2安装详解

    第1章 Oracle Database 12c Release 2安装详解 1.1 下载方法 oracle官网https://www.oracle.com 1)打开官方网站,找到下载连接 2)选择更多 ...

  4. IntelliJ IDEA（2018）安装详解

    转: IntelliJ IDEA(2018)安装详解 置顶 2018年06月06日 22:58:45 Lazymanx 阅读数:95701   版权声明: https://blog.csdn.net/ ...

  5. Win10 TensorFlow（gpu）安装详解

    Win10 TensorFlow(gpu)安装详解 写在前面:TensorFlow是谷歌基于DistBelief进行研发的第二代人工智能学习系统,其命名来源于本身的运行原理.Tensor(张量)意味着 ...

  6. Windows下caffe安装详解(仅CPU)

    本文大多转载自 http://blog.csdn.net/guoyk1990/article/details/52909864,加入部分自己实战心得. 1.环境:windows 7\VS2013 2. ...

  7. (转)Win10 TensorFlow（gpu）安装详解

    Win10 TensorFlow(gpu)安装详解 写在前面:TensorFlow是谷歌基于DistBelief进行研发的第二代人工智能学习系统,其命名来源于本身的运行原理.Tensor(张量)意味着 ...

  8. MYSQL之数据库初识、安装详解、sql语句基本操作

    目录 MYSQL之数据库初识及安装详解 1.什么是数据库? 1.什么是数据?(data) 2.什么是数据库?(databases,简称DB) 2.为什要用数据库? 3.什么是数据库管理系统?(Data ...

  9. 【Linux开发】Linux下jpeglib库的安装详解

    Linux下jpeglib库的安装详解 首先要下载所需的库压缩包:jpegsrc.v6b.tar.gz或 jpegsrc.v8b.tar.gz 然后将下载的压缩包随便放在和解压到你喜欢的地方. # t ...

随机推荐

  1. MySQL-安装配置篇

    一.MySQL二进制安装包安装 1.环境初始化 1)创建目录mkdir /app/database --安装路径 mkdir /data/3306 --存放数据路径 mkdir /binlog/330 ...

  2. elasticsearch技术解析与实战ES

    elasticsearch技术解析与实战ES 下载地址: https://pan.baidu.com/s/1NpPX05C0xKx_w9gBYaMJ5w 扫码下面二维码关注公众号回复100008 获取 ...

  3. udevd启动失败问题

    最近用到udev自动挂载U盘,下载udev源码编译后,放在设备里运行,发现udev启动后立即就退出了, 通过加--debug参数可以看到输出错误信息: [root@DMF:dev]#mkdir .ud ...

  4. Python制作AI贪吃蛇，很多很多细节、思路都写下来了！

    前提:本文实现AI贪吃蛇自行对战,加上人机对战,读者可再次基础上自行添加电脑VS电脑和玩家VS玩家(其实把人机对战写完,这2个都没什么了,思路都一样) 实现效果: 很多人学习python,不知道从何学 ...

  5. Python 创建用户界面之 PyQt5 的使用

    之前给大伙介绍了下 tkinter,有朋友希望小帅b对其它的 Python  GUI 框架也说道说道,那么今天就来说说 PyQt5 如何创建用户界面.   很多人学习python,不知道从何学起.很多 ...

  6. vue 项目运行报错

    'vue-cli-service' 不是内部或外部命令,也不是可运行的程序 或批处理文件. 运行Vue项目文件的时候报如下错误 需要先用淘宝镜像来运行:cnpm install 然后运行成功后 就可以 ...

  7. 卷积神经网络 part2

    [任务一]代码练习 在谷歌 Colab 上完成代码练习,关键步骤截图,并附一些自己的想法和解读.  ● MobileNetV1 网络:简要阅读谷歌2017年的论文<MobileNets: Eff ...

  8. web新手第二周知识汇总

    这周学习了盒模型以及一些定位的知识,现在简单做下汇总 盒模型组成部分: ie浏览器默认值是border-box content(内容盒)蓝色 padding(内容和边框的距离 绿色 填充盒包含内容)b ...

  9. 面试这么撩准拿offer，HashMap深度学习，扰动函数、负载因子、扩容拆分，原理和实践验证，让懂了就是真的懂！

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 得益于Doug Lea老爷子的操刀,让HashMap成为使用和面试最频繁的API,没 ...

  10. 【LifecycleException】: org.apache.catalina.LifecycleException: A child container failed during start 解决

    看了好多种解决方案: 第一种:从tomcat remove project -> clean project -> reboot project; 第二种:说用到的 jasper jsp解 ...