How to Install a HeatMap Script in Your Website and Track Visitor Clicks

A heatmap lets you see which areas of your website receives the maximum attention from your blog readers. Heatmaps can be used to measure the performance of different sections of your blog’s template and you can use the data to increase conversions.

For example: Here are some heatmaps of Google, Digg and the Slashdot homepage. The areas shown in Dark red gets the maximum clicks followed by the area shown in yellow and green. The portion in blue or white receives the minimum attention.

Why use a heatmap ?

You can use the heatmap to know which sections of your blog receives the maximum number of clicks. Then you can tweak some settings, move the widgets around and increase conversions. For example: You can see whether more users click the RSS icon on the header or the one placed just below the blog post.

Heatmaps can also be used to judge the performance of your advertisements, you can make some changes in the ad positions and see how your readers react to the change.

How to Install a Heatmap Software in Your Website For Free

The best heatmap program is undoubtedly CrazyEgg but unfortunately it’s not free and you have to pay a monthly fee to use it. If you are looking for a free option, try Clickheat.

ClickHeat tracks the clicks on every page of your website in an HTML page and shows you the hot and cold click zones. The only requirement to use Clickheat is PHP, which is available with most of the web hosting providers.

Here are the steps to install Clickheat on your web server:

1. First Download the latest version of Clickheat from SourceForge.net and extract the package in your computer.

2. Open your FTP program and create a new directory anywhere in your website. Then upload all the files to this directory.

3. Open the address of your Clickheat directory in your browser and you will be shown the following screen:

4. Click Next step.

5. Leave all the settings as it is and choose a username and password to complete the installation.Then click “Check configuration” and save all the changes.

6. Log in to your Clickheat administration panel and click “Javascript” at the right top of the screen. Then copy the javascript code to your Window clipboard

7. Open your website’s template in any HTML editor  or notepad and add the code just before the ending </body> tag. You are done!

Now wait for some days till Clickheat logs all the clicks and generates the heatmap of your website. After a week or two, log in to Clickheat admin panel and select the time range for which you want to see the heatmap. You will be shown the heatmap of your website, an example of a heatmap of my blog is shown below:

Apart from the homepage, you can track the click logs on any other page of your website. The tool also lets you switch between different screen resolutions and see how different visitors of your blog interact with your website.

To see Clickheat in action, watch the screencast below:

How I Used this heatmap to Increase Conversions

I have been studying the heatmap pattern on my blog for the last two months and experimenting with different positions by moving the different sections around. In some cases, it worked slightly while in some cases there were no changes.

Another strategy I implemented is Split testing – it’s a way to rotate a section of HTML code dynamically. That means, you can rotate two blocks of HTML codes and load them on a 50:50 ratio. So if one of the pages of your site receives 1000 impressions, one of the HTML codes is shown 500 times while the other is shown 500 times.

Studying the heatmap and implementing the Split testing has shown positive results on my Adsense earnings. My earnings increased by approximately 20 % because I moved one advertisement block on top of the sidebar.

Do you use any Heatmap software on your blog ? How were the results? I would love to hear your ideas in the comments section.