How To Implement Facebook’s Upgraded Custom Audience Pixel

Craig Wilmott -

Implementing Facebook's Updated pixel is pretty straight forward and can be done in three simple steps outlined below. 

  1. Implement the new Audience pixel
  2. Adapt the new pixel to track conversions
  3. Remove the old Facebook pixel

Note: If you've previously implemented conversions events for Dynamic Product Retargeting ads you should already have the majority of the below steps already in place.

1) Implement the New Pixel

The first step simply requires the following code into each page of your website, just before the closing </head> tag.

<!-- Facebook Custom Audience 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>&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Custom Audience Pixel Code -->

 This is what we call Base Code.

Note: You need to remember to replace <FB_PIXEL_ID> with your own pixel ID — the one associated to your account, NOT the ones used to track conversions.

You can find your pixel IDs by following these steps:

  1. Go into your StitcherAds account, and on the left column select 'Pixels'
  2. You'll find your WCA in the right hand panel of the pixel overview.

 

2) Adapt the code to track conversions events.

So far we have only implemented the pixel code required to create audiences.

Tracking conversions requires adding some extra code as part of the base code — but only on the pages where the conversion will happen i.e. Purchase (remember that the base code needs to be implemented in ALL pages of your website). 

It is very important to remember two things:

  • The base code needs to be loaded before the conversion tracking code.
  • The conversion tracking code is part of the same script that contains the base code, and thus it must be included before the closing </script> tag.

Considering these two rules, the code for your upgraded pixel should have the following structure (the following is just an example)…

 

The structure of the conversion code could vary depending on the event being tracked, but it will look similar to the following.

fbq(‘track’,  ‘EVENT NAME’, {

PARAMETER_1:‘PARAMETER_VALUE’,

PARAMETER_2: ‘PARAMETER_VALUE’,

PARAMETER_3:PARAMETER_VALUE,

PARAMETER_4:  ‘PARAMETER_VALUE’ });

 

Example:

// 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 & Accessories > Shoes',
  content_ids: ['1234'],
  content_type: 'product',
  value: 0.50,
  currency: 'USD'
 });

 

You can also track several conversions in the same page. All you’d need to do is add another piece of extra code — always before the closing </script> tag.

3) Remove the old pixel

Once you have included the new pixel in your website, including the code to track conversions in specific pages, you are ready to remove all previous pixels.

 

Comments

Powered by Zendesk