Pixel Code Reference

分类目录: Facebook像素

Pixel Code Reference

The Facebook Pixel Javascript SDK can be used to track actions that users take on your website using both standard events and custom events. You can send multiple events on one page, and include custom data beyond just the referral URL. These events and associated custom data can then be used in Custom Audiences and custom conversions.

In this document

  • Overview
  • Setup
  • Advanced Matching
  • Standard and Custom Events
  • Putting it All Together
  • Dynamic Events

Setup

In order to use the javascript SDK, you should first add the Facebook Pixel to your page.

Afterwards, the Tag API can then be used to record specific actions on your website. The standard Facebook Pixel code is:

<!-- 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','//connect.facebook.net/en_US/fbevents.js');
// Insert Your Facebook Pixel ID below. 
fbq('init', 'FB_PIXEL_ID');
fbq('track', 'PageView');
</script>
<!-- Insert Your Facebook Pixel ID below. --> 
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=FB_PIXEL_ID&amp;ev=PageView&amp;noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

The default pixel code fires the PageView event, which can be used to create Custom Audiences and custom conversions that match referral URLs. This event should not be removed as it may cause disruption to the aforementioned rules.

Add Advanced Matching

Advanced matching enables you to send additional customer data through the pixel to match more website actions with Facebook users. See Advanced Matching.

Standard and Custom Events

The Facebook pixel has 9 standard events that are useful for both building audiences and tracking your website conversions back to your Facebook ads.

If you use oCPM, optimizing for a standard event or custom conversion is required in order to optimize your campaign delivery.

Events can be reported using fbq('track', 'eventName', {customData}); where customData is an optional assortment of key:value pairs. The first value, track, should not be altered.

To report a standard event, use one of the 9 standard events in the fbq track call. To report a legacy conversion event, use a Conversion Pixel ID as the eventName in the fbq track call. For both, you should include value and currency in the customData object. Additionally, if you are not interested in tracking or optimizing for conversions for specific actions, you can pass custom event names into the trackCustom call. You can then build Custom Audiences or custom conversions, which can then be used for conversion tracking and optimization, based off of these custom events.

Below are the 9 standard events.

Event Name Event Description Parameters Required Parameters

ViewContent

When a key page is viewed such as a product page, e.g. landing on a product detail page

value, currency, content_name, content_type, content_ids

None. For Dynamic Product Ads content_ids and content_type are required.

Search

When a search is made, e.g. when a product search query is made

value, currency, content_category, content_ids, search_string

None

AddToCart

When a product is added to the shopping cart, e.g. click on add to cart button

value, currency, content_name, content_type, content_ids

None. For Dynamic Product Ads content_ids and content_type are required.

AddToWishlist

When a product is added to a wishlist, e.g. click on add to wishlist button

value, currency, content_name, content_category, content_ids

None

InitiateCheckout

When a person enters the checkout flow prior to completing the checkout flow, e.g. click on checkout button

value, currency, content_name, content_category, content_ids, num_items

None

AddPaymentInfo

When a payment information is added in the checkout flow, e.g. click / LP on save billing info button

value, currency, content_category, content_ids

None

Purchase

When a purchase is made or checkout flow is completed, e.g. landing on thank you/confirmation page

value, currency, content_name, content_type, content_ids, num_items

value, currency. For Dynamic Product Ads content_ids and content_type are also required.

Lead

When a sign up is completed, e.g. click on pricing, signup for trial

value, currency, content_name, content_category

None

CompleteRegistration

When a registration form is completed, e.g. complete subscription/signup for a service

value, currency, content_name, status

None

Parameters

Here is a description for all the recommended parameters to be passed with the Standard events as desribed in the table above.

Parameter Name Parameter Description

value

Value of a user performing this event to the business

currency

Currency for the value specified

content_name

Name of the page/product

content_category

Category of the page/product

content_ids

Product ids associated with the event. e.g. SKUs of products for AddToCart event: ['ABC123', 'XYZ789']

content_type

Either 'product' or 'product_group' based on the content_ids being passed. If the ids being passed in content_ids 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'.

num_items

Used with InitiateCheckout or Purchase event. The number of items that checkout was initiated for

search_string

Used with the Search event. The string entered by the user for the search

status

Used with the CompleteRegistration event, to show the status of the registration.

Examples

// Standard event (can be used for conversion tracking
// and optimization in addition to audience building)
fbq('track', 'Purchase', {currency: 'EUR', value: 15.20});

<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=FB_PIXEL_ID&amp;ev=Purchase&amp;cd[currency]=EUR&amp;cd[value]=15.20"
/>

// Legacy conversion event (can only be used for conversion 
// tracking and optimizing)
fbq('track', 'PIXEL_ID', {currency: 'USD', value: 30.00});

<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?ev=PIXEL_ID&amp;cd[currency]=USD&amp;cd[value]=30.00"
/>

// Custom event (can be used for audience building and custom conversions)
fbq('trackCustom', 'MyCustomEvent', {custom_param: 'custom_value'});

<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=FB_PIXEL_ID&amp;ev=MyCustomEvent&amp;cd[custom_param]=custom_value"
/>

Using Parameters in Events

By passing customData into the track and trackCustom calls, you can collect data to build Custom Audiences or custom conversions. With custom data, you can define more granular data around events.

This has the added benefit of being able to use trackCustom in order to identify more specific audiences whose behavior is not covered by standard events. You can continue to pass customData into these events for to build more specific audiences. However, you can not track or optimize for conversions based on custom events at the current time. But, you can build custom conversions using custom events which you can then track or optimize for.

Examples

// Reach customers that viewed a product in the 'Shoes' category
// with a price greater than $100
fbq('track', 'ViewContent', {
  content_name: 'Really Fast Running Shoes',
  content_category: 'Apparel &amp; Accessories > Shoes',
  value: 149.99,
  currency: 'USD'
 });
  
// Multiple events can also be added to each page.  Ex: Reach visitors
// based on information about them and how they got to the page
// that Registered in the last n days
fbq('track', 'ViewContent', {
  content_name: 'The Avengers Trailer',
  content_category: 'Entertainment',
  value: 1.50,
  currency: 'USD',
  referrer: document.referrer,
  userAgent: navigator.userAgent,
  language: navigator.language
});

fbq('track', 'CompleteRegistration', {currency: 'USD', value: 0.75});

// You can use non-standard event names for audience building or custom
// conversions (for tracking and optimization).
fbq('trackCustom', 'FrequentShopper', {
  num_purchases: 8,
  average_order: 245.24,
  favorite_category: 'Sporting Goods'
});

Putting It All Together

There are many occasions where you may want to both build an audience and measure a conversion event at the same time. You can do so using the same event as long as you use standard events.

To do this, include both the base code and the fbq call underneath the base code on page load. The fbq call can either be inside the base code tag underneath the PageView track call or it can be inside its own script tag as long as it loads below the base code.

<!-- 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','//connect.facebook.net/en_US/fbevents.js');
// Insert Your Facebook Pixel ID below. 
fbq('init', 'FB_PIXEL_ID');
fbq('track', 'PageView');
</script>
<!-- Insert Your Facebook Pixel ID below. --> 
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=FB_PIXEL_ID&amp;ev=PageView&amp;noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

<script>
// Assuming a single item is purchased
fbq('track', 'Purchase', {
  content_name: 'Really Fast Running Shoes',
  content_category: 'Apparel &amp; Accessories > Shoes',
  content_ids: ['1234'],
  content_type: 'product',
  value: 199.50,
  currency: 'USD'
});

// Assuming multiple items are purchased
fbq('track', 'Purchase', {
  content_ids: ['1234', '4642', '35838'],
  content_type: 'product',
  value: 247.35,
  currency: 'USD'
});
</script>

When a page with the above code loads, the Facebook Pixel records an event named 'Purchase', measures the ad conversion and also enables you to define an audience or custom convesion based on event name and parameters.

Dynamic Events

Dynamic Events allow you to activate the Facebook pixel based on an action taken on the page, as opposed to automatically at page load. For example, if your "Add to Cart" button does not navigate to a new page, you may want to activate an event when the button is clicked.

In this example, we will activate a ViewContent standard event on page load. On the click of the "Add to Cart" button, we will activate an AddToCart standard event.

To do this, first load the Facebook pixel code that you wish to record on page load:

<!-- 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','//connect.facebook.net/en_US/fbevents.js');
// Insert Your Facebook Pixel ID below. 
fbq('init', 'FB_PIXEL_ID');
fbq('track', 'PageView');
fbq('track', 'ViewContent', {
  content_name: 'Really Fast Running Shoes',
  content_category: 'Apparel &amp; Accessories > Shoes',
  content_ids: ['1234'],
  content_type: 'product',
  value: 0.50,
  currency: 'USD'
 });
</script>
<!-- End Facebook Pixel Code -->

Then you need the Facebook pixel to record an AddToCart event on the click of an Add To Cart button. In jQuery this would look something like the following:

<!-- 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">
  $('#addToCartButton').click(function() {
    fbq('track', 'AddToCart', {
      content_name: 'Really Fast Running Shoes', 
      content_category: 'Apparel &amp; Accessories > Shoes',
      content_ids: ['1234'],
      content_type: 'product',
      value: 4.99,
      currency: 'USD' 
    });  
  });
</script>

Note that there are many methods of handling click events. jQuery is used here only as an example and you can choose your own method. This code can not be used as is, as it depends on the selector used to attach to the button click, and should include success and error handlers as to not impede the users progress in case of error.