I want you to imagine that you’re freely living in your users’ heads when they enter your website.

You know everything about their visit and how did they interact with your website.

In a nutshell that’s what FigPii does for you, it opens a doorway into your users’ minds.

But we’re here to give you all the ways that you can make a heatmap on your website, with or without FIgPii.

We care to give you the best experience out there so if you decide to run with our product it’s because you believe in it.

With that out of the way, let start with some basic terms.

What’s a heatmap? Heatmaps are a visual representation of data.

The most common heatmap is the clicks map, which uses varying shades/colors to represent changes in the number of clicks.

To many clicks = Red / No or less clicks = Blue.

There are 3 major types of heatmaps.

Move, click, scroll.

Move maps: This kind of map shows in what places did your users hover and move using their mouse cursor.

Click maps: This kind of map shows you how many people clicked on a certain element, like a button or a menu.

Scroll maps: This kind of map shows you how much did your customer scroll down your page.


How To Make Heat Maps On Your Website For Free?

Now that you know more about heatmaps, let’s move to how can you add heatmap analytics to your website.

You can do that using heatmap.js.

Heatmap.js

It’s free to use, but you need to know how to implement it on your website, or you need a developer to do the work for you.

Now Hetamap.js looks like a nice option for analyzing user behavior and doing some digging, but it doesn’t have a nice dashboard for you, no filters, nothing you’re familiar with.

And there’s this… 

Google Analytics Heatmaps


I would have suggested you take a look at Google Analytics’ Heatmap tool, but they deprecated it.

It might still work for you, so I’ll walk you through the process. 

Go on Google Chrome Web Store; Enter “Google Analytics Heat Map”; Click Install

That was easy! But now you’ll need your account in order to use Google Analytics.

If you don’t have one yet, remember that you can create a free Google Analytics account here.

Once you’re in log in to your Google Analytics account.

Go to your website’s homepage, and you should see a Google Analytics overlay detailing the pageviews, bounce rate, and other analytics metrics.

google-analytics-heatmap-in-action

If this works for you then you’re lucky, but if it doesn’t, well, that’s the expected.

but don’t worry, if you’re looking for a Google Analytics heat map, then I’m glad that you found this article.

If Google’s old tool is not working out for you it’s because hasn’t been updated since 2017,


As I said in my intro which is sad news, Google has killed its heat mapping tool in 2017.

If you try to install it you’ll get the most basic info that you can possibly imagine.

No colorful heatmaps, no detailed analytics, no easy-to-use interface, nothing.

Just a basic Google Analytics dashboard with no heatmap feature whatsoever.

The Google analytics heat map tool was very popular for years.

It gave users the opportunity of seeing how many pageviews and clicks each section on their website had received in an easy-to-navigate interface.

While yes Google has deprecated this extension, it sometimes works, if you’re lucky enough.

If you would like to try your luck I’ll run you through the install process.

Be sure to let us know if it works for you or not.

How to install Google Analytics Heat Map

Go on Google Chrome Web Store; Enter “Google Analytics Heat Map”; Click Install

That was easy! But now you’ll need your account in order to use Google Analytics.

If you don’t have one yet, remember that you can create a free Google Analytics account here.

Once you’re in log in to your Google Analytics account.

Go to your website’s homepage, and you should see a Google Analytics overlay detailing the pageviews, bounce rate, and other analytics metrics.

google-analytics-heatmap-in-action

If this works for you then you’re lucky, but if it doesn’t, well, that’s the expected.

but don’t worry, if you’re looking for a Google Analytics heat map, then I’m glad that you found this article.

If Google’s old tool is not working out for you it’s because hasn’t been updated since 2017.


You can go for Hotjar if you want a free plan, but it’s hugely limited and I don’t think it’ll satisfy your needs.


How To Make Heat Maps On Your Website With Paid Tools?

There are quite some tools that allow you to make heatmaps on your website, like FigPii, HotJar, etc.

We’ve made a round-up of these tools for your convenience so you can check them out here


We’ve made a guide on how can you implement FigPii on your website to get the most comprehensive analytics of all time.

You can check the full guide from here, but I’ll give you a quick rundown to get you started.

1. Signup for FIgPii using this link to get 10% off. Then login into the dashboard.


2. The FigPii code will appear at the bottom section of the dashboard3. Click on “copy code”4. Paste the FigPii Tracking Code into the <head> section of your website.

3. Click on “copy code”

4. Paste the FigPii Tracking Code into the <head> section of your website.

FigPii integrates with major CMS and e-commerce websites, check our full list of integrations right here. 

5. Check your FigPii dashboard to verify the installation. When the tracking code is installed on your site, the tracking indicator will show you that the code is active.

Once you have added the FigPii Tracking Code to your site, you will need to wait for about an hour to check if it is installed correctly. This usually happens the moment your site is loaded with the FigPii tracking code installed in. But there can be a delay for up to an hour before it shows as “Active”.  

6. log in to FIgPii’s dashboard, and go over the heatmap section from the side menu.

7. Press on create a heat map

8. Name your heat map

9. Choose the number of recordings that you want

10. Choose which platform you would like to record, you can choose mobile or desktop.

You’re also able to track new visitors or returning users.

11. Choose which page or pages you would like to track with your heatmap.

12. Configure your map with advanced options that help you create more accurate data

You’re done! Now you’ll be able to track your users like you never could before!

Conclusion 

Adding a heatmap to your website can be done for free, you just need to have the right skills for it.

Or have some luck if you’re trying Google Analytics’ deprecated plugin.

There are some tools that have a free plan yes like hotjar, but their free plan is super limited.

It just doesn’t let you capture as much analytics as you want.

Then we move to the paid tools like FigPIi.

If you want to know why FigPii is the only heat map tool you’ll need! You can check this blog.

We’d love it if you gave FigPii a run, so if you signup through this link you’ll get a 10% off FOREVER

Author