Why is a tracking pixel called a pixel when it just looks like a bunch of code? Someone asked me this question a couple weeks ago and I figured others might be wondering to, so here’s an explanation. The reason is the tracking process involves the work of a small image file that is almost always 1 pixel in width by 1 pixel in height (1 square pixel). That’s where “pixel” comes from!
It Looks Like Code, Where Is The Pixel?
Inside the tracking code or in another snippet of code placed somewhere in a web page’s code along with the tracking code, is a link to the image file. If you put the pixel on your website without the accompanying code it wouldn’t do anything and if you had the code without the pixel no data would be transmitted anywhere. Both parts are necessary for the whole process to function.
I say “almost always” 1 pixel by 1 pixel because there are a few rare situations where it can be 0 pixels by 0 pixels but they are not common.
Pixel code can be formatted many different ways. It can be a single line of HTML or JavaScript, it could be a big block of JavaScript or multiple pieces of code that work together. The format depends on what it does and how the system it sends data to functions.
Example of a JavaScript tracking pixel
<script type="text/javascript" src="tracking-pixel.js"></script>
In this example, all of the pixel information is inside a JavaScript file located in the same server directory as the web page. So this script basically says “this is JavaScript and you can find the instructions you need here in this file, which is in the same server directory as the web page.
Example of an HTML tracking pixel
<img style="display: none;" src="/tracking-pixel">
In this example, the pixel image file (image.png for example) is inside the “tracking-pixel” directory on the server and some inline styling is hiding the image from public view. The image is there but invisible to website visitors.
The tracking pixel code could also look like this:
<img style="display: none;" src="tracking-pixel.png">
BUT, the first method is better because it puts the image in its own labeled directory. This second method would put the image file in the same directory as other page assets.
That is why they’re called tracking pixels. A pixel sized image is usually involved in the data transmission process! There is a lot more to it, as far as how the data is transmitted, but that’s for another post.