Pixel Implementation

How To Instructions by Platform

What are Tracking Pixels?

Tracking pixels are code snippet which is loaded when a user visits a website or opens an email. It's useful for tracking user behavior and conversions.

These are 1 x 1 pixels that usually cannot be seen by users, which gets triggered when a user visits the site or opens an email where the pixel exists.

E.g Tracking pixel is on homepage, once a user visits the homepage it gets triggered.

Types of data that can be acquired and analyzed include:

Operating system used

Type of website or email used (e.g mobile vs. desktop)

Type of client used (e.g browser or mail program)

Client's screen resolution

Time the email was read/website was visited

Activities on the website during session (when using multiple tracking pixels)

IP addresses

How are pixels implemented?

Pixels can be provided in multiple formats:

❖ HTML
❖ JavaScript

Based on the service you're using (Wix, Squarespace, etc.), guides have been noted in this deck. If you are not using a website builder, please find the root.html file where you'd like the tracking pixels to fire. In general, you want to include the HTML tag or JavaScript tag in the index.html file, which usually is the homepage for a website. Slides 6 and 7 provide some general notes on HTML and JavaScript tag implementation.

HTML

Put the HTML snippet under the <head> tag but before the </head> tag. It can also be placed right before the </body> tag. Wherever you want this pixel to fire, you'll have to place:

Example: Homepage and About Me page, you'll want to place the pixel in each HTML file which corresponds to each page
If you have an index.html, page1.html, and page2.html, and you want it to fire on all 3, you'll have to add it to all 3.
If using HTML, you'll want to make sure it's not visible to the user. A few examples that allow tracking while it isn't visible to the user:

<img style="position: absolute;"
src="INSERT_PIXEL_URL_HERE">

<img style="display: none;"
src="INSERT_PIXEL_URL_HERE">

<img src="INSERT_PIXEL_URL_HERE"
width="0" height="0">

JavaScript

If JavaScript, place it right before </body> in the .html file.

Since it's a script tag, it won't need to be hidden unlike HTML tags. However, browsers could block JavaScript, so make sure to identify if you'd like to use the HTML tag or JavaScript script.

Your service provider may also allow you to paste in code snippets, which they may call "code injection" or "embedding code".

If they allow this, make sure you remove the <script> and </script> from the example below before pasting in.

An example of a tracking pixel in code to be pasted within an HTML file:

<script>
!function(e){e=document.createElement("img"),e.src="UR
L_GOES_HERE",e.style="display:none;",e.width="0",e.he
ight="0",document.body.appendChild(e)}(); </script>

JavaScript (Mobile)

Mobile: Nowadays many websites are responsive, meaning one site can be used for both desktop and mobile. However, you may want to include a pixel for desktop users and one for mobile users.

Several of these service providers do not have a direct way to include desktop and mobile. If they do, great! If not, please see below
Though detecting if a mobile or a desktop browser isn't 100% accurate, this should cover most cases:

(function detectBrowserAndRunPixel() {
if
(/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows
Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
// INSERT TRACKING PIXEL FOR MOBILE BELOW THIS LINE
}
else {
// INSERT TRACKING PIXEL FOR DESKTOP BELOW THIS LINE
}
})()

The script above should be placed within the <script> </script> tags if on HTML editor, or if your service provider/host allows you to run scripts, it can be placed in the script editor text area they provide you.

Keep in mind, as new mobile devices come out, this may not account for them (e.g. if one is named ACoolNewPhone, it won't get caught by the conditional logic above).