![\"shoe-hover-anim\"](\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2013\/12\/shoe-hover-anim.gif\")
<\/p>\n<\/p>\n
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.
<\/p>\n
Tracking user interactions is actually pretty straightforward if you’ve already gotten the hang of implementing interactive elements in email<\/a>. 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. <\/p>\n 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.<\/p>\n Generally your pixel is going to look something like this:<\/p>\n The variables you’d normally track include the campaign, the unique user identifier and the event being tracked. 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.<\/p>\n Limitation<\/B><\/p>\n 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.<\/p>\n Also, because Outlook.com does not support CSS background images<\/a>, this method would not be able to track interactions in that client. Lets say you have a rollover image similar to one generated using this tool<\/a>.<\/p>\nhttp:\/\/tracker.com\/track?campaign=XX&user=YY&event=ZZ\r\n<\/pre>\n
<\/p>\nBackground Image<\/h4>\n
<\/p>\nTracking Hover Actions<\/h4>\n