How to Add a Heatmap to Your WordPress Site

Heatmap is a modern technology that enables you to get real information about how your visitors interact with your website. You will get to know where they clicked, which links or buttons got the most clicks, and which CTA text attracts the most clicks from your visitors.

There are several plugins to use a Heatmap on your website. Among these, I will use the “Heatmap for WordPress” plugin for this tutorial.

Setting up Heatmap for WordPress

In order to use the plugin, you need to create an account on the Heatmap.me website. To do that, visit the website, and click the “Free sign up” button at the top-right corner of the screen. This will take you to the pricing section.

Heatmap.me offers three pricing plans. You can choose any of the premium plans, or stick to the free plan to test the available features. Once you have chosen the plan, you can register by using your Google or Facebook account.

The next page will ask for your company name, domain name, etc. Provide the necessary information, and click “Sign up for free.”

Now, get back to your website dashboard, and install the Heatmap for WordPress plugin. Once you activate the plugin, you will notice a new menu item titled “Heatmap” in the dashboard menu. Clicking the menu item will take you to a page like the following –

As you can see, there are only two admin options available for you. One of these enables you to use Javascript for advanced customization, while the other allows you to hide the heatmap icon on the admin bar. I recommend keeping both of these unchecked.

You will find all the necessary heatmap options on the front-end. To check out these options, load your website in a new tab, and click the “Heatmap” icon in the admin menu.

First of all, you need to enable the “Record” option to start recording user interactions. The free plan allows you to enable heatmap in up to five pages. You can add more pages by visiting the page and enabling the record option.

“Active pages” section enables you to manage the pages where you have activated heatmap. You can remove any of the existing pages to make room for new pages.

The heatmap dashboard offers some ready-made statistics including the percentage of interaction, the number of page views, and clicks during the last 10 hours. It will also inform you that the plugin will not count your clicks and visits while you are logged in as an admin.

There are dedicated sections to explore the timeframe, visitor interactions, and the settings options. Let’s check these out.

Checking Out the Timeframes

The “Timeframe” section enables you to check out the user statistics for various time frames like the current or previous hour, day, week, or month. It is also possible to check out the stats for a specific period of time.

Below, in the “Record & storage settings” section, you will find an option to enable or disable recording for this page, set up the number of clicks and the time duration for which the data should be stored. You can choose to save up to 1,000,000 clicks from your visitors for up to two months.

Exploring the Interactions

This is the section where you will find the actual heatmap. Clicking the “Interactions” section will show the places where and how your visitors interacted with your site. For each interaction, you will find the name and the percentage of time when the visitors engaged with that element.

Hovering over each interaction will take you to the exact location on the page. The plugin will show you the exact location where the visitor clicked along with the click rate and click frequency for that element.

Configuring the Settings Options

In the “Settings” section, you can enable both active and inactive clicks. Between these, active refers to the clicks that are placed on active links. And inactive clicks will show the clicks on other places of the site that are not links.

Below, you will find separate options to define the label size, opacity, and contract levels. It is also possible to block certain IP addresses from being recorded in the heatmap.

To do that, provide the IP address in the “IP address blocking” section, and click the “+” icon. You will find a list of the blocked IP addresses at the bottom of the section. There is also a “Reset settings” button to undo all of your changes.

Advanced Heatmap Plans

If you want to add more than 5 pages, and enjoy the advanced features, you need to purchase a premium plan. Heatmap.me offers two advanced plans –

Premium: Priced at $100 per month, this plan comes with the on-site heatmap, responsive support, real-time updates, conversion tracking, template analysis, and technical support. It supports one website with an unlimited number of pages and visitors. Premium users can store up to one year of visitor data with up to 100 million page views per month.

Enterprise: Priced at $200 per month, Enterprise comes with all the benefits of the Premium plan. What’s more, it will keep the data for up to two years, and allow you to use the heatmap on multiple sites with more visitors. You have to pay additional monthly fees for the extra site(s) and visitors.

Final Words

Having a heatmap on your site serves so many purposes. When used properly, it can be an excellent tool to increase conversions and get better RoI from your website. Our today’s article showed you how to install and configure the free Heatmap for WordPress plugin on your site.

So, what are you waiting for? Install the plugin and enjoy the live heatmap on your site. And if you use any other heatmap service, let me know that too. I will be glad to check it out.