What's WP
Find Everything Related to WordPress - Best Tutoriasl on WordPress!
How to Use Heat Map to Get Real-Time Analytics for Your WordPress Website

How to Use Heat Map to Get Real-Time Analytics for Your WordPress Website

Heat map delivers accurate website real-time analytics to webmasters, making it clear on how many visitors access to the site in a period of time and how long they have stayed on a web page. Also, this great tool tells you where visitors click. That helps you understand what content gets high popularity.

When getting precise analytics, you just need to enhance anything popular with visitors and avoid all shortcomings on website. It is a great method to increase website traffic. In this guide, we would like to introduce how the heat maps work and then display a step-by-step on how to use heat maps for your WordPress site.

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.

WordPress Heat Map

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.

Add Heat Maps to Your Website Using a WordPress Heat Map Plugin

Option One

There are multiple powerful WordPress heat map plugins available for you, among which the heatmap for WordPress – Realtime analytics is selected here. This plugin enables an easy manner for users who wish to track a website and get real-time analytics. Also, some advanced features are included, such as automatic updates, full privacy, https supported, and so on.

Heatmap for WordPress Plugin

Install this plugin via WP admin and then activate it. Having the plugin activated, an item called “heatmap” is shown on the sidebar. Click it to access to the heat map setting page. If there is an error message said “This plugin cannot find your heatmap account”, you are required to create an account on https://heatmap.me/. Here, we sign up the free solution.

After creating an account, go back to your WP admin > heatmap and click the “Check” button. Since the plugin status turns to Active, you have successfully integrated your website with this great WordPress heat map plugin. Determine whether to use Javascript advanced customization according to personal needs. And then, save options.

Heatmap Settings Page

Since everything gets ready, it’s time to use heat maps to get real-time analytics for your website. Go to your website and find the “heatmap” option on the top admin bar. Once clicking the “heatmap” option, a window pops up and that asks you to log in with the account you have created just now.

And then, the heat map for your website will be displayed. Optimize your site according to the real-time analytics, which makes it clear on the popularity of every web page. Modify the web pages out of favor and promote the popular content to attract more visitors.

Heat Map Admin Bar

Since some users have disabled the top admin bar, the “heatmap” will not be displayed on the website frontend. To show this option clearly, users just need to hit Alt+Shift+H on the keyboard. The option “heatmap” will be shown on the web page automatically. Besides the selected plugin, some other methods are also worth trying, like Lucky Orange, Crazyegg Heatmap Tracking and Hotspots Analytics – Heatmaps, User Activity & Custom Event Tracking.

We suggest you to use more methods for website analysis, like Google Analytics. You can add Google Analytics to WordPress within a few steps. That makes it possible to track anything as you want, like website growth rate, audience preference, traffic, etc.

Option Two

In order to integrate your WordPress site with the heat map, 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 heat map 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 heat map. Also, you can enable the manual drawing of heat map for some special pages.

Hotspots Analytics Settings

It is possible that you want to schedule the website tracking and draw the heat map 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 Heat Map

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

Confetti Heat Map

The heatmap.js one is the JavaScript library to draw the heat map 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 heat map.

Heat Map Settings

After deciding these settings, you now can save the settings and check the heat map 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 heat map 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.


Lucy has been a very experienced SEOer, technical writer, web developer, c# developer since 2002. Now she owns a startup in San Francisco, CA, focusing on running a couple of blogs to share knowledge and experience with global readers and deliver exceptional results to global sponsors by leveraging the power of Internet.