Heatmaps Tracking with Hotjar8 min read

Tracking heatmaps help you understand how your visitors navigate your website, and it is crucial for a solid web design and user experience. You can easily do all of this with Hotjar. Pair this up with Google Analytics, and you’ve got yourself some gold. Let me show you how to set up tracking, and how to gather useful, usable analytics and information. This is not a sponsored post (but that is an affiliate link). This is my “extra credit” presentation for my SEO class – the first presentation was on Schema Markup!

What Are Heatmaps?

Here is the current heatmap of my website, at 342 clicks on the home page.

heatmaps of my website

It’s pretty intuitive to understand, even at first glance. The amount of clicks are color-coded. Blue means cold, or a low amount of clicks, while red means hot, or a high amount of clicks.

cold heatmaps: 4 clicks examplehot heatmaps: 50 clicks example

Why Use Heatmaps On My Website?

It’s easy to think that this information might not be important. After all, out of 342 clicks, only 4 of them were interested in my twitter page – but I still want to showcase that link! It doesn’t make sense to get rid of it or anything. However, I might want to consider re-organizing my links based on what people are clicking. As you can see, my page links are getting more clicks than my out-going links, so I should probably put more useful content on each page, rather than linking out to various other pages. It is a “hub” site after all.

How To Start Tracking Your Clicks

I personally use Hotjar, so that is what I will be going over in this post. Go ahead and sign up for a free account – and get a 15 day free trial of their business tier. You can pay for higher tiers, where you will be able to track more insight, but I’ve found plenty of use for the unpaid version.

Getting Started with Hotjar

Once you’ve signed up, you can go through a super simple Get Started pathway. The first step is to enable visitor recordings. Then, you will be able to create your first heatmap report. You can also opt-in to asking your visitors for feedback, and invite team members if you want. Finally, you’ll get a neat little javascript tracking code, which you just need to copy and paste to your website! It should look something like this:

hotjar tracking code

Adding Your Tracking Code To Your Website

The instructions are simple: paste the code into the <head> of every page you wish to track. This is pretty easy to do on your own website, especially if you’ve written the code yourself. But for this example, I will be putting it in my WordPress blog, using this tracking code manager plugin. Disclaimer: I am using another security plugin that thinks this head injection is unsafe, as expected. But, take that how you will. Now, back on the actual Hotjar site, you just need to verify that you have the code snippet on your page – and that’s it!

Updating your Heatmaps and Settings

This easy set-up created a basic heatmap for you. I want to change some things, such as the name and page targeting. If you go to the edit page, you can play around with the settings, but the caveat is that you can’t change the number of pageviews after the heatmap has started. I changed the name to Blog, and page targeting to multiple pages Awesome! Now we just have to wait for data to collect…

Heatmaps Analysis

When your heatmaps have collected a decent amount of data, you can view them based on device or type. I can see at a glance that I have 151 tracked visitors on desktops, 1 visitor on a tablet, and 110 visitors on mobile. Then, I can the heatmaps by clicks, mouse movements, or scrolls.

Mouse Movement Heatmaps

To better improve your user’s experience, you might want to take a look at their mouse movements. Let’s quickly analyze my mouse movement heatmap:

mouse movement heatmaps

My intended links are getting a decent amount of mouse exposure, which is nice. Some tracking indicating that people are actually reading the words I put on the homepage. There is also some traffic on the top of the doodle, so maybe to improve the user experience, I could create a cute hover effect. For example, when you hover over that cartoon image of me, it waves.

Scrolling Heatmaps

You can also track how many visitors reach a certain point on a page. This might help to improve how your content is structured. The general rule of thumb is to put the most important information above the page fold (where the screen cuts off before the user scrolls). First impressions are everything!

scrolling heatmaps

About 57-70% of my site visitors actually scroll all the way to the bottom of my site (Hotjar lets you hover over certain areas and to see your heatmaps percentage data). Therefore, it makes sense to not put the important data in my footer. I have a legals page and a branding page, but most visitors aren’t looking for that information.

More Awesome Hotjar Features

Let’s take a look at some of the other cool features that Hotjar offers. Though heatmaps are pretty neat, my favorite feature is being able to record the entirety of your users’ visits. Alright, that sounds kind of creepy, but it’s super useful data. You can also work with funnels, forms, incoming feedback, polls, surveys, and recruiters.

Recordings

While recording your visitor’s behavior flow, you can also see their country, the number of pages they’ve visited (as well as which pages those were), how long they spent on your site, their device, browser, and OS. You can also sort the recordings by these attributes. In this example, I sorted by visit time, just because that’s fun to look at.

It’s fairly interesting. Why would someone be spending nearly four hours on one page? More than likely, they just left the page open while also doing some other stuff. If you click play, you can view a nice breakdown of their behavior flow and interactions. As predicted, they only made five clicks, all within the first 15 minutes of their visit. Their last click was to my discord server, so they might have joined the group chat and hung out for a while.

4 hour canadian visit recording

Funnels & Behavior Flow

You can set up a funnel, or user pathway, to see where you are losing your followers. This might be able to give you insight about which pages you should improve. I actually haven’t set up any funnels for my personal sites, but I have for one of my clients’ sites on Google Analytics, and I will have a write-up about it in the future.

Forms & Feedback

I’m just going to group together all of the feedback options. This includes the feedback form you might have opted-in at the creation of your account. It will show you all of your responses and results, as well as give you filtering options.

You can track forms hosted on your site. For example, I have an email list that I’d like to track. After you get enough data, you can generate a report. Unfortunately I don’t have enough data. If you’d like, you can add your email to the list on the left side of my blog!

Hotjar poll on my blog, if for some reason it decided not to pop up for you

You can also set up polls to allow your visitors to give you even quicker feedback. For example, you could ask why they’re leaving (though I personally think that would be fairly annoying), who they are, or what they think of your site/page. For the sake of this post, I will create an example poll only available on this exact page. Feel free to leave a response!

Surveys are also pretty annoying in my opinion, but they can gather useful insight. I made a quick twitter-based survey for my senior project, and based a lot of features on the feedback. I won’t create a Hotjar survey for this page, but you get the idea. You can also recruit your visitors if you want. I might use this feature when I’m looking for beta testers for Opus.

Closing Remarks

I waited about 2 weeks before looking at the Hotjar data collected for my blog. My blog doesn’t generate as much traffic as my website does, so it was interesting to see what everyone was interested in. I do love that it was easy to set up with WordPress plugins.

In two weeks, I was able to collect 101 pageviews, 62 clicks, and 33 recordings. Here is a sample recording of someone browsing my website. You can see that Hotjar tries to hide sensitive information when tracking. It gives you options to view user actions, including clicks, visits, and page resizing. You can also take a quick peek at their session information, which tells you where they’re from, what device they’re using, on which OS and which browser.

If you want to try out Hotjar, you can use my affiliate link to try out the business package for a while! Leave a comment letting me know what you think of it 🙂

 

love,
maryn


 

Leave a Reply

Your email address will not be published. Required fields are marked *