facebookmarketing

How to use the Facebook img tag to fire pixel events

Before implementing the img tag, the previous article should be reviewed: it discusses some of the edge cases and situation where this approach is most appropriate. I do not recommend using the raw img tag to track your Facebook Events. The best-practice and the most future-proof way (i.e. to ensure you get the best/latest pixel functionality) to implement the Pixel is using the Facebook JS code.

That being said: there are situations where it may not be ideal. We will go over

What is the img tag and how does it work with Facebook Events?
Anatomy of an FB img Pixel tag
- Required parameters
- Other Key Parameters
Tool to build img tags

What is the img tag and how does it work with Facebook Events?

The img tag is an HTML tag that uses the “src” portion of the image to implement Facebook Events. When the img tag is placed in your page’s markup – like any normal image that resides in your content – the browser initiates a request to the Facebook event endpoint to record the tracking event.

Events (Standard, Custom etc.) and parameters can be defined in the URL placed in the src of this tag to ensure the correct information is being passed in. At heart, the Facebook JS Pixel code creates these sort of FB event requests on-the-fly and in a scalable way: the img code can be considered a manual way to generate these calls.

Some of the differences (currently negligible – but this can change very quickly with new pixel releases) between the functionality of the pixel and img tag are discussed more in depth in this article.

Anatomy of an FB img Pixel tag

The general structure of an img tag is the following:

<img height=”1″ width=”1″ style=”display:none” src=”https://www.facebook.com/tr?id=<PIXEL_ID>&ev=<EVENT_NAME>&noscript=1″ />

img: the image tag is a 1×1 pixel image that can be placed on the page that you want to send the FB Event
src: the src attribute contains the URL we must construct with the appropriate event names/parameters to ensure the browser invoke the call to the FB Event endpoint.

Parameters must be tacked on to the Query String (i.e. the part after the https://www.facebook.com/tr?) accordingly.

Required Parameters

The only required parameters are the:

id: Pixel ID – <PIXEL_ID> – (numeric id)
ev: event name – <EVENT_NAME> – (Standard Event or Custom Event)

You will need to replace these values (including the angled brackets) with the values that you want.

Other Key Parameters

Though there are only two required parameters there are other key parameters that may be needed for particular events and specific FB products (e.g. content_ids, content_type, value, currency for certain Dynamic Ads Events).

Parameters can fall into two types of classifications:

Custom Data (generally any parameter that is not the pixel id or event)
User Data (for Advanced Matching functionality)

Generally, any parameter that is not the “id” (pixel id) or “ev” (event) parameter will be prefixed (and then followed with the parameter name in angled brackets) with:

cd: for Custom Data
ud: for User Data (full set of parameter values are documented)

Putting it all together:

Suppose you had a Purchase event on your checkout page and were running Dynamic Ads (so you’d need the content_ids, content_type, value and currency) and are passing in the hashed customer e-mail for Advanced Matching:

id: 12345678
ev: Purchase
content_ids: [123,234]
content_type: product
value: 100
currency: CAD
e-mail: jsmith@example.com

would translate to the following parameters:

id: 12345678
ev: Purchase
cd[content_ids]: [123,234]
cd[content_type]: product
cd[value]: 100
cd[currency]: CAD
ud[em]: 6e3913852f512d76acff15d1e402c7502a5bbe6101745a7120a2a4833ebd2350

If you want to use Advanced Matching with the img tag, you must properly normalize and hash the value with the SHA-256 algorithm before adding it as a parameter to the img tag src value.

Eventually, each of these parameters must be joined together with the & and the values itself must be URL Encoded as expected when constructing valid URLs. so the src value should look like:

This final URL should be placed within the src attribute within the img tag.

This tag should also be placed in the final checkout page.

Tool to build img tags

The above steps to get all the parameters properly placed and encoded properly into the src attribute for each event is fairly onerous /maintenance-heavy and could be error-prone. This is one of the benefits of simply using the FB Pixel JS code to construct these calls automatically in an understandable and scalable way.

Barring the use of the pixel code, you can try using Farmer’s Pixel Builder tool (free):