WordPress Designer & Developer


Heat Maps, Scroll Maps, and Confetti: See Exactly What Your Website Visitors Click On and How Far They Scroll

A Heat Map is like a snapshot of a web page that has been dusted for visitors’ finger prints. It shows us what they’ve clicked on. And its close relative, the Scroll Map, shows how far down the page they’re willing to scroll. Let’s see how these, and yes, Confetti, can help improve your website.

All Eyes Here Please!

When I design a website, or redesign a poorly performing web page, I rely on years of design experience and intuition to visually prioritize elements— relative to my client’s predefined success metrics. It’s like lighting a stage— I want all eyes on the main actors. For example,  the “main actors” for a landing page are benefits, features, and calls-to-action (e.g., “Try Our Demo”; “Buy Now”; “Schedule an Appointment”; etc.).

But recording and seeing what visitors have actually been clicking on over time, can be an eye-opening experience.

For example, on a version of my own website, I discovered that visitors to my home page were clicking on the large letters (“ODDO”) in the banner graphic. That surprised me, because it’s not clear to visitors what happens by clicking there… which at the time, was nothing!

Once I realized this, I revised the banner— so that clicking on those letters would take visitors to my “About” page, which translated to more page views.

Do People Really Scroll?

Well, yes, according to the Scroll Map, relative to the design of my website, they do. But you can see that activity significantly decreases as we move down the Scroll Map/page. This suggests that there is room for improvement. Maybe a button or arrow just under the large banner graphic that prompts visitors to scroll down.

I also noticed that visitors were more likely to click on the “Services” menu, rather than scroll down (just a bit) to see shortcuts to the individual services on my Home Page. Glad I have more than one path to take them there.

See Who Throws the Most “Confetti”

Another variation of the Heat Map, Confetti, can display which referral sources generate the most clicks, and perhaps more importantly, what visitors from each referral source tend to click on most. In my case, Google and direct visits (word-of-mouth) drove the most traffic, and the quality of these clicks seem to be better (i.e., prospects seem better qualified and are interested in learning more about my services).

Introducing Crazy Egg

I looked at several Heat Map providers, but found Crazy Egg to be the most attractive for smaller businesses, and certainly in my case, when considering their pricing structure. Although Heat Mapping is nothing new, the main reason I haven’t put it into practice, is because of cost. However, you can try it free for 30 days, and after that, it’s $10 per month for non-mobile Heat Maps and up to 10 pages. I think this is quite reasonable, and yes, the screenshots I used were produced using Crazy Egg.

Since I’ve written this Post, I began using HotJar. At the time of this writing, the Personal/Basic Plan (“free forever”) is a great way to get your feet wet. In fact, I use it for my WPSimplifyd maintenance clients.

But What About Google Analytics’ “In-Page Analytics”?

Let’s not forget that Google Analytics has a feature under the “Behavior” menu called “In-Page Analytics” which can be similarly useful, and I’d encourage you to give it a try. However, I’ve found it to be a little rough around the edges. And unlike Crazy Egg or HotJar, it only displays click events on clickable objects, such as buttons and links. Therefore, I would not have known my visitors were also clicking on “non-clickable” objects.