One of the questions I get a lot is, these interactive email techniques are great but how do I know if users are actually interacting with them? This article will cover some techniques on how you can track user interaction within an email with the selective loading of background images.

Setting up the pixel

Tracking user interactions is actually pretty straightforward if you’ve already gotten the hang of implementing interactive elements in email. Like open trackers embedded by Email Service Providers (ESP) such as Mailchimp, all you need is to load a remote pixel when the user triggers an action, be it triggering a hidden radio button or hovering the cursor over an element.

Naturally you’d need a service that generates and tracks the pixel once its fired. Here you have several options – your ESP or Analytics provider might have an API that you could leverage or you could build one on your own. If neither option is available my follow up article will show you how to use Google Analytics for this purpose.

Generally your pixel is going to look something like this:

http://tracker.com/track?campaign=XX&user=YY&event=ZZ

The variables you’d normally track include the campaign, the unique user identifier and the event being tracked.

Background Image

The key to implementing a pixel to track user interactions in email is to load a background image when a hover or checked selector is active. There are multiple ways you can implement the pixel but the simplest method is to place an empty div inside the element and load a background image within it when activated by the :hover and :checked selector.

Limitation

A key limitation of background images is that the image will only be loaded once each time an email is opened regardless of the number of times the interaction happens. So even though the user may interact multiple times with a single element, it will only show up as a single interaction each time the email is opened. If a user opens the email twice and interacts twice, then two interactions will be recorded.

Also, because Outlook.com does not support CSS background images, this method would not be able to track interactions in that client.

Tracking Hover Actions

Lets say you have a rollover image similar to one generated using this tool.

The code would look roughly like the one below:
(For brevity, the code examples omit the hacks required for interactivity in Gmail).

<style>
  .img-swap:hover img{
    max-height: 0px;
    height:0px;
  } 
</style>
<table cellpadding="0" cellspacing="0" border="0"><tr>
<td width="240" background="https://freshinbox.com/tools/rollover/images/2b.jpg">
<a class="img-swap" style="display:block;width:240px;height:170px;" href="http://server.com">
<img src="https://freshinbox.com/tools/rollover/images/2.jpg" width="240"  height="170" border="0" style="display:block;"></a>
</td></tr></table>

To implement the pixel you merely insert an empty div within the “img-swap” anchor tag with a tracking class (ie. tpixel).

<a class="img-swap" style="display:block;width:240px;height:170px;" href="http://server.com">
<img src="https://freshinbox.com/tools/rollover/images/2.jpg" width="240"  height="170" border="0" style="display:block;">
<div class="tpixel"></div>
</a>

And then load the pixel as the background image when the user hovers over the img-swap link:

.img-swap:hover .tpixel{
  background-image:url(http://tracker.com/track?campaign=XX&user=YY&event=rollover);
} 

This setup will fire the pixel once regardless of the number of rollover images present in your email. If you want more fine grained tracking, you can create a separate class and event identifier for each of the rollover images in your email.

Tracking Checkbox or Radio Interactions

Tracking checkbox or radio based interactions are also fairly straightforward. For an example of what you can do with radio elements check out the Image Carousel for Email Tool.

The rudimentary radio based carousel above can be created using the example code below (Note: using the (~) general sibling selector in iOS9 requires a special hack)

<style>
.radio1:checked ~ .carousel{
  background-image:url(https://freshinbox.com/tools/rollover/images/1.jpg);
}
.radio2:checked ~ .carousel{
  background-image:url(https://freshinbox.com/tools/rollover/images/2.jpg);
}
.radio3:checked + .carousel{
  background-image:url(https://freshinbox.com/tools/rollover/images/3.jpg);
}
</style>
<input class="radio1" type=radio name="myradio" checked>
<input class="radio2" type=radio name="myradio">
<input class="radio3" type=radio name="myradio">
<div class="carousel" style="width:240px;height:170px;">
</div>

To add tracking, add an empty div in the carousel container.

<div class="carousel" style="width:240px;height:170px;">
  <div class="tpixel"></div>
</div>

And then trigger background image pixels when the second and third radio elements are selected. You don’t want to fire the pixel when for the first radio since the image is already visible by default.

.radio2:checked ~ .carousel .tpixel{
  background-image:url(http://tracker.com/track?campaign=XX&user=YY&event=radio2_select);
}
.radio3:checked + .carousel .tpixel{
  background-image:url(http://tracker.com/track?campaign=XX&user=YY&event=radio3_select);
}

Detecting Client Type

Naturally you’d also want to know the percentage of opens on the different types of clients so you can get a sense on how many people who were able to interact with your creative actually interacted with them.

Default Open Tracker

This tracker will fire on all emails that are opened where images are displayed.

<img src="http://tracker.com/track?campaign=XX&user=YY&event=open" width=1 height=1>

Tracking Open by Media Query Types

Here’s how you can implement a webkit pixel.

<style>
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .webkit-pixel{
    background-image: url(http://tracker.com/track?campaign=XX&user=YY&event=webkit-open);
  }
}
</style>
<div class="webkit-pixel"></div>

Here’s how you can track mobile opens.

<style>
@media screen and (max-device-width: 600px) {
  .mobile-pixel{
    background-image: url(http://tracker.com/track?campaign=XX&user=YY&event=mobile-open);
  }
}
</style>
<div class="mobile-pixel"></div>

Tracking Opens on Clients with Checkbox Support

If you have interactive elements that leverage checkboxes and radio elements, you can track the clients that are able to display these elements using the code below:

<style>
.pixel-cbox{
  display:none;
}
.pixel-cbox:checked + .checked-pixel{
    background-image: url(http://tracker.com/track?campaign=XX&user=YY&event=cbox-support-open);
}
</style>
<input type=checkbox class="pixel-cbox" style="display:none !important" checked>
<div class="checked-pixel"></div>

Tracking Opens on Gmail Webmail

Here’s an interesting trick. Because Gmail webmail supports attribute selectors but not classes, you can track the opens in Gmail webmail with this code. (Note the style block must be in the <head>)

<style>
* [summary=pixel-gmail]:not(.pixel-gmail){
  background-image: url(http://tracker.com/track?campaign=XX&user=YY&event=gmail-webmail-open);
}
</style>
<div class="pixel-gmail" summary="pixel-gmail"></div>

Next Step – Using Google Analytics.

What if you don’t have the resources to code your own pixel service? Not to worry, check out this follow up article on how you can implement these techniques using the free Google Analytics!

There you have it, the basics to tracking interactions in your email. To add support for tracking interactions within Gmail, you incorporate the attribute selectors covered in this article.