Get more accurate results from your heat maps

Heat maps are a great way to test how a visitor interacts with your website.  Face it, you don’t really know how someone uses your page.  Sure, you may think you do but how do you really know.  You don’t… unless you use a heat map.

A heat map is a graphical overlay of your website that when viewed, will show you where people clicked, how much time they spent looking at one screen (scrollmap), the site where the visitor came from, plus more.  There are several services that offer heat maps but the one I use is CrazyEgg.

CrazyEgg has a simple interface and provide great data.  For sites with a lot of traffic, this data is amazing.  If you are not lucky enough to have a lot of traffic, you results can be skewed.  Here’s what I mean; every time you visit your site, unless you exclude your visit visit, your have added a small bit of useless data.  So, every time you go to your home page and check the tweaks you just made, you could be counted as a visit.

Most analytics programs and plugins have the option to exclude tracking for logged in users.  This works great for Google Analytics (which I use) but is lacking in the CrazyEgg plugin.  As a dedicated code geek and WordPress tweaker, I had to see if I could change that.  With just a few extra lines of PHP code, you can too.

Editing the Plugin

The CrazyEgg plugin is fairly simple as plugins go and does a great job.  Near the bottom of the crazyegg-heatmap-tracking.php file, you will see the following lines of code (click on Plugins->Editor->Select CrazyEgg->crazyegg-heatmap-tracking.php):

echo '<script type="text/javascript">
 setTimeout(function(){var a=document.createElement("script");
 var b=document.getElementsByTagName(\'script\')[0];
 a.src=document.location.protocol+"//'.$script_host.'/'.$account_path.'";
 a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, 1);
 </script>
 ';

This is the bit of code that takes your account number and puts it on each page so you can track the clicks, scrolls, and other data that will make up the heat map.  Since you don’t want to track your clicks and visits in the heat map (why else would you be reading this far…), you need to add a few bits of code that will tell if you are logged in.  Here is what my code looks like:

if ( is_user_logged_in() ) {
    echo '
          <!-- CrazyEgg tracking disabled when user is logged in -->
         ';
    } else { 
    echo '<script type="text/javascript">
    setTimeout(function(){var a=document.createElement("script");
    var b=document.getElementsByTagName(\'script\')[0];
    a.src=document.location.protocol+"//'.$script_host.'/'.$account_path.'";
    a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, 1);
    </script> 
    '; 
 }

The code that was added consists of the first 5 lines and a curly brace at the end.  Those lines of code are (line 1) checking to see if the user is logged in and if so (lines 2 – 4) displaying a comment in the HTML of the page saying CrazyEgg tracking is disabled.  If a user is not logged in (line 5), the CrazyEgg tracking code (lines 6-12) is inserted into the page.  The curly brace (line 13) at the bottom is there to close the IF-ELSE statement.

One quick note: any updates to this plugin will eliminate this tweak so if you update the plugin, remember to fix this part of the code.

There you have it, a quick and almost painless way to exclude your visits from your CrazyEgg heat map while having fun at the same time (that is, if you enjoy coding…).  If you are using CrazyEgg, leave a comment and let me know how you like it.  Does this fix help?  Why or why not?