Introduction to Heat Maps, Scroll Maps and Everything in Between


Most marketers see conversion rate optimization as a priority for their website optimization programs. It’s no longer a question of ‘if’ but a question of ‘how’ – how do you start with Conversion Rate Optimization (CRO)?

Webmaster’s Note: This is not an entry for advanced CRO. If anything, it’s an introduction to what CRO is and how you can start.

Ever heard the phrase “to make more money, you gotta have money” ? Conversion Rate Optimization is geared towards making you more money. As chances may have it, you won’t be able to do it well without the right initial investments in the right tool-set.

Heat Mapping

Heat Maps are an awesome way to know where people are clicking. Here’s a heat Map taken from our free registration page in SEO School:


As you can see, people are clicking on the registration form to create their account. Right there and then we know that this is an effective landing page for our free subscribers. Is it the effect of the registration form? Heck no. It’s a combination of context that helped the form to be in its current state of effectiveness.

Here are some elements that helps affect the context:

  1. Landing page Copy
  2. Above-the-fold layout
  3. Graphic Images
  4. Referring page
  5. Testimonials

If you get all these things right, conversion increases. It’s not easy. Heat Mapping is a great way to verify if you’re doing all the little things correctly.

On the other hand, you can also use heat mapping to see if people are clicking on the wrong places. Perhaps your button is not eye-catching? Or there are too many other options they could click on in a single page. Heat Mapping is an awesome source of data that should be used to direct your CRO.

Scroll Mapping

Scroll Maps are a kind of a big picture setter on where most of your users settle on your page. Not everyone has the same screen size. So you’ll need to know where your users stay the most when your landing page is longer than the fold. A scroll map looks something like this:

Scrollmap for SEO Hacker School

Scrollmap LegendBased on this example, I know that I should make meaning of the 4 circles I have there – Foundational, Marketing, Technical and Copywriting. Me and my team haven’t finished it yet but we’ll ship it out once it’s done. We got the idea to make those buttons clickable because of the data we got in this scroll Map.

Here’s the legend behind the scroll map color code ->

If you’re wondering what tool I use for my heat maps and scroll maps, I use Crazyegg. It’s a CRO tool that provides heat mapping and scroll mapping capabilities for as low as $9 a month. It’s really easy to install their tracking script and it doesn’t bog down your page load speed.

You should check it out.


One other thing I love about Crazyegg is their Confetti tool. It tells you where the clicks came from. In this case, there are lots of clicks that came from other parts of our site ( and there were clicks that came from the main site ( Other than that, search engines and Slideshare seem to refer the rest of our clicks.

Confetti tool

This is pretty helpful in trying to know what other referring sites have brought you clicks – and where exactly those users clicked on.

Poor Man’s Heat Map

If you don’t have the credit card but have the technical know-how to set-up an internal heat map, try Labmedia’s Clickheat.

Clickheat screenshot

It takes some setting up to start (you have to download it and upload it via FTP) but it’s a pretty good free alternative if you don’t have the budget to invest on Crazyegg.

We’ll be talking more about CRO (and why it’s the next big thing after the rise of SEO) in this series.

Tips for Keeps: Sign up with Crazyegg and take advantage of their 30-day free trial. You’ll get to have a better picture if it’s worth investing your $9 a month on.

Share on:
Sean Si

About Sean

is a Filipino motivational speaker and a Leadership Speaker in the Philippines. He is the head honcho and editor-in-chief of SEO Hacker. He does SEO Services for companies in the Philippines and Abroad. Connect with him at Facebook, LinkedIn or Twitter. Check out his new project, Aquascape Philippines.