top of page
  • Writer's picturePanshul Khurana

Hotjar - I saw what you did there !!

Updated: Jul 20, 2022

People often complain about the lack of time, when lack of direction is the real problem. - Zig Ziglar

Believe me ! The quote above is the real reason why I am writing after a long time, where lack of time is just an excuse the real problem is the lack of direction, moreover lack of time investment on self growth and learning.

Without wasting any more time let's get started !!

As the title of the blog says : "I saw what you did there !!" , this is literally what Hotjar does for you. Hotjar is the analytics and feedback tool that tracks what users are currently viewing on the page and thier activity like scrolling, link clicks , page movements etc. And also provides a way to collect user feedback using Polls and Surveys.

The idea of the tool is to figure out:

  • The loop holes and the areas to work-around which forces the site visitors / users to abondon the site.

  • Hotjar gives you the ‘big picture’ of how to improve your site's user experience and performance.

  • Figure out what direction your business is taking and according to the visitors activity what direction it should take , after all it is all about providing what users want to see.

  • Provides interface that is easy to understand and are not as bulky as handling and analysing graphs and tacking plots.

Superpowers :

Features is now an old word, let's discus about our hero's superpowers that are the essential parts of hotjar and are the main source of useful information.

Hotjar provides various ways of tracking site visitors and their activity on the site. We will discus all of the methods along with an example of tracking done by hotjar on an example site.

Before we jump into the detailes of superpowers, let me tell you that I have used the following example site: https://panshulK.github.io which is integrated with hotjar using a site ID and a tracking code that hotjar provides, so as to link your site to Hotjar test account (14 days trial) you need to do the following:

  • Create an account and enter the site URL that you want to track

  • Hotjar will provide you a tracking code .

  • Add that code to the <head> tag of your site.

  • This code contains the hotjar Site ID which is unique to every site added.

  • You are done!!

Screenshot of the hotjar tracking code :


All about tracking Code :

  • It queues any events it should track before the Hotjar script is loaded.

  • hjid: Stands for 'Hotjar ID' - Your site's ID. This is the ID which tells Hotjar which site settings it should load and where it should save the data collected.

  • hjsv: Stands for 'Hotjar Snippet Version' - The version of the Tracking Code you are using. This is only needed if Hotjar ever updates the Tracking Code and needs to discontinue older ones.

Heatmaps -

One of the most important superpowers and personally my favourite, the heatmaps concept is exactly like that of an infrared cameras that captures the heat in a specific area. Here, in terms of a website the heat can be referred to clicks, scrolls and taps.

YES!! hotjar actually does that, it shows the most visited and the least visited areas on a page using heatmaps that will let you decide which area to work upon.

It captures that in 3 different ways , Clicks , Movements and Scrolls :


Heatmap for clicks


Heatmap for scrolls

  • Red Zone : The most viewed part of the page .

  • Yellow Zone : When user scrolls to a specific section of the page but it is viewed less than the previous part.

  • Green zones : The least scrolled parts of the page.


Heatmap for visitor's movement.

You can view these reports from the dashboard that hotjar provides for the site that you are currently tracking.

Recordings -

The another most important superpower of hotjar is that it provides the recording of a visitor's session on a site, that will help in finding out where exactly did the user abandon the site while visiting a page on the site. For me this feature is everything, It is more like :

That's IT , I am done !! END of the world !!

Screenshot provided above is the video recording of the visitor's session on the site and on the right side is the information of the visitor's machine like

  • OS

  • Browser

  • Device

  • Location of the visitor.

Conversion Funnels -

Find the biggest opportunities for improvement and testing by identifying on which page and at which step most visitors are leaving the site.

Form Analytics -

Improve online form completion rates by discovering which fields take too long to fill, which are left blank, and why visitors abandon form and page. More than this hotjar provides various options that can help you improve your site's performance in following ways : - Feedback Polls - Surveys - Recruit user testers : Recruit the best possible participants for user research and testing directly from your site. Collect profiling information, contact details and offer a gift in exchange for their help. What is important is to understand how Hotjar heatmaps are generated !! - The first thing that Hotjar does is wait for a visitor to load a page on site. When this happens, the HTML the visitor loads is sent to hotjar servers and three screenshots of that page are taken. The screenshots are taken using Selenium WebDriver that runs a firefox build and also takes screenshot for different devices (Desktop, Tablet and Mobile). - Hotjar creates an 'element map' of all the elements available on the page. The elements are mapped by their tag and their parent elements, and their IDs or classes. - Hotjar will start recording usage behavior from visitors to generate three different Heatmap reports that we have seen above, click, scroll and taps. - The last step is Hotjar 'building' Heatmap report when user accesses the results. When it comes to click/tap and move Heatmaps, Hotjar will check all the elements visitors interacted with and compares them to the previous copy it saved in step 2. If there is a match, it will be reflected in the Heatmap report.

Let's Conclude

As per my understanding , hotjar is a more of a visual tracking tool that generates reports that are pretty much easy to understand. When a business team instead of just numbers, want something that can be discussed right after looking into the reports and something that does not take time to generate, this product is the way to go!!

Let me know, if there is a better option for analytics and tracking and how useful do you find this tool, in the comment section below. :) .

References :

  • https://docs.hotjar.com/v1.0/docs/

  • https://www.hotjar.com

1 view0 comments

Recent Posts

See All

How to configure Layout Builder with Drupal site?

Drupal's most interesting feature is the new Layout Builder which was added in Drupal 8.5. I'm sure you must have read about it and some of you might have already got your hands dirty with this amazin

My Experiments with Drupal 9 and Gutenberg Editor

As a developer, I understand the importance of providing the best possible features to ease out an editor's job. And recently when I was migrating my blog site I faced the challenge that I work every

bottom of page