What are tracking pixels and tracking code?

ClickMagick supports industry-standard “tracking pixels” and three types of tracking code to help you track conversions and goals within your sales funnel.

If you’re not familiar with tracking pixels or tracking code, these 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 in 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 in installing the tracking pixel or tracking code in the right place on the page and that’s what we’re going 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, and 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 the “body” section of your web page which will be explained in just a moment.
 
Tip: ClickMagick’s Pixel Builder makes it easy to create tracking pixels. You can always find the Pixel Builder in the Tools menu.


Tracking code, on the other hand, is computer code usually written in the JavaScript language. 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.


The Structure of an HTML Page

With that background, a typical HTML page has this structure behind the scenes:

((html))
  ((head))
    ... initializations
  ((/head))
  ((body))
    ... 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 in the “head” section, between the ((head))((/head)) tags, again so that they’ll load as early as possible.

ClickMagick’s Organic tracking code and FunnelMagick tracking code are two other types of JavaScript tracking code that can go in either the “head” section or the “body” section, and again, for best performance, you’ll want to put them in the “head” section, if at all possible.

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.
 
Caution: If you install the FunnelMagick tracking code in the body section of a page that you’re split testing, the split test may show a brief flash as the page is loaded. For this reason, it’s good practice to always install FunnelMagick tracking code in the “head” section of all your pages, if possible.
 
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 FAQ that can help you find where to enter these settings for your specific situation:
 
  How do I add tracking pixels or JavaScript code to [...]?