Free Google Analytics Powered Heatmap: A Crazy Egg Experiment

A picture is worth 1,000 words … and 10,000 data points.

There is no shortage of data available to all of us at our fingertips. The challenge now is getting the data in a format that makes it easy to understand, interpret, and ultimately, use to ask better questions and make better decisions.

Google Analytics is one of those problem areas; rich with data and information, but challenging to understand and even harder to translate into insight and action. Crazy Egg launched at the same time as Google Analytics, and for almost 15 years hundreds and hundreds of thousands of companies have used Crazy Egg in partnership with Google Analytics to get to insight faster.

Which prompted the question: how can we do even more to help people get insight from Google Analytics faster?

Heatmaps have always been an excellent way to get rich, powerful, comprehensive insights, quickly. However historically, in order to get even a reasonably accurate heatmap, you had to install a script on your website, and then wait for new visitors to engage with your site before a valuable heatmap is made available to you. 

Installing a JavaScript code to precisely track elements on a page is still the only foolproof way to get an accurate heatmap. It’s also the only way to do more complex and powerful layers of information atop that heatmap, like understanding scroll depth and engagement, segmenting users into cohorts, and creating individual recordings of users interacting with your site. You need a script to do make these complex insights possible. 

But what if there was a faster way to get started?

As the creators of the website heatmap in 2005, we’ve never been satisfied with the effort required to get a heatmap -- and all of the powerful insights they provide -- in the hands of our customers. As we do more and more work with Google Analytics, one of our Senior Engineers, Rubem Carneiro, had an aha moment:

  • “We can create a smart, intelligent, approximation of a heatmap using historical GA data.”

And that’s precisely what we’ve done with our new Free Google Analytics Heatmap. Found a way to get you insights from your Google Analytics data, faster. Taking analysis down from tens of minutes to a few seconds. 

Click here to get started!

The Process

How is that possible? Here’s how our Google Analytics Heatmap is built:

1) Using Google Analytics to Identify Subsequent Pages and Click Frequency

First, through a “previous page query” in Google Analytics, we are able to look at any specific URL and then, identify all pages a user clicks to visit subsequently. Essentially, you see user journeys, from the URL submitted to all subsequent pages. The data you get shows both which pages are visited, as well as, what percentage of traffic visits those subsequent pages. In effect, weighting the links by traffic. This three dimensionality is critical to the construction of the heatmap because we can understand which links on a page are clicked and with what degree of frequency. 

Note: This is also highlights one of the shortcomings of this approach. If, for example, you have a single link (like “Contact Us” or “Login”) that appears multiple times on the same page -- Google Analytics can’t parse these clicks. Which is why whenever Google Analytics tries to do an overlay, these clicks end up being aggregated and you lose visibility into which of the links in the UI was actually clicked.

2) Using Crazy Egg to Map Google Analytics Clicks to Actual Elements and URLs on the Page

Next, Crazy Egg takes the URL that you’ve submitted, and indexes the page. Identifying and pulling out all page elements and URLs. Once these have been identified, we match the elements on the page to the results we’ve identified from the previous page query run on Google Analytics. This processing takes a few seconds, but that’s because we are indexing the page and then associating the clicks Google Analytics identified to actual elements and URLs on your page.

3) Render the Free Google Analytics Heatmap

Once the associations are made, we shift to presenting the data to you overlaid atop your own website so you can see the data in context. Any URL that is clicked (which translates to any page element or button or URL) appears on the heatmap with some color treatment. Then, based on the frequency of clicks on those elements, the color is intensified (blue means fewer clicks, brighter colors mean more clicks). 

One of the most powerful tools within Crazy Egg is our Scrollmap, which shows how people engage and how attention is distributed on a page based on scroll depth (where do people pay attention and where do people stop paying attention). As a result, we’ve added some additional intelligence to how clicks in heatmaps are distributed when the same link appears in multiple places on a page. We factor in both the size of the element containing the link as well as it’s x and y coordinates on the page, which allows for a more accurate, though still approximate, placement of those clicks.

The final step for rendering the Google Analytics derived heatmap, is employing a Gaussian function to help distribute the clicks on each element in a way that mimics natural, organic user behavior. Without this approach, you’d see all clicks on precisely the same spot on the element on the website. The Gaussian function allows the clicks to be distributed in a more natural way, adding further realism -- using a mathematical framework -- to the heatmap.

Ready to give this a try? Click here!

A Helpful, Insightful, Hopefully Appetite-Whetting Heatmap

The result should first help people understand the importance of visual data. I have not met a person who finds Google Analytics fun or easy to use or interpret. It’s powerful, but that doesn’t make it even accessible by many. This heatmap becomes a way for you to turn what would have been tens of minutes of analysis in GA into a few quick seconds of analysis and inspiration -- leaving the remaining time for you to pursue ideas to fix what’s broken and make improvements.

This heatmap has truly just scratched the surface. We also hope that this heatmap shows you what’s possible with heatmapping technology. Why we believe anyone with a website should be using a tool like Crazy Egg to quickly understand their customer experience, find inspiration, and test ways to improve their experience and website conversions. 

This isn’t a substitute for the power of fully populated heatmaps (scrollmaps, referral maps, click maps, overlays and more). It’s an introduction. We invite you to get even more powerful visual reporting with a Free 30 Day Trial of Crazy Egg here.


1. Why are there so many clicks on my logo on my homepage?

This happens because Google Analytics data shows that a lot of customers are clicking or accessing the root page /. Since the logo usually has a link to the root page, the algorithm adds a bunch of clicks to it. People could be reloading the page or actually clicking on the logo, but there is no way to differentiate them by only looking at Google Analytics data.

2. Why are there such stark contrasts between where clicks are and clicks aren't?

Using the Google Analytics data, we can only show clicks on the actual element. While people click all sorts of places on the page, these would only show up on real Crazy Egg heatmaps. On the Google Analytics heatmap, they will only show up right on an element. So it’s either on an element (hot) or nothing at all (total emptiness). This is a limitation of Google Analytics and an important reason why it's valuable to look at Crazy Egg's accurate heatmaps to understand your page.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us