ClickMagick supports industry-standard “tracking pixels” to help you track conversions and goals within your sales funnel.
If you’re unfamiliar with tracking pixels, they are pieces of HTML or JavaScript code that you insert into your web pages that alert tracking systems like ClickMagick that a page has just been displayed. This information can tell you all sorts of great information.
For example, if you’re asking for an email address on an opt-in page, and the Thank You page for the email opt-in is displayed, then you know that the email address was entered and accepted. If you install a tracking pixel or piece of tracking code in the Thank You page, then when the page it displayed, it can report the results back to ClickMagick.
The “trick” is installing the tracking pixel in the right place on the page, which we will cover here.
Tracking Pixels vs. Tracking Code
Strictly speaking, a traditional tracking “pixel” is a piece of HTML code that displays a single dot on the screen. In computer terminology, a single dot is called a “pixel,” short for “picture element.” The pixel is displayed using the “image” tag of the HTML markup language and looks like this:
<img src="..." height="1" width="1" />
Because a pixel is a display element, it must be inserted in your web page's “body” section, which will be explained in just a moment.
Tracking code, on the other hand, is computer code usually written in the JavaScript language. The tracking code starts with a <script> tag and looks like this:
<script> ...code... </script>
Tracking code can legally be included anywhere on the web page, but depending on what the code does, you may have to insert it in specific places for it to work as intended.
In addition to standard tracking pixels, which use the HTML “image” tag, ClickMagick supports JavaScript tracking pixels which, technically speaking, aren’t actually “pixels” since they use the <script> tags with JavaScript. People loosely use the term “pixel” for anything that does what traditional pixels do, but when you’re inserting pixels on a page, you need to be clear about the type of pixel you’re working with—is it a true HTML pixel, or a piece of tracking code that’s being called a pixel for simplicity?
Tip: ClickMagick’s Pixel Builder makes it easy to create tracking pixels. You can always find the Pixel Builder in the Tools menu.
Note: The Pixel Builder allows you to create your pixels in two different formats: the “Image/HTML” format and the “JavaScript” format. We recommend using the “Image/HTML” version, which is the industry standard approach. We introduced the JavaScript version for those rare affiliate networks that won’t allow you to insert a standard pixel and require you to use JavaScript.
The Structure of an HTML Page
With that background, a typical HTML page has this structure behind the scenes:
<html>
<head>
... initializations
</head>
<body>
... all display elements
</body>
</html>
Because traditional HTML tracking pixels are display elements, they must go in the “body” section between the <body> and </body> tags, and for best performance, you’ll want to place them as close as possible to the top <body> tag. That way, if the page loads slowly and the user clicks away before the page is fully loaded, the tracking pixel has a better chance of being loaded before the page disappears.
ClickMagick supports both traditional HTML tracking pixels and the newer JavaScript tracking pixels. You would use JavaScript tracking pixels only in the rare cases when traditional HTML tracking pixels can’t be used, such as for Page Builders or affiliate networks that only support JavaScript tracking code.
For best performance, you’ll want to put JavaScript tracking pixels/code in the “head” section between the <head>…</head> tags so they’ll load as early as possible, but you can put them in the “body” section if that’s your only choice.
If you’re editing directly in HTML, you can install your tracking pixels or tracking code by simply pasting them between the correct HTML tags for what you’re trying to do.
Tip: If you can’t edit your web pages directly in HTML, you’ll need to add your tracking pixels and tracking code using the page settings of the Page Builder or affiliate network you’re working with. Every system is different, so we have a separate article that can help you find where to enter these settings for your specific situation: