Facebook Pixel是一段JavaScript代码,其中加载了一个小的函数库,可以使用这些函数来跟踪网站上Facebook广告驱动的访问者活动。它依赖于Facebook cookie,这使我们能够将网站访问者匹配到各自的Facebook用户帐户。匹配后,我们可以在Facebook Ads Manager和Analytics(分析)信息中心中统计他们的操作,以便使用数据分析网站的转化流并优化广告系列。
Facebook Pixel像素代码安装在独立站或者合作伙伴的网站上,可以记录访客在网页上的特定浏览动作,比如“观看内容,加入购物车,点击购买按钮”等等,可以针对用户这些动作做Facebook广告和再营销,还可以看到前端广告跟后端的数据对比。前端的广告曝光跟click,有多少转化,归因到后端中去了,这对做facebook广告优化有着非常重要的参考意义。
安装前需要了解的基础知识
标准事件 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.对企业执行此事件的用户的价值。 |
安装基本代码:
<!-- 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', '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,才能进一步的触发事件。
成功效果: