Add new comment

Using Heatmaps to boost conversions: Heatmap.me Drupal integration

Difficulty: 
Piece of Cake

A heat map is a graphical representation of data where the values taken by a variable
in a two-dimensional map are represented as colours. — Wikipedia

Today we are introducing the simplest module ever: Heatmap.me Drupal integration.

This module, after activation, deploys the necessary script files to allow integration with the Heatmap.me service.

A heat map is basically a small script that tracks exactly where your users click and presents it to you as an overlay on your page, so you can see where the clicks are most dense ("hottest") and where they are non-existant ("coolest"). The colors that are overlaid on your page when you are viewing the stats run from transparent to blue to red, indicating an increasing number of clicks as the colors get warmer.

This is what a heatmap looks like:

Why is this important? Because it helps you save a big bunch of money and time in usability R&D. Stop figuring out what you think works. Keep usability efforts to the minimum and adjust your user experience based on how your users are really interacting with your website.

We have not found a more valuable tool to refine and boost our efforts when working in improving UI to maximize conversions. There is a free tier that will store data for 1 site and 5 pages, enough to start playing around.

To start using Heatmap.me:

  • Open a free account, this is fast because you can log in with Google+ or Facebook.
  • Configure your domain.
  • Install the Heatmap.me module (no need to configure anything)
  • Press Alt+Shift+H while browsing your website to open the Heatmap control panel. Go ahead and try it, this site is running heatmap.me.

An important advantage of using the Heatmap.me is that it is external. Your application will suffer zero additional overhead, and you need to maintain nothing.

There are other open source alternatives:

If you want some information about these open source alternatives, see the attached PDF that I found on google and that belongs to Drupal.org. I could not find the issue it belongs to, so I cannot credit the author neither link to it.

Looks like the Heatmap.me authentication is broken on Chrome at the moment of this writing, you will need to use Firefox or Internet Explorer (yes paid software also breaks...)

Do yourself a favor and sign up for the free tier if you are not using heatmaps at all now. Unfortunately, the paid tier of heatmap.me is quite weird at $100/month for only one domain but definately worth the price if you are an agency and use it on a one shot basis (keep changing the licensed domain as you work on different projects). I mean, if your are not doing an ongoing full time UI effort on an application, why would you keep paying $100/month for that domain? We would like to see a more flexible (not cheap) paid tier that matches the need for detailed analytics in a short period of time (when UI development effort is done) + lighter long term statistics for an ongoing improvement effort.

If you are not fond of adding new modules, integrating the Heatmap.me service is just adding a one line JS script to your site. You can do that with ease directly in your theme.

<script type="text/javascript"> (function() { var hm = document.createElement('script'); hm.type ='text/javascript'; hm.async = true; hm.src = ('++u-heatmap-it+log-js').replace(/[+]/g,'/').replace(/-/g,'.'); var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(hm, s); })(); </script>