PHPMatters Help You Better Hosting Your PHP-based Sites
How to Use Heatmap in WordPress for Visitor Tracking

How to Use Heatmap in WordPress for Visitor Tracking

After running your website for a while, you need to have an analysis about how your visitors have interacted with the site. In most cases, you may choose to leverage the Google Analytics to get the real-time reports, which tell you how many visitors you can get per day, where they come from and many more. However, if you want to get the detailed information of what they have done on your site, what get them interested the most and what they are looking for, you’d better use the heatmap.

In the following, we’d like to tell you what this tool is and how to use heatmap in WordPress for the better visitor tracking.

General Knowledge about the Heatmap

Actually, you can regard the heatmap as a two-dimensional representation that is displayed using various colors, which indicates how your visitors’ activities are distributed across the whole site and which areas are the most popular ones that get the most clicks and visits.

Generally, the heatmap colors can be categorized into two groups – green and red. The areas coming with the green color get the least amount of clicks and focuses while the areas featuring the red color are just in the contrary condition. This simply gives you the clear visual impression to figure out which parts of your site are the hot areas and which are not.

Website Heatmap

To explain in a detailed manner, a truly effective heatmap can tell you the following things.

  • Uses the orange or the red color to give you a visual cue of what your readers are interested and what they want to know the most.
  • Indicates whether your navigation bar is confused or not and whether your readers are always distracted with a random flow working through your site.
  • Tells you whether people are actually checking what you want them to check.
  • Indicates the conversion rate of your call to actions, such as the signup form, login button and advertisement links.

Bearing all the information in mind, you can carry out an effective adjustment on your website for getting the best results.

How to Use Heatmap in WordPress

In order to integrate your WordPress site with the heatmap, you can consider the usage of some plugins. Here, we recommend the Hotspots Analytics plugin, which is an excellent complement to Google Analytics and helps you launch the heatmap easily.

To use it in the best way, you should firstly decide some settings of this plugin. In this case, you need to click Hotspots > Settings. Here, you can turn on the options to save the mouse clicks, touchscreen taps, custom events, ALAX actions and page views so as to come out the most precise heatmap. Also, you can enable the manual drawing of heatmap for some special pages.

Hotspots Analytics Settings

It is possible that you want to schedule the website tracking and draw the heatmap during a specific period. If so, you have the freedom to schedule the start date and the end date for tracking the touchscreen taps and the mouse clicks.

Schedule Heatmap

Next, you need to choose the heatmap types. The confetti one displays the density of activities using the colors from green to red.

Confetti Heatmap

The heatmap.js one is the JavaScript library to draw the heatmap with HTML5.


After that, you should decide the hot value, spot radius and spot opacity. In addition, you can choose to ignore the width, device, browser and the activities made by some user roles when drawing the heatmap.

Heatmap Settings

After deciding these settings, you now can save the settings and check the heatmap by clicking HotSpots > Heatmaps.

Heatmaps Section

Here, you can know exactly what happened on which of your webpages. In this example, the plugin records the mouse clicks made by the visitors, along with the click counts, page URLs and page width. If you want to check the heatmap for the detailed information, you can click the View Heatmap directly.

In addition, you can track some certain activities happened on the special pages of your site by creating the custom events. For this, you simply need to go to the plugin settings page and click the Custom Events button, and then, you can enter the event title, event type or category, event triggers and the page URL.

Note that this plugin allows three types of event triggers by default, which are mouse clicks, form submit and touch screen taps.

Create Custom Events

In addition to checking the heatmap of the whole website, this plugin also tracks the actions made by each user. This is especially useful if your site requires the registration and the login process for accessing or commenting.

For this, you can click HotSpots > Users. Here, you can check who have done what at which time. If you want to know the much more detailed information such as the IP address, activity types and counts, used devices and browsers, page width and some others, you can click the User Activity button directly.