Examine a Website's Performance with Google Analytics Heat Map

Monitoring the performance of your website is incredibly important to providing a great user experience for your visitors, as well as allowing you to get the most out of your marketing efforts. One item in particular that you’ll want to monitor is how visitors interact with your webpages, which can be tough to analyze using just raw numbers, especially when you want to see how visitors are engaging with every single page on your site.

Fortunately though, you can visualize how a page is interacted with through the use of Google Analytics’ heat map tool. Heat maps have become incredibly useful due to their ability to visualize how visitors are interacting with different elements of individual webpages.

Heat maps don’t just show you what links are being clicked on any given page, they also track where visitors are moving their mouse and where they are clicking, even if it’s not on a link. The visual representation looks a bit like an infrared image. Areas on the page that see the most activity appear bright yellow to red, while the least amount of activity appears blue to green. The hotter the color, the more activity is occurring in that spot. As a result, you can easily see where people are interacting and where they are not interacting at a quick glance.

Using heat maps gives you some insight into your visitors’ behavior and how effective your webpages are at driving engagement. It also gives you the opportunity to identify what parts of your pages are working and aren’t working so that you can make adjustments. For example, if a CTA (call-to-action) is colored blue, it means you’re probably not getting as much interaction with it as you would like. Moving the CTA to a part of the page that is indicated as having more engagement might make it more effective.

Types of Heat Maps

You can customize your heat maps to make use of a variety of different user behavioral data. This allows you to get more specific information about any given webpage. A few of the different heat maps that you can implement include:

Click and Tap

Click and tap heat maps show you where visitors are clicking on your page (or tapping if they’re on a mobile device). Click and tap heat maps are helpful for several reasons. You can see what clickable elements they are clicking on and what clickable elements they aren’t clicking on. If certain links aren’t being clicked on, you may need to move them to a space that’s getting more interaction. They may also be clicking on the links that are distracting them from your CTA. You can remove certain clickable elements to help streamline their experience.

You can also see where visitors are clicking on elements that may not be clickable. This can provide you with information about certain elements that visitors may think are links that aren’t, thereby pointing out a design flaw that could be frustrating your visitors.

Move/Hover

A move/hover heat map shows you where visitors are moving their mouse on screen even if they’re not clicking on anything. This can be very useful since it essentially works as an eye tracking test. By tracking where visitors are moving and hovering their mouse, you can get a general idea of what they are looking at. This, in turn, provides information on what elements are attracting their attention and what elements aren’t, which can be very helpful in improving existing web pages or designing new ones. For example, if you post blog content accompanied by an image, you can use a move/hover heat map to determine whether people are actually looking at the image or not. If they’re not, you may want to reposition the image to a space where they tend to hover more often so that it has a bigger impact.

Move/hover heat maps can also show you why they may not be clicking on certain links (if they don’t move across it, they may have missed it) and whether they are using your product recommendation carousel or not.

Scroll

A scroll heat map lets you see how far down your page visitors are scrolling before they leave. If you’re posting a lot of long-form content, this can give you an idea of whether the content is good or relevant (visitors who don’t like the content will leave the page without scrolling to the end) or if the content is simply too long. If you notice a trend of visitors leaving after only scrolling halfway through your content on multiple pages, then maybe short-form content is more suited for your audience. Scroll heat maps are also effective for determining the best place to position your CTA.

Attention

Attention heat maps use the browser data available from visitors to display how much time they are spending on your pages. Think of them as the broadest version of the heat maps available since they provide the most general view of how users are interacting with your website.

To take advantage of the easy-to-read visual representations of your website activity that heat maps can provide, consider building your own heat map. Fortunately, doing so isn’t too difficult. Here are the three basic steps you’ll need to follow to generate heat maps that you can use to help analyze your website activity on a page by page basis:

1. Create Variables in Google Tag Manager

First, create your user-defined variables in Google Tag Manager. You’ll have to create a few custom JavaScript variables inside Google Tag Manager so that you can capture all the data you need for your report. This includes Click Text Clean, Click X Coordinate, Click Y Coordinate, Screen X Coordinate, Screen Y Coordinate, Relative X Coordinate, and Relative Y Coordinate variables.

Once you’ve created your custom variables, you’ll need to create a trigger. The trigger declares when your tag should “trigger” and send data to Google Analytics. For example, create a new trigger in Google Tag Manager set to fire on all Link Clicks. You can also set certain conditions for the trigger, such as only firing on certain pages. Or instead of setting it to fire on all Link Clicks, you could set it to fire on All Elements. Finally, you’ll need to create an Event Tag. You can name your Event Categories and Actions however you want.

2. Verify Date In Google Analytics

Once you’re done setting everything up using Google Tag Manager, make sure that the newly created data is funneling into your Property properly. Check your Event Label and make sure that all of the data points are passing through the way they should.

3. Build Reports In Google Data Studio

If the data passing through Google Analytics looks correct, then it’s time to build your report using Google Data Studio. It’s worth noting that you can use any number of other reporting tools for this step. When creating a new report in Google Data Studio, you’ll be prompted to connect to a data source. Find the Property in Google Analytics where your newly created data exists and link them together. You will then need to create custom fields. Once this is done, you’ll have to duplicate your Event Label so that you can store one version as a number and one as text. Be sure to give them new names to make them easy to distinguish from one another.

Lastly, take a screenshot of the webpage you want a heat map for and insert it as an image on your dashboard, making sure to size it properly. Then, create a scatter plot visual and add the appropriate fields to your visual. Although heat maps aren’t the most difficult to create, they do require a little bit of know-how when it comes to coding. It may be more convenient to simply work with a professional to generate heat maps on your behalf.

Although heat maps are pretty easy to read (it’s why they’ve become so popular, after all), there’s not much use for them if you don’t know what actions to take based on what you’re seeing. Fortunately, you should be able to leverage the information your heat maps provide to your benefit without the aid of a professional analyst. The following are a few examples of how a heat map can provide you with vital information for improving your website and your ability to convert visitors:

Real-time Data

You can generate heat maps based on real time data, which means that you can see how new webpages are performing. If nobody is visiting pages with new content or they aren’t interacting with new pages, then you can make the necessary adjustments to the page to help it perform more effectively before it’s too late. It’s also a great way to see how new elements that you’ve just incorporated into your site are affecting user engagement.

Reactive Design and Call to Action

When viewing heat maps, you can see where visitors tend to interact with your web pages in general. This can provide you with very useful information on where to place elements that you want them to interact with. For example, if you see that there’s a lot of activity in the top right of your web pages and there’s very little activity all the way at the bottom, you might want to consider placing your CTAs at the top right. If you notice a lot of clicks in spaces where there’s not a lot of clickable elements, then this might be an area of the page where you should be placing more links.

Determine Compelling Content

The key to generating interest in your brand, converting visitors, and nurturing leads is providing high-quality, relevant content. However, it’s not always easy to figure out what types of content your audience likes and what they don’t like. Heat maps can give you some indication of how successful your content is. For example, if a heat map shows that most visitors stop scrolling halfway through your content -- or even just after the introductory paragraph -- it likely means that they lost interest and left your page.

As helpful as heat maps are, they aren’t without their limitations. The following are some of the heat map limitations that you should be aware of:

1. Device Heterogeneity

The type of device visitors are using to visit your site can affect how they interact with your page, especially when you consider the horizontal screen of a computer to the vertical screen of a phone. As a result, heat maps only aggregate data for users that have the same screen resolution configuration instead of aggregating results from users with different screen sizes and resolutions.

2. They Disagree with Dynamic Applications

Webpages are rarely fixed in this day and age. Most modern webpages are dynamic, meaning that they use elements like expanding menus, slide out panels, and animations. Heat maps don’t perform accurately if the elements on the page are constantly changing.

3. Splotches Make for General, Not Specific Data -

Heat maps use splotches of color, which can give you a general idea about website activity; however, it’s not specific. For example, you may see a splotch of yellow over your CTA, but there may be another link nearby it. You’ll have to guess which one users were interacting with since heat maps aren’t providing you with defined conclusions. Basically, you have to draw conclusions yourself based on your interpretation of what you’re seeing.

4. Complicated Configurations

Although it doesn’t take a lot of steps to set up a heat map, many heat map solutions require you to configure complicated URL patterns and regular expressions in order for them to be able to interpret interactions on a page-by-page basis.

Heat maps are a valuable tool for monitoring the performance of any given webpage and also allow you to collect actionable insight into how and where your visitors are engaging with your pages. The simplicity of a heat map does mean that there are some limitations to how you can use them; however, it’s their simplicity that makes them so easy to use -- and they can be quite powerful when paired with other tools.

Want to build a custom heat map geared towards reading your business’ data specifically? Consult with our experts now!