Dynamic Ads

分类目录: Facebook像素

Dynamic Ads

With Dynamic Ads, you can automate delivery of multiple Facebook ads for your product catalog and reach different target audiences. Use the Facebook Pixel with Dynamic Ads to measure the effectiveness of your ads.

If you have a mobile app, you can track events using App Events.

Pixel set up guide for DA implementation

Who should read this document?

This guide is intended to help developers set up the Facebook Pixel on their web site to track events for Dynamic Ads (referred as DA below).

For more general information about Pixel, please refer to the help page about The Facebook Pixel.


This guide assumes that the reader:

  • knows what retargeting is,
  • knows that DA is for retargeting,
  • has already set up a Product Catalog in Business Manager or has been granted access to an existing Product Catalog
  • has the Product Catalog filled up with product information
  • is capable of modifying the frontend code for their web site template code

What is a Facebook Pixel?

A Facebook Pixel is a small piece of JavaScript code in your web site for tracking the visitors' behavior and actions in the web site. When a visitor interacts with the web site, pixel events are fired in response to his/her actions. A pixel event is a very lightweight http(s) request sent from the visitor's browser to Facebook's servers together with some extra information about that event, such as the page url that the visitor is viewing, product id or price of the product etc. Therefore, in order to enable the tracking, you will need to modify your web site template to insert some JavaScript code in certain pages.

Why is it important to set up the Facebook Pixel code on your web site?

Correctly setting up the pixel code is very important for DA because our machine learning algorithm relies on the visitor-product interaction data in the web site collected from the pixel code. Without these data, DA would not be able to make good recommendations to the potential customers with high probability to convert.

Overview

To set up the pixel, you need to:

  1. Obtain a Facebook Pixel ID from your Business Manager
  2. Associate the Facebook Pixel ID to your Product catalog in the Business Manager
  3. Insert some JavaScript code (aka Pixel event tracking code) in your web site template to track the visitors' interaction with products shown in the web site

How to obtain a Facebook Pixel ID?

To check if you have already got a Facebook Pixel ID, you can visit the Pixels tab in your Business Manager. The direct link to the page is in the format of:

https://business.facebook.com/settings/pixels?business_id={business manager ID}

If you have already got a Facebook Pixel ID, you should see a page similar to this:

If you haven't got a Facebook Pixel ID yet, you should see a page like below:

To obtain a Facebook Pixel ID, you will need to go to your Ad Accounts page in your Business Manager:

https://business.facebook.com/settings/ad-accounts/?business_id={business manager ID}

And you should see something similar to the screenshot below:

Select the Ad Account you would like to create the Facebook Pixel ID under.
Click “View Ad Account in Ads Manager” link in the above screenshot. It should bring you to the Ads Manager for that Ad Account which is something similar to the screenshot below:

Select ToolsPixels

If you have already created a Facebook Pixel under this account, the page would be showing some graph showing the traffic to your web site or something similar to the screenshot below:

Otherwise, if you have not created a Facebook Pixel for this Ad Account before, you should see this page:

and from this page you can click the “Create a Pixel” button to give a name to the Pixel you are going to create. A pop-up window titled "Create a Facebook Pixel" will be displayed for you to fill in the name for the Facebook Pixel.

In the screen above, after confirming the Pixel Name, click “Create Pixel” to proceed.

Up to this point, you can click the “x” button at the upper right corner to close the pop up box and a Pixel ID can be found in the screen below:

Please note down this Facebook Pixel ID. It shall be used in the JavaScript code we need to insert into the web site template code.

Associate the Facebook Pixel ID with one or more Product Catalogs

At this point we assume that you have created a Facebook Pixel, a Product Catalog and have already populated the Product Catalog with product data by setting up Product Feed pull schedule or by manual uploading the product feed data file to the Product Feed.

We need to link up the Facebook Pixel with one or more Product Catalogs with the following steps:

In your Business settings page, choose Product Catalogs from the left menu:

Then, select the Product Catalog you want to use if you have more than one Product Catalogs under your Business Manager.

In the above screen, click “Associate Sources” button

If you have already created a Pixel following the instruction above, you should see the Pixel(s) available to you similar to the screenshot below. Check the one you would like to associate with this Product Catalog and click “Save”.

Insert Pixel event tracking JavaScript code in your web site template to track the visitors' actions

What web site visitor actions to track for DA?

There are 3 key user actions that must be tracked in the web site for DA:

  1. When a visitor views a product detail page
  2. When a visitor adds a product into the shopping cart
  3. When a visitor confirms and finishes the payment for a purchase

Each of the 3 actions indicate a different level of user interests to the particular product items. We assume that a web site visitor shows potential interest in a product item if s/he views the product details page. Adding the item into the shopping cart indicates a stronger interest in the product item. Making a purchase is the strongest signal that the web site visitor indicates. Collecting all these signals derived from the web site visitors' actions on the products would help our recommender system to make better recommendations and serve your ads to the Facebook users who has the better chance to convert and eventually lead to better ROI.

Getting the base javascript code for tracking the pixel events

You will need to modify the web site template by inserting some JavaScript code snippets in different pages. In Facebook we provide a sample base code for tracking page views on your web site to begin with. Please follow the steps below to get the sample base code in your Ads Manager.

Visit the Ad Accounts page of your Business Manager:

https://business.facebook.com/settings/ad-accounts/?business_id={business manager ID}

And select the Ad Account you would like to create the Facebook Pixel under.

Click “View Ad Account in Ads Manager” link to go to its Ads Manager in the screen:

It should bring you to the Ads Manager of the chosen Ad Account.

Select ToolsPixel

If you have already created a Facebook Pixel under this Ad Account, the page would look similar to this screenshot:

If you don't see the screen above, you may need to obtain a Facebook Pixel ID first. Please follow the instructions under “How to obtain a Facebook Pixel ID?
Otherwise you should be able to click the “Actions” button and then click “View Pixel Code” option as shown in the screenshot below.

A pop up box will be displayed showing the sample Facebook Pixel base code for tracking the PageView event in a text area highlighted below in light blue. Click to select the sample code and copy it to paste to the end of the <head> section, before the closing head tag ( </head> ) of your template.

Here is an example of the Facebook Pixel 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');

fbq('init', '<FACEBOOK PIXEL ID>'); //### <-- Please fill in your pixel ID
fbq('track', "PageView"); //### <-- Please append other events after this line
</script>  
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=<FACEBOOK PIXEL ID>&ev=PageView&noscript=1"
/></noscript>
<!— End Facebook Pixel Code -->

For readers who are new to Facebook Pixel code implementation, please read on the next paragraph. For readers who have been using pixel tracking code, please identify if you have been using the latest Facebook Pixel code first. We highly recommend to migrate all Pixel code to the latest version. Please refer to the section “How to identify the pixel code I am using?” below before proceeding from this point.

If your web site has never implemented any pixel code before, as mentioned above, you can start with copying and pasting the sample code to your web site template. Then we shall explain how does the Facebook Pixel tracking code work and how to modify them to accommodate for DA implementation.

What to modify in the Facebook Pixel base code?

The Facebook Pixel code is put under a <script> tag and also optionally a <noscript> tag. Most part of the code should NOT be changed except for the followings parts:

  1. Pixel initialization, i.e. the line fbq('init', '<FACEBOOK PIXEL ID>');
  2. Event tracking, i.e. lines after the fbq('track', 'PageView');
  3. noscript, i.e. the content between the tags <noscript> and </noscript>

Below is the details about what to change for the abovementioned parts:

Pixel initialization:

Please replace the <FACEBOOK PIXEL ID> in the line fbq('init', '<FACEBOOK PIXEL ID>'); with the Facebook Pixel ID for the web site you wish to track, that your Ad Account has access to.

Events tracking:

In the sample code, we see a line that would send the “PageView” event as the line:

 fbq('track', 'PageView');

is executed. “PageView” event is for logging page views as described by its name. The page view by visitor data can be used for building Custom Audiences and custom conversions that match referral URLs. This event should not be removed. Instead there are 3 other events that are critical for DA (ViewContent, AddToCart and Purchase) which you would need to insert in your web templates in addition to the page view event tracking code. The event tracking call should be in this format:

fbq('track', /* eventName */, {/* customData */});

where the eventName in the sample code above should be replaced with one of the following event names: ViewContent, AddToCart and Purchase while the customData in the sample code should be a list of key-value pairs containing some additional information about the event being fired. Please note that the event names are case-sensitive and the spellings must be exact. More details about what event to call and what custom data are needed shall be discussed in the next section.

noscript:

This piece of code would be run if the browser does not support JavaScript. It would make a request that is very similar to the pixel event created by JavaScript code above. Note that the parameter values should be updated accordingly for each event triggered.

<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=<FACEBOOK PIXEL ID>&ev=PageView&noscript=1"
/></noscript>

There are over 9 Standard Events we can implement: ViewContent, Search, AddToCart, AddToWishlist, InitiateCheckout, AddPaymentInfo, Purchase, Lead, CompleteRegistration although DA just need 3 of them.

For further information about “Standard Events”, please refer to these help doc:
  • What are standard events and how do I use them? (in Help Center)
  • Standard events (in facebook for developers)

The 3 events needed for DA

We only need 3 of the standard events mentioned above for DA, namely: ViewContent, AddToCart and Purchase. These 3 events corresponds to 3 kinds of web site visitor actions mentioned above in the section titled “What web site visitor actions to track for DA?”, i.e.

  1. When a visitor views a product detail page, we should track it with the ViewContent event
  2. When a visitor adds a product into the shopping cart, we should track it with the AddToCart event
  3. When a visitor confirms and finishes the payment for a purchase, we should track it with Purchase event

The parameter values need to be bundled along with each of these 3 events shall be discussed below.


ViewContent event

The ViewContent event should be triggered when a web site visitor loads the product detail page. This event should also bundle the following information:

  1. content_ids: the list of product ID or product group ID in the format of array
  2. content_type: either “product” or “product_group”. “product” means the content_id represents a product while “product_group” means the content_id represents a group of products that are all essentially the same product but with different features for example different sizes of the same shirt. We will explain the use of “product_group” in more detail later in this document. For now let's use “product”.

For example, if there is a product detail page for a product that has id of 'a1234', the following function should be put right after the “PageView” call in the sample code above:

fbq('track', 'ViewContent', {
    content_type: 'product', //either 'product' or 'product_group'
    content_ids: ['a1234'], //array of one or more product ids in the page
    value: 4.99,    //OPTIONAL, but highly recommended
    currency: 'USD' //REQUIRED if you a pass value
});

Please refer to the section Product Group? What's that for? for more information about the correct use of the product group related parameters


AddToCart event

The AddToCart event should be triggered when a web site visitor puts an item to the shopping cart. Again this event should also bundle the following information:

  1. content_ids: the list of product ID or product group ID in the format of array
  2. content_type: either “product” or “product_group

The shopping cart is usually implemented as an AJAX call, so the code should be placed inside the event function call triggered by the button for adding items into the shopping cart. For example, if a web site visitor adds a product with product id of 'a1234', worth 4.99 USD to their cart, the call should be done as below ( assuming the button to add a product to cart has id of “addToCartButton”):

<button id="addToCartButton">Add To Cart</button>

<script type="text/javascript">
// Add Pixel Events to the button's click handler
$('#addToCartButton').click(function() {
    fbq('track', 'AddToCart', {
        content_ids: ['a1234'],
        content_type: 'product',
        value: 4.99, //OPTIONAL, but highly recommended
        currency: 'USD' //REQUIRED if you pass a value
    });
});
</script>

Please refer to the section Product Group? What's that for? for more information about the correct use of the product group related parameters


Purchase event

The Purchase event should be triggered when a web site visitor finishes the payment and arrive at the thank you page or transaction completed page. This event should also bundle the following information:

  1. content_ids: the list of product ID or product group ID in the format of array
  2. content_type: either “product” or “product_group
  3. value: the total amount of product items in the shopping cart
  4. currency: the currency of the web site, it would be taken as “USD” by default if not specified

For example, if a customer has purchased 2 products with id of 'a1234' and 'b6789' with values of 4.99USD and 10USD respectively, the following function should be put right after the “PageView” call in the sample code above:

fbq('track', 'Purchase', {
    content_type: 'product', //either 'product' or 'product_group'
    content_ids: ['a1234', 'b6789'], //array of one or more product ids in the page
    value: 14.99, //REQUIRED
    currency: 'USD' //REQUIRED
});

To summarize what we have covered so far concerning the actions need to be tracked for DA, their corresponding events and the parameters needed, please refer to the following table:

When a visitor … Event Name Parameters needed in customData field

views a product detail page

ViewContent

  • content_type (Required),
  • content_ids (Required),
  • value (optional, but highly recommended),
  • currency (optional, but if value is present, it is necessary to pass a value or it would be regarded as USD by default)

adds a product into the shopping cart

AddToCart

  • content_type (Required),
  • content_ids (Required),
  • value (optional, but highly recommended),
  • currency (optional, but if value is present, it is necessary to pass a value or it would be regarded as USD by default)

confirms and finishes the payment for a purchase

Purchase

  • content_type (Required),
  • content_ids (Required),
  • value (Required),
  • currency (Required)

For more information about other parameters that can be passed for the standard events, please refer to the Pixel Code Reference → Standard and Custom Events #parameters

How to identify the pixel code I am using?

For those who have already got pixel code in your web site frontend code, please walk through the following steps to check if you have already been using the latest pixel code. Please update your code to the latest code set if you find any traces of the followings:

Please look for: If you see… instead of…

the script source file included for the pixel code is from

fbds.js (such as the link: //connect.facebook.net
/en_US/fbds.js)

fbevents.js (i.e. //connect.facebook.net
/en_US/fbevents.js)

the pixel ID initialization or event tracking function calls

_fbq function

fbq

the event tracking function calls

fbq.push(['track', ... ])

fbq('track', ... )

Please update your code to the latest code set by taking reference to the sample code obtained by following the steps in the section Getting the base javascript code for tracking the pixel events

How do I verify if the pixel tracking code is set up correctly?

There are 2 parts we should look at to make sure the pixel are set up correctly:

  1. Use the Facebook Pixel Helper to check the event data sent out from the browser
  2. Check the Facebook Pixel event statistics page for event data captured in Facebook backend

Facebook Pixel Helper

We highly recommend you to install the Facebook Pixel Helper extension to your Chrome browser for verifying and diagnostic of whether the Facebook pixel event tracking code is properly inserted in your web site. To check if you already have this tool, please check if there is the pixel helper icon at the upper right corner of the browser, as shown in this screenshot.

If you don't have it installed yet, please follow the instructions in Facebook Pixel Helper page to download and install it.

Use the Facebook Pixel Helper to check the event data sent out from the browser

  • Open the product detail page, add to cart page (or click on the add to cart button), or the payment confirmation page
  • Click the pixel helper and see if the Facebook Pixel ID, event name (for legacy reason we name it as Event ID in the helper tool), content_type and the array of product ids in the content_ids are captured correctly. Optionally, check if the currency and value of the shopping cart is captured too.
  • ideally, if the pixel is loaded correctly, it should show that “Facebook Pixel loaded successfully” – The screen cap below shows an example of ViewContent event that is successfully fired.

Check the Facebook Pixel event statistics page for event data captured in Facebook backend

The Facebook Pixel event statistics page can be found under the Ads Manager in Business Manager. You can see if there are event data captured in server-side (Facebook backend):

  • Follow the steps listed in the section “Getting the base javascript code for tracking the pixel events” to go to the pixel event statistics page or visit your Business managerBusiness settingsAd Accounts → {your ad account} → Ads managerToolsPixel
  • Click on the Events tab
  • You should see the Pixel statistic page looks similar to teh screenshot below:

  • Check out the following parts in the page:
Label in screenshot What to see

i

Total Traffic graph

The daily event count is shown here as a line graph. If the pixel is correct set up, you should see some counts

ii

Events tab

Under this tab, the events retrieved by FB's backend and their counts are shown here. As mentioned above, the essential events needed for DA are:

  • ViewContent
  • AddToCart
  • Purchase

iii

Pixel status

if there are any events ever fired from the Pixel tracking code to FB's backend it should become “Active”, otherwise it is “No Activity Yet”

Please note that it may take some time for the events to show up in the pixel event statistics page.

Facebook Pixel helper troubleshooting for DA

Here are common problem cases you may see in pixel set up:

Facebook Pixel took too long to load

For AddToCart event, if the shopping cart implementation is server side based and is fired in a page load, it should be very similar to the screenshot above for the ViewContent page. Otherwise if it is implemented using AJAX calls, it should show something similar to the screenshot below after clicking the “Add to cart” button. Note that even though there is a warning from the helper may complain that “Facebook Pixel took too long to load”, it can be ignored. It is because the pixel event was fired when the add to cart button is clicked, which usually occurs in arbitrary length of time after the page load is completed. Just make sure the Pixel ID, event name (for legacy reason we name it as Event ID in the helper tool), content_type and the array of product ids values in the content_ids are captured correctly will do. Optionally, check if the currency and value of the shopping cart is captured too. So long as the above values are correctly captured the pixel code should be working fine.

Facebook Pixel is not paired with any product catalog

If you see this error message, it means the Pixel ID has not been associated with any Product Catalog in your Business Manager.

Please refer to the section “Associate the Facebook Pixel ID with Product Catalog” for instructions about how to associate a Product Catalog with the Facebook Pixel ID.

For more information on troubleshooting the Pixel set up on your web site, please refer to these docs:

  • How do I install the Facebook pixel and check that it's working? (in Help Center)

  • Troubleshooting Pixel Errors (in facebook for developers)

Product group? What's that for?

When you have products that are very similar to each other but just differ by some properties such as size or color, you should group them together under the same product group and assign them the same product group id.

For example, t-shirts having the same design but of different sizes, each size may have their own product ID (e.g. c2468-S, c2468-M, c2468-L) in your inventory system but they should be grouped together and assigned a product group id (e.g. c2468) to prevent t-shirts of the same style but different sizes to be shown in the same ad to a customer. In this case, we should use the following settings for these products:

content_type: “product_group”,
content_ids: ["c2468"]

How to create Ad Account?

Go to the Business Manager main page:

By clicking Business Settings link in the above screen, we will be a screen similar to below:

In the above screen, click “Ad Accounts” to see if there are any Ad Accounts created already yet:

If you don't have any Ad Accounts yet, you should see the above screen. Click “Add New Ad Account” button to create a new Ad Account and follow the steps below.
Otherwise, please select the Ad Account you want to use to obtain the Pixel ID.

After clicking the “Add New Ad Account” button, you should see the pop-up box below:

Select the appropriate option, if you are the web site owner, you may want to select the “Create a new ad account” option.
If you are an agency or reseller using other's Ad Account, you should follow the guide titled "How do I share my Facebook pixel?" to learn about the best practice for using Pixel ID belonging to other businesses.

Fill in the form below accordingly:

Follow the on screen instructions and complete the form. An Ad Account should be created after clicking the “Create Ad Account” button.

How to create Product Catalog?

Go to the Business Manager main page:

By clicking Business Settings link in the above screen, we will be brought to the corresponding page:

In the above screen, click “Product Catalog” to see if there are any Product Catalogs created already yet:

If you don't have any Product Catalogs yet, you should see the above screen. Click “Add New Product Catalog” button to create a new Product Catalog and follow the steps below.
Otherwise, you can select the Product Catalog you want to use from the list of Product Catalogs under your Business Manager.

After clicking the “Add New Product Catalog” button, you should see the pop-up box below:

Select the appropriate option, if you are the web site owner, you may want to select the “Create new catalog” option.
If you are an agency or reseller using other's Product Catalog, you should ask the owner to grant permissions to access the Product Catalog to you.

Fill in the form below accordingly:

Type in the text field for the Product Catalog Name with a name describing the products in this Product Catalog. A new Product Catalog should be created after clicking the “Create Product Catalog” button.