Abstract

The first time i had to integrate a Tiktok pixel into a website, I was a little intrigued as to why it was named as such. At the time however, i thought nothing of it. As time went on however, i was exposed to a lot more of these integrations, and they all surprisingly had the same naming structure. Tiktok Pixel, Google Pixel, BVOD Pixel, Facebook Pixel. I was confused; could it just be a coincidence?

Well, i'm here to tell you it certainly isn't, and the answer is a lot more interesting than i first thought!

Origin of the 'Pixels'

Since the early days of e-commerce, tracking has been the name of the game. Any additional insight these big companies could retrieve about a customer is invaluable to them. It could help them increase sales, track user traffic, track user data; and a whole heap of other things! You'd be surprised the amount of information the online boutique you bought your new jeans from has about you...

Enter the 'Pixel'

Now that i understand the origin of the pixel, the name actually makes a lot of sense. A 'pixel' in general terms, is the smallest unit of a digital image on your computer screen. It might be hard to see right now, but i'm sure you've been exposed to oh so many youtube videos back in the day where you could quite literally count the amount of pixels. Extrapolating this definition, tracking pixels were first made as exactly that! A 1x1 pixel displayed on the webpage for tracking purposes.

But how is it tracking?

I was confused about this at first too, but it's quite simple really. The 1x1 image is hosted on a server, and every time that image is loaded, the server records this information as a 'hit'. As much information as possible about this image load event is tracked and logged on the server, and from there tracking service companies can work there magic to use this data and mark it as a conversion, or page-view or any multitude of events they may need, ultimately aiding companies to collect even more data.

Take this example HTML snippet below:

HTML
<img style="position: absolute;" src="https://cdn.exampletrackingservice.com/>

Every time this image is loaded on the website it was placed in, the CDN server will log the request for tracking purposes! Simple, elegant, and definitely not visible, as it's just a 1x1 pixel. To illustrate just how tiny this is, there is actually one pixel located on this blog, that's a different color to the body. Try finding it!

Now imagine that pixel was the same color as the body. Finding a 'pixel' in a haystack. That's the saying right?

It's also extremely performant.

As web standards and technology has developed, JavaScript based tracking pixels are now the most common; usually either by adding the script in website's codebase, or via injection from tag manager. However, you should never count out the genius of traditional pixel based tracking. Loading a 1x1 image is extremely performant. The transfer size is typically less than 50 bytes, and because the tracking logic is done on the CDN server of the image, we can offload the required resources for tracking!

Compare this to a script include, and maybe couple of lines of javascript to trigger the tracking, you can begin to see why this was used in the early days of web development. It was fast, performant, and reliable.

So why don't we just use the good old 'pixels' then? Well while they may beat out script based trackers in performance, said trackers are much more capable in the amount and types of data they can track. With anything in web development, we want to get the most out of something, whilst remaining as performant as possible. A good script based tracking solution finds a middle ground between user tracking and system performance requirements.

Closing

So there you have it, the origin of the tracking 'pixel'. If you'd like to learn more about optimizing for performance, stay tuned for our blog on JavaScript performance.

"JavaScript tracking pixels may have originated as a clever way to gather data, but they've evolved into the superheroes of the digital world - quietly working behind the scenes to help businesses save the day by delivering personalised experiences to their customers.