The Anatomy of a Pixel

Pixel

Pixels are an almost ubiquitous technology in the world of online advertising and e-commerce. Whenever you browse the web and whenever you load a page, there is a good chance that the browser is calling a pixel.

Not just one, but likely many.

But what exactly is a pixel? Even in the online advertising industry, many people can’t really explain what they are or how they work. They know just enough to get by and don’t learn any more.

This is something that we are going to try to remedy for two reasons. One, the technology itself is interesting and two, knowledge is power.

It’s always good to understand how the technologies work that help you find, target, and retarget your clients, track conversions, and make money. 

Understanding how the tech works will help you make better decisions.

In that vein, prepare for a crash course in Pixels!

In a rush? Skip straight to the essentials

So what is a pixel?

At its most basic level, a pixel is just that: a pixel on your screen. That is to say that a pixel is a specific point on your screen that can only display one color at a time. Your screen is made up of many hundreds of thousands of pixels. Each one displays a single color but, when viewed together, they form a coherent image.

When you buy a monitor, for example, one of the things listed in the product description is the resolution. A common, older screen resolution was 1026 x 768. That’s the length and height of the screen by pixel count. 

This means that, in total, you have 787,968 active pixels on an old 1026 x 768 screen.

So what good is a single pixel image lost among the hundreds of thousands of other pixels? The user probably won’t even be able to find it.

But that’s not the point. We don’t want him to see it. Instead, the pixel serves a whole other purpose. 

Nota Bene: When the term “pixel” is used in the online advertising industry, it almost always refers to the script calling the image! Not the 1×1 image it calls from a given server.

What’s important is that the pixel is loaded.

In terms of conversion tracking and retargeting, it’s the loading of the pixel that is important and not the actual image itself (which is generally invisible itself). 

By loading this image from another domain, two things are made possible. First of all, a third party can be sure that a particular page on an unrelated site has been loaded. This makes it useful for conversion tracking.

By putting a tracking pixel on a Thank You page, a third party can be made aware that a conversion has occurred. 

This ability to communicate loading is vital for campaign optimization with platforms like Facebook. This way, Facebook can learn that a specific user that was sent to the site ended up converting (bought something, signed up, etc.). Once Facebook knows what kinds of users are conerting, it can optimize the campaign toward similar users in order to increase the efficiency of the advertisements.

Pixels can also place cookies belonging to a third-party domain. This is extremely important for retargeting, and we’ll get back to this in a minute.

But first, let’s see what a “Pixel” looks like under the hood.

This is what a pixel looks like (taken from Facebook’s site)

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

As you can see, the code itself is relatively short and simple. Most of the real power of the pixel isn’t actually visible here. The real magic occurs on the server that the pixel calls and the response.

Pixel Process – What happens when it fires?

The code for a pixel generally lives in the <header> section of the actual HTML for a given page.

One often hears of a pixel “firing.” When a pixel fires, it means that the page downloaded the pixel. 

When someone arrives on a page or performs a given action, the javascript pixel code is read, and the 1×1 pixel image is loaded from the domain to which the pixel points. 

This whole process exists to solve primarily two problems: 

Two Problems, One Pixel

For e-commerce and online advertising to work, two things need to be possible. 

First, advertisers and advertising platforms need to be able to track conversions on third-party sites. As described in the case of Facebook, advertising platforms cannot optimize ads and targeting if they don’t know which clicks are leading to conversions.

Further, some platforms allow the client to pay by conversion, so in this case, it is even more critical that platforms register the conversions and not just the advertising site itself.

The other problem is tracking. 

A cookie is a tiny text file that a website can place on a user’s browser. It can store information about the user and his actions on the site and, upon his return, the site can read this information. Cookies can store information such as items in cart or last article read. The website can then use thsis information again for the next session.

The problem here is that only the domain that places the cookie has permission to retrieve and read it.

This makes retargeting difficult because the ad provider or server cannot read the information that their client may have on a given user. Imagine that a user adds three books to his cart, but then leaves to read the news. It would be ideal if the news site advertised those same books in order to remind him to finish the purchase.

This process is called retargeting, and it works exceptionally well. The problem is that the cart information stored in the e-commerce site’s cookie is inaccessible to the advertising platform. 

Pixels solve this problem.

Conversion Tracking

First, let’s look at how they handle conversion tracking because it is quite a bit simpler than retargeting. 

To come back to our Facebook example, let’s say you want to run a campaign on Facebook. One of the things that you’ll need to do is integrate Facebook’s pixel into your site so that you can track conversions. 

This is necessary because Facebook’s main attraction for advertisers is the incredible wealth of information it has on its users. That information allows it to narrow down audiences that are particularly interested in certain things and therefore show them specific products.

By integrating their pixel into the header section of your Thank You page (i.e., the page that is seen after a purchase takes place), the site is notified that this user lead to a conversion. 

When the page is loaded, the JS script runs and loads the pixel. By loading this little image, the site understands that a conversion has occurred. 

Ad Tracking and Retargeting

Ad Tracking and retargeting is the other primary issue that can be solved, at least to an extent, with pixels. 

As we discussed earlier, one of the most common tactics used in online advertising is a technique called retargeting. This is when a user performs a particular action (perhaps he looked at a page or put something in a cart). Once he does this he becomes prime retargeting material. 

He’s already made steps toward a specific purchase, subscription, or product — retargeting attempts to get him to reach the destination.

However, because cross-site cookie reading is near impossible (since only the issuing domain can access its cookies), a different solution is needed. 

With a pixel, the user’s actions can be recorded, and a new cookie can be placed on the browser. One that isn’t attached to the actual e-commerce site’s domain. This third-party cookie could be attributed to any number of ad networks. 

Since the cookie was placed by the ad network, it can be read by the same ad network (the issuing domain) on a different site that is in some way attached to that ad network. They could have a direct relationship with them, or it could be a function of cookie matching/syncing

This way, when the user loads the new page, a retargeted ad promoting precisely what he has just added to cart and a different site can be shown. 

None of this would be possible without the pixel. 

Asynchronous loading

One thing to quickly note about Pixels is that they often load “Asynchronously.” This means that other parts of the page are prioritized and load first while the pixel might fire milliseconds later. 

This is done for several reasons, but the primary one is to make sure that the page load time remains low. According to research, 2 out of 5 users will abandon your site if it takes longer than 3 seconds to load. 

For this reason, both publishers and advertisers have a lot to lose if page load time gets out of hand. And loading a bunch of pixels can lead to a severe decline in user experience and thereby reducing page views and income. 

Sever to Server Tracking

While the pixel has enabled the development of a more interactive and personalized advertising experience, it is also on its way out. At least in terms of conversion tracking. 

Pixel-based conversion tracking is not perfect. It can be interrupted relatively easily by popular browser add-ons or simple actions. 

For one thing, should the user clear his cache between different steps of the process, the pixel might not fire correctly. Maybe the user blocks cookies entirely, or perhaps he has installed a NoScript extension. 

There’s simply a myriad of things that could interrupt Pixel-based conversion tracking. 

For this reason, an increasingly large portion of the industry is moving to a means of conversion tracking called “Server to Server” or S2S

With this kind of conversion tracking, the user information and conversion action are actually stored in the site’s URL. 

Since it’s the URL that is now reporting the conversion, it is not susceptible to the vast majority of things that could interrupt pixel-based conversion tracking.

Conclusion

The lowly pixel has over the last few years enabled enormous growth in the digital advertising industry. It has allowed for cross-site and cross-platform conversion tracking. It has allowed for cross-site retargeting and significantly more personalized (and thereby, more effective) advertising. 

While it very well may be approaching its twilight years in terms of conversion tracking, it is going to be far more difficult to dislodge insofar as cross-site user tracking and retargeting. 

By now, you should have a much better idea of what a pixel is precisely and why they’re used so often in the digital advertising industry.

But here are the major takeaways:

Quick Recap

A “pixel” is a small JS (javascript) script that calls on a 1×1 resolution image. This image is loaded from a different server when a user lands on a given page.

This action can serve several different purposes. One of the most common is the declaration and reporting of a conversion to a third-party site. This is generally an advertising platform like Facebook getting confirmation that a user they sent converted. 

It can also be used as a workaround to allow a third party to place cookies on a user’s browser. A workaround is needed because domains are limited to reading cookies that they themselves placed. 

This allows for pixels to be used in the placing and reading of third-party cookies that allow ad platforms to retarget users across a variety of websites.


Mobinner is a high-performance Demand-Side Platform. Since 2017, we’ve been helping clients build brands, acquire users, and drive conversions. See how Mobinner can help you meet your goals. 



Leave a Reply

Your email address will not be published. Required fields are marked *

Share via
Copy link
Powered by Social Snap