Why your website needs Hotjar heatmaps and recordings

How are your visitors using your website? Are they able to find what they’re looking for or are they doing what you would like them to do?

My guess is no, and even if they are – there is always room for improvement. This is why you need heat maps and site recordings on your website. Hotjar is the tool that is going to help you achieve this.

Hotjar provides you an easy way to truly understand your web and mobile site visitors. It will show you your hottest opportunities so you can optimise your website for growth.

Today I’m going to do a run through with you and show you how to sign up to Hotjar, add it to your website and create heatmaps & recordings so you can start tracking your website visitors to truly see what’s going on.

Step 1 – Register an account with Hotjar

Visit the Hotjar website and click on the red ‘Try it for free’ button in the top right corner. Start by entering your Name and Email Address.

Get Hotjar
Step 1 - Register a free account with Hotjar

Register your free account with Hotjar

You will step through a few screens with some questions to answer regarding your account details and the website you want to start tracking.

Set your Hotjar password

Set your Hotjar password

Set you Hotjar account details
Set your Hotjar preferences

Set the website URL you want to Hotjar to start tracking
Set the website URL you want to Hotjar to start tracking

Step 2 – Add the tracking code to your website

Hotjar tracking code to add to your website

Copy the tracking code by clicking the ‘Copy to clipboard’ button

Start by adding the JavaScript tracking code to your site. Copy and paste it into the <head> tag on every page where you wish to track visitors and collect feedback.

This step may be a little different for everyone depending on your website structure. This website is built using WordPress so I will show you how it’s done on a WordPress website.

The easiest and safest way to add this tracking code is to first install a plugin called Head, Footer and Post Injections. This will allow you to add the tracking code without having to worry if you want to update or change your WordPress theme. Generally, I always try to avoid adding too many plugins, but this is a plugin you will likely use quite often.

Install the plugin and add the tracking code in the <head> Page Section Injection (on every page) field. (Don’t forget to click Save).

Step 2 - Add hotjar tracking to your WordPress website

Add the Hotjar tracking code to the <head> section of your website

For other website setups such as Squarespace, Shopify or Wix, find the area where you’re able to add code to the <head> section and paste the tracking code in.

Test the tracking code has been entered correctly by navigating back to the Hotjar dashboard and selecting the ‘Verify Installation’ tab.

Verify the Hotjar tracking code has been added to your website correctly

Verify the Hotjar tracking code has been added to your website correctly

A new window will appear with a box in the top left hand corner with a success message if the tracking code has been successfully added to your website.

Hotjar tracking code successfully verified

Hotjar tracking code successfully verified

Step 3 – Create a new heatmap

Setting up a heatmap on the URL you want to find data on will allow you to see the hotspots of the page. The heatmap will give you a full overview of what your visitors click on, how they move the mouse and how far down the page they are scrolling.

You will be surprised with the results you start to get. One area I noticed is a lot visitors were clicking on an image in an article where I had a link underneath it to a related article, however the image itself didn’t have a link on it. I was able to quickly update the image to include the link related to the article which lead my readers to the related article.

  • Navigate to the Heatmaps page and select the ‘New Heatmap’ button
  • Give your new heatmap a name. I name it by whatever page I want the heatmap on, click Next
  • Select the number of pageviews. The Basic plan allows you to track 1000 pageviews per heatmap, this is selected by default, click Next
  • Enter the URL of the page you want the heatmap on. For example, I would add https://centralcoastwebdesigner.com.au if I wanted the heatmap on the homepage of my website. Seeing as I know exactly what page I want to track, I can select the Exact URL Match option from the dropdown list, click Next
  • That’s it! Click the ‘Create Heatmap’ button and you’re done.

Depending on how much traffic you get to your website, it may take a few weeks to get decent results from the heatmap.

Step 4 – Create a new recording

Recordings allow you to watch exactly how visitors are using your website. It allows you to replay sessions of real visitors, view user actions and take notes. By seeing your visitor?s clicks, taps and mouse movements you can identify usability issues on the fly and then update these areas to improve your users experience.

  • Navigate to the Recordings page and select the ‘Record Visitors’ button
  • Select the number of recordings. The Basic plan allows you to track 100 recordings, this is selected by default, click Done
  • Select the Page Targeting option: The Basic plan allows you to record if a visitor views any page, click Done
  • Select the Recording Options: You can select to only record visitors with click and scroll activity, only users who have been on the page longer than 30 seconds and Record Keystroke Data (I recommend leaving this unticked as it is an advanced feature), click Done
  • That’s it! Click the ‘Start Recording’ button and you’re done.

Again, depending on how much traffic you get to your website, it may take a few weeks to get decent results from the recordings.

Step 5 – Review

Congratulations, you’re now one step closer to learning more about your users. Review your results at least weekly to see how your users are navigating your website and determine if there are any areas you can improve.

Over the next month I will review the data and create a new post with my findings. I will show you areas where I find can be improved and show you how to implement the changes.

I’ll dive deeper into Hotjar in future posts and discuss Funnels and Forms with you.

If you feel I have missed anything or you are unsure of any of the steps, comment below and i’ll be happy to help out where I can.

Web Hosting

Helping Central Coast small businesses succeed in the online world.


CentralCoastWebDesigner.com.au was started in 2018 as a toolbox for local Central Coast businesses who want to build and grow their online presence.
Proudly hosted with SiteGround.