Why do your website need Click Heat Map?
The general report allows you to measure how changes or variations in the positioning and appearance of the different objects in the page affects the user interaction within you website. This is very useful to experiment with styles and positioning without having to wait a few days for checking the results when compared with Google Webmaster Tools.
It basically consists of a list of the single pages (URLs) that have the most clicks among all visited pages. You also get information of the click-count change rate on a 1-day, 7-day and 28-day change rate basis.
Clicks: The clicks column gives you a color coded count of the number of clicks per page/url. The color-coding is the same as for the heatmap color coding; it ranges from purple for fewer clicks to red for a lot of clicks.
Title: It is the page title, you may see repeated titles and you can differentiate them by comparing the URI columns of each row. Each title is a link, once you click on one of the links, a new tab is opened and the page in question is displayed with the heatmap on top of this page. This will be explained in more detail below in this article.
Uri: The Uri column and data is a great point of reference for differentiating pages and titles. It is especially useful if you are using SEF URLs, which of course you are using if you are reading this article.
1-day, 7-day and 28-day change percentages: These three columns will give you the change rate percentage of each page in if compared to the same page one day before, seven days before and 28 days before.
The reason for having a 28-day change rate is that 28 represents 4 full weeks, if you compare 30 days you would be always comparing 4 weeks and a couple of days.
The charts column: if the above periods are not enough, you may click on the chart icon and the very left of each row and you will be prompted with a pop-up displaying the following:
On the pop-up you will get a more detail representation of the amount of clicks for the selected URL in a daily basis. Below each bar you see the change rate of that day and the date and day of the week.
The second row of bars is a graphical representation of the total number of clicks for the week of the year in the format: week/year or 52/11 for Week # 52 of year 2011.
On the top right corner you get a printer icon, that gives you the option to print that report, if clicked, it will open a new tab with the report and will give you the option to print to a file, a PDF or other media depending on your PC/Mac configuration.
Date Controls: Still on the heatmap tab, you get, at the top of the page, the usual date controls:
The date controls allow you to navigate across days in order to compare heatmap data for specific days.
The Heatmap Overlay: When you click on any Page Title you will get a new tab with a regular page and an overlay on top of this page. It takes a few seconds to generate the overlay for each page, you can check if you are in the correct page â€“ the heat mapped page â€“ if you check on the URL, it should look something like this:
And include the parameter "Joomlawatchheatmap" on it. If you wait a few seconds, the overlay will appear. It places a yellow bar on the very top of the page to let you know you are viewing the Heatmap Overlay:
The overlay has three main controls or shortcuts:
- Press "p" for previous Day. You will get the heatmap of the previous day on top of the same page.
- Press "n" for the next Day. You will get the heatmap of the next day if you are not in the current day.
- Press "t" for toggling the heatmap display and make use of the regular web page functionality such as links and forms.
Finally, the actual heatmap looks like a real infrared heatmap. The color range varies from light purple for one (1) click to red for several clicks and displays circles or spots for the clicked zones of the page.
At first after checking on only a few pages I thought: well, it is expected to get lot of clicks on a registration form, and in fact the heatmap gets less concentrated on pages that require less user interaction, such as scroll and read-only pages or pages with no input fields in general but. Even in some pages with no forms or input fields I was able to notice small elements that were making the website users interact with my website.
I found out that not necessarily one has to put something sparkling or very colorful in order to capture the visitor's attention. In the below example I notice visitors were there looking for some usable or useful information. In this case, they were looking for given line of text that would allow them to solve a problem. This is a particular case but, the point is that users found something that attracted their attention more than adds and colors, you can mimic the same behavior on your users if you put some useful data such as recipes, codes, advices, or other stuff or content that you consider your users would find useful and then, you can place adds or banners or links to other stuff very close to this points.
Another thing that I noticed is that the heatmap can be a bit overlapped or inexact, specifically in a horizontal way. I guess this is due to the page being clicked on different screens resolutions but still you can easily guess where those clicks belong at.
After checking on some more pages I suddenly started to realize a how users were using my site and what they were looking when they navigated the site. I started to get a better idea of how to get a real advantage of the new HeatMap feature.
From The figure above (Figure 11), I can figure or imagine that users that were about to register were:
- a. Also interested in viewing an online demo?
- b. Also interested in checking the downloads page, The Forum and the Support pages?
- c. Also interested in going back to the home or about section?
- d. Using Tab instead of Click for advancing on the last fields of the form?
Live Stats Tab Integration:
Besides the specific HeatMap tab and overlay, when you are checking on the LiveStats, among other new things you'll see one (1) or two(2) pointer icons right next to each line or URL and also a color-coded click count right next to each pointer icon.
The first of two pointer icons:
If you see two pointer icons next to each other, For example, the two icons you see right next to the second and third row of Figure 12. The first icon and click count belong to the logged in user. It means the user that was navigating that URL was logged in and recognized by the system. You may click on the first pointer to get the heatmap of this user only.
The Second Pointer Icon:
The second pointer icon on a set of two is representing the normal heatmap for that page. If you click on this icon you will get the regular heatmap overlay for that page.
Only One Icon:
When you get only one icon, such as in row #1 of Figure 12, it means the URLS is being visited by a non-logged-in user or a visitor, if you click on the only pointer icon of an URL, you'll get the regular heatmap of that page as well.
I think, in simple words, you get a graphical representation of how users are navigating through every specific page. What things they do, what things capture their attention the most and what others are not capturing any attention.
I wish I could know exactly what my visitors are looking at the most when they navigate across my website but that is impossible now days. With the new version of ExtraWatch I can at least know, in real-time, what my users are being attracted to by their click trace...
You will find out that there may be a page with a high number of visits, but it may not necessary be a page with a high number of clicks and you need to ask yourself: Is this page really benefitting my rank or on the other hand is it only increasing my bounce rate? The Bounce Rate it is a measurement of visitors who arrived a page via Google and immediately left.