How to Place The Facebook Conversion Pixel on Your Website

How to Place The Facebook Conversion Pixel on Your Website

June 3, 2014

In parts one and two of this Custom Audiences pixel series we discuss 3 Key Marketing Objectives for Custom Audiences and how to use pixels to create and segment a Custom Audience. In this third installment we show you how to place pixels into the actual code on your site.

The Custom Audiences pixel is just a few short lines of Javascript code. The code is invisible to your website visitor and can only be seen on the back end of your website. When someone opens a page where the pixel is embedded, it executes or “fires.” The type of pixel and its placement – in which element, and in the hierarchy of the code – affect how quickly it will run, how much information it relays back, and how compatible it is with multiple browsers.

Below, we outline which type of pixel is recommended for Facebook campaigns and show you where to place it in the code of your desktop and mobile websites to ensure optimal performance.


Pixel Types: Javascript vs. Image Tags


Although a Javascript pixel is the standard code generated by Facebook, advertisers can also opt to place the Custom Audience pixel as an image tag, which looks like this: <img>.

Image tags are sometimes necessary; however, if the choice is available, we highly recommend using the Javascript tag.

Image tags and iframes often function suboptimally because browsers treat them differently than their Javascript counterparts. Internet Explorer for instance is notorious for not saving cookies in iframes, amongst a host of other incompatibilities.

Image tags also lack some of the basic functionality of Javascript tags. Here are a few things the Javascript pixel can that the image pixel can not:

  • Fire multiple times on each page load
  • Control when an event should fire (i.e., upon a button click).
  • Load asynchronously

For maximum compatibility and functionality, use the Javascript version of the Custom Audiences pixel. If the image pixel must be used, place the <img> tag between the <noscript> portion of the Javascript tag.


Where to Place the Pixel on the Page


The Custom Audiences pixel loads asynchronously – which keeps load times down as the user browses the page – but to further enhance loading speed, place the code as close to the top of the page as possible.

Websites load top to bottom – the header loads first, followed by the remaining components and closed out by the footer. You want your pixel to load as early as possible in this process for two important reasons:

  1. Quickly captures the audience data before they are able navigate away.
  2. Reduces the chance a third party will block the pixel from executing.

For best results, place the pixel directly into the HTML of your header right before the </h> tag. The time between the header and footer loading may seem incremental, but every .5 second matters when it comes to capturing data.


Mobile Pixel Placement


All of these tips and practices hold true for mobile Custom Audience pixels, but if you have a separate mobile site – as opposed to a responsive one – make sure to embed the Custom Audiences pixel on every page of that site as well.

The power to track your customers’ behavior on mobile and desktop, and accurately retarget them on both platforms is select to Facebook – don’t take this ability for granted! Experiment retargeting your mobile web or visitors on their desktop or vice versa. Online purchases still primarily take place on desktop computers, therefore, capture mobile web visitors while they are browsing, then show them an ad for your business or product while they are on their computer and ready to buy. Same goes for mobile apps – once they’ve checked out your website on their desktop, retarget them with a mobile app install ad on their smartphone or tablet.

Learn more about cross-platform retargeting using Custom Audiences and how this feature can be used to achieve your marketing goals in our free eBook Mobile Retargeting for Retailers.