| Recipe 34 | Tracking User Activity with Heatmaps |
Problem
When running a promotion or redesigning a site, it’s helpful to know what works and what doesn’t so we know where to spend our time. We need a way to quickly identify the most used regions of our page or to find out which parts of our interface people aren’t using.
For example, we need to resolve an internal dispute. One of our clients is launching a new product, and the two partners are at odds about whether the Sign Up button or the Learn More button is more useful. These buttons are placed right next to each other on the interface. We want to add some tracking to this page to see which button is getting clicked more.
Ingredients
-
A server running PHP
-
ClickHeat[99]
Solution
We can track where our users click the page and display the results in a graphical overlay called a heatmap, giving us an at-a-glance idea of the most-used parts of our page. Several commercial products can create heatmaps, but we’ll use the open-source ClickHeat script because setting it up on modern web hosts is almost as easy as using a commercial solution.
Setting Up ClickHeat
ClickHeat has two components: a client-side piece that sends data and a server-side piece that processes it. ClickHeat’s server-side piece needs PHP to work, but we can use ClickHeat to monitor any website as long as we can add a little bit of JavaScript to that site. We need to download ClickHeat from the project’s web page and place ClickHeat’s scripts in a PHP-enabled folder on our server. For this recipe, we’ll use a virtual machine running on our own network at http://192.168.1.100. Check out Recipe 39, Setting Up a Virtual Machine, to learn how to build your own virtual machine for testing.
When we unzip the ClickHeat archive, we find a clickheat folder. We upload this folder into /var/www, the folder on our virtual machine that contains our existing web pages. Since our virtual machine has SSH enabled, we can copy the files up with a single command by using scp:
| | scp -R clickheat [email protected]:/var/www/clickheat |
Or we can transfer them over to the server’s /var/www folder with an SFTP client like FileZilla.[100]
Now that we’ve copied the code out to the server, we need to modify the permissions on a few folders within the clickheat folder structure so that we can write the logs and modify permissions. We log in to our server and use the chmod command to make the config, tmp, and logs folders writeable:
| | $ ssh [email protected] |
| | $ cd /var/www/clickheat |
| | $ chmod -R 766 config logs cache |
| | $ exit |
With the files in place, we can complete the configuration by browsing to http://192.168.1.100/clickheat/index.php. ClickHeat will verify that it can write to the configuration folder, and then we’ll be able to follow the link to configure the rest of the settings.
We’ll enter values for the administrator username and password. After we click the Check Configuration button and we see no errors, we can save the configuration. Now that the server component is configured, we can configure our web page to capture some data.
Tracking Clicks and Viewing Results
To begin tracking clicks, we add a few lines of JavaScript to our home page, right above the closing <body> tag:
| heatmaps/index.html | |
| | <script src="clickheat/js/clickheat.js"></script> |
| | <script> |
| | clickHeatSite = 'AwesomeCo'; |
| | clickHeatGroup = 'buttons'; |
| | clickHeatServer = 'http://192.168.1.100/clickheat/click.php'; |
| | initClickHeat(); |
| | </script> |
We define a site and a group for this heatmap so we can track multiple sites.
When we redeploy the page to our server, clicks from our users will be recorded to ClickHeat’s logs. After a few hours, we can visit http://192.168.1.100/clickheat/index.php to see the results of our test, shown in the following figure:
It looks like more people are clicking the Sign Up button, whereas the other button isn’t getting a lot of attention. We can let this script run for a few more days and see if things change. Now we have a graphical way of looking at user engagement, which will help the business make better decisions going forward.
Further Exploration
ClickHeat is relatively low maintenance once it’s running. But it has a lot of options we can adjust, such as the number of times we’ll record a click from the same user. We can also configure ClickHeat to record its results to the Apache logs and then parse them out with a script, which is a great approach for servers where PHP might be too slow to invoke on each request. Finally, ClickHeat can be set up on its own server, so it can collect data from more than one site or domain. Check out the documentation at the ClickHeat website for more options, or just explore its interface.
If you’d like something with a little more power, you might want to investigate hosted commercial solutions such as CrazyEgg,[101] which has similar functionality. Unlike ClickHeat, which stores your results on your own servers, these third parties collect your data on your behalf; for security and privacy reasons, this might not be something all organizations can use.
Finally, when you’re looking at heatmaps of your own sites, you might get a little unexpected guidance from your users. If you notice a bunch of click activity on part of your page that doesn’t have a link, consider making that region active. Heatmaps can often show you things you never saw before, such as the fact that you have elements in your design that people think they should click. These visitors might get frustrated or think things are wrong or broken. Use heatmaps to monitor and address those issues.
Also See
-
Recipe 39, Setting Up a Virtual Machine