What is Hotjar and how to use it

Content of the article

/01 What is Hotjar?
/02 Why choose Hotjar?
/03 Key features of Hotjar
/04 How to install and configure Hotjar
/05 Setting up Hotjar on popular platforms
/06 Examples of Hotjar usage
/07 Conclusion

What is Hotjar and how to use it

Що таке Hotjar та як ним користуватись | WEDEX

When analyzing website traffic, Google Analytics is commonly used as a universal tool for collecting quantitative data about visitors, traffic sources, and conversions. However, GA tables and graphs rarely show where users click, how they scroll, and why they leave the site. That’s where Hotjar comes in, and it’s important for SEO optimization: it adds live heatmaps to the dry numbers.

In this article, we will learn what Hotjar is, how to quickly install and configure it, and what features are available in the free plan. For clarity and better understanding, let’s look at practical cases that demonstrate how Hotjar helps improve SEO and user experience.

What is Hotjar?

Hotjar is an all-in-one user behavior analytics platform that combines heatmaps, session replay, surveys, and a rich set of additional tools in one single interface. This service helps to combine quantitative data from classic analytical tools (such as Google Analytics, Mixpanel) with qualitative insights into why users act in a certain way. Its integration into SEO strategy allows you to better understand how users interact with content and what exactly influences their behavior.

Mar P., Product Researcher at Hotjar, notes:

«The main goal of UX research is to create a product that works for your users and your business. It’s about understanding real user problems so that the team can find solutions and move away from assumptions.»

So, Hotjar is designed with a focus on getting started quickly: for small businesses and freelancers, the basic free plan includes up to 35 session recordings per day, unlimited heat maps, and 365 days of data storage without the need to enter payment information. This allows users to test hypotheses, track down the first usability issues, and evaluate the value of the service before upgrading to a paid plan.

The key advantage of Hotjar is its flexible integration with any CMS and analytical tools: you just need to insert a single JavaScript code or set up a tag in Google Tag Manager to start collecting data on all pages of the site. Essentially, Hotjar acts as a tracking pixel that is launched during each page visit.

Moreover, this pixel can be quickly adapted to the specifics of your site – for example, you can specify which elements should be ignored or add triggers to collect feedback only in certain scenarios. This makes it not only informative but also quite flexible. Its use significantly improves behavioral analytics, which is an important component of SEO optimization.

The platform also supports integrations with Slack, Jira, and Microsoft Teams, which speeds up the dissemination of important insights between teams and allows you to respond to identified problems instantly. For large projects, Hotjar offers fine-tuning of data sampling. This means that when the session limit is reached, the pixel automatically distributes the data collection throughout the day without losing history and prevents distortion of statistics.

Hotjar also pays great attention to privacy and GDPR compliance. By default, the service anonymizes users’ IP addresses and allows you to exclude items containing personal data from registration. This makes Hotjar pixel safe even for websites with strict requirements for information processing.

Among the exclusive features that go beyond the classic heatmaps and session videos are Highlights (command marking of key moments in sessions), Trends (identifying patterns in large amounts of data), and User Attributes (adding custom attributes to divide the audience into segments).

Hotjar’s paid plans start at $39 / €39 per month and have extended limits: up to 100 sessions per day, detailed filters, and priority support. These plans are suitable for websites with high traffic or a complex analytical structure.

Thanks to this approach, Hotjar is currently used by more than 1.3 million websites and applications – from small startups to large corporations – that want to turn analytics into real insights into user behavior and at the same time improve the SEO performance of their pages.

Why choose Hotjar?

Hotjar doesn’t just show you numbers – it helps you understand what’s happening on your website and why. In a few clicks, you get visual heatmaps, live video sessions, and direct feedback from visitors, which allows you to make informed decisions without complicated guesswork.

The main advantages of Hotjar:

Deep understanding of users.

Heatmaps illustrate where visitors click most often, how far they scroll, and what elements they ignore, helping you quickly identify hot spots and design issues. You can filter the data by traffic source, device type, or event to compare the behavior of different audience segments and see the most valuable insights.

As a Gogoprint representative says:

«When our users have a better experience, it has a positive impact on conversions and ROI. Hotjar helps me identify problem areas and create the experience people expect when they visit our website. It’s like reading their minds.»

Contextual behavior and quantitative metrics.

Session videos capture every click, cursor movement, scroll, and even text entry in form fields, so you can see at what stages users encounter difficulties and abandon further actions. At the same time, form analytics shows which fields cause delays or are left blank, which helps you optimize their structure and reduce the bounce rate. And if you combine Hotjar data with Google Analytics, for example, filter heatmaps by GA4 events, the analysis becomes even deeper. This way, you can correlate quantitative metrics with behavioral insights and prioritize issues for fixing faster.

Fast and flexible installation.

Just insert a single JavaScript code in the <head> or configure a tag in Google Tag Manager to start collecting data instantly without any developer involvement. After that, Hotjar integrates seamlessly with Slack, Jira, and Microsoft Teams, allowing you to share important insights with your team and respond quickly to critical UX issues.

According to Laura Paplauskaite from Bit Zesty, «remote usability testing is becoming increasingly popular, and Hotjar makes it easy and effective even for distributed teams.

With Hotjar, businesses get a powerful set of tools for in-depth usability analysis without any extra effort or cost.

Key features of Hotjar

Due to the fact that Hotjar combines several powerful tools in a single platform, users of the platform get a comprehensive analysis of the behavior of visitors to their web resources. And this, in turn, helps to quickly identify problem areas in the conversion funnel.

Основні функції Hotjar | WEDEX

Heatmaps

Heatmaps visualize clicks, cursor movements, and scrolling depths using a color scale, where red indicates hot zones and blue indicates cold zones. Thanks to this visualization, you can easily see which blocks of the site visitors skip and which ones they actively interact with, for example, whether they pay attention to the subscription form or the large CTA button. Thus, heatmaps help you make decisions about optimizing content and element placement: move key areas closer to the center of the screen, resize buttons, or shorten text in places where users do not reach the end of the page. This approach helps to increase conversions and improve usability in general.

Visitor Recordings

Visitor Recordings capture the full user journey from the first click to the page exit; including scrolling, entering text in form fields, and responding to dynamic elements. It’s almost like watching a visitor’s screen in real time, but with the ability to speed up and stop the recording to focus on key moments. Thanks to flexible filters, you can separate sessions with successful conversions, repeat visits, or with errors and early exits at certain stages of the journey. After that, the most interesting excerpts can be easily exported or shared with the team, for example, to show developers where to optimize code or change UI elements, and marketers which metrics show the highest engagement. This approach allows you to conduct in-depth analysis and quickly eliminate problem areas in usability.

Conversion funnels

Funnels display the user’s path from the first login to the target action – purchase, registration, or subscription – while showing absolute values and percentage of visitors at each step. This visualization immediately reveals the most critical points where audience loss occurs and suggests the direction of optimization.

For example, a low conversion rate among mobile users may indicate an overly complicated form or slow page loading, which prompts you to simplify the fields and adapt the interface to touch input. At the same time, segmenting data by traffic source or geography helps to better understand the behavior of individual groups and suggests whether it is worth changing the design of buttons, adding instructions, or reducing the number of required fields. This approach makes the funnel smoother and the overall conversion rate higher.

Surveys & Feedback Polls

Surveys & Feedback Polls allow you to combine quantitative metrics with a deep understanding of visitors’ motivations, finding out why they leave the page, what attracts them or scares them. By setting up surveys based on various triggers – for example, after a certain time on the page, when a specific percentage of scrolls is reached, or even when a user intends to leave the site – collecting feedback becomes as contextual and unobtrusive as possible. All responses are included in a single report, where you can quickly highlight the most frequent questions or comments and make quick adjustments to the content or design. This approach not only improves the quality of UX, but also helps to adapt the questionnaire to any page, from landing page to blog, providing a constant flow of important insights for further analysis.

Form Analytics

Form Analytics tracks in detail which form fields create the most difficulties – it records the time it takes to fill out each field, the number of validation errors, and the points of maximum user drop-off. This allows you to see whether visitors get stuck on difficult fields (for example, with date of birth or phone number) or leave the form without even starting to fill it out. The data obtained uniquely complements insights: you can confirm hypotheses – whether unnecessary drop-down lists really distract attention, or whether incorrect field labeling stops the user. Based on this, the form is checked iteratively: the structure is simplified (several fields are combined into one), hints are added directly to the field, or unnecessary elements are removed.

Thanks to this comprehensive approach, the filling process becomes more intuitive and comfortable, which significantly reduces the percentage of form bounces and increases the overall conversion rate.

Each of Hotjar’s features complements classical analytics, turning dry numbers into clear visual patterns and direct user feedback. This set of tools allows you to identify critical failure points, test hypotheses, and implement improvements based on real data and focusing on the visitor experience.

How to install and configure Hotjar

To start collecting data on visitor behavior, Hotjar offers three main installation methods: automatically through Google Tag Manager, manually through the tag management system, and by directly inserting the script into the website code. All of these approaches do not require deep technical knowledge and allow you to connect Hotjar in a matter of minutes.

Як встановити і налаштувати Hotjar | WEDEX

Installation via Google Tag Manager (automatic)

To implement this method of installing Hotjar, according to the official instructions, you need to follow the following steps.

Check the availability of GTM.

First, make sure that Google Tag Manager is already installed on your website. If you don’t have it, just create an account and a container according to the official Google guide, and then add the basic code of the tag management system to the <head> and </body> of your template.

Copying the Hotjar script.

Log in to your Hotjar account and go to the Sites & Organizations section. Find the site you need and click Install Tracking Code. Copy the provided code snippet – this is the code that will be run through the tag manager.

Create a tag in the tag management system.

Log in to the Google Tag Manager interface, go to the Tags tab, and click New. Select the Custom HTML tag type, paste the copied Hotjar script into the HTML field.

Set up the trigger.

Add the All Pages trigger to make Hotjar run on all pages of the site as soon as the container is loaded.

Validation and publishing.

Before publishing, enable Preview mode in the tag manager to make sure the tag works correctly. Then click Submit → Publish to make the changes active.

Final verification.

Return to Hotjar and click Verify next to the site name. A green check mark ensures that data collection has started successfully. Usually, the first behavioral visualization appears in the Hotjar interface within 30-60 minutes after the tag is published.

Next, let’s look at an alternative approach with full control over the code – manual installation through the Tag Manager.

Manual installation via GTM

If you need full control over the code and script versions, you can set up Hotjar manually in Google Tag Manager. This approach allows you to make changes quickly and avoid unexpected updates. After automatically adding or directly pasting the code, this method will come in handy for administrators who want to have an accurate overview of all tags in a container.

So, the list of actions is as follows:

Get a Hotjar Site ID.

Log in to your Hotjar account and copy the unique site ID in the Sites & Organizations section – this number determines where to send the collected data.

Create a new tag.

In Google Tag Manager, go to the Tags tab, click New and set a tag name, for example, «Hotjar Manual».

Insert the Hotjar script.

In the tag settings, select the Custom HTML type and paste the standard code with your Site ID:

(function(h,o,t,j,a,r){

h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};

h._hjSettings={hjid:YOUR_SITE_ID,hjsv:6};

a=o.getElementsByTagName(‘head’)[0];

r=o.createElement(‘script’);r.async=1;

r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;

a.appendChild(r);

})(window,document,’https://static.hotjar.com/c/hotjar-‘,’.js?sv=’);

</script>

Setting up the trigger.

Add the All Pages trigger so that this code runs on all pages of the site after the container is loaded.

Checking and publishing.

Enable the Preview mode in the tag management system to make sure the tag is working correctly, then click Submit → Publish, and your Hotjar will start collecting data.

After successfully publishing the first session records and heatmaps, you should only have to wait a few minutes to see the first results.

If none of the methods work for you or you need the simplest option, try directly inserting the script into the site code, which will be discussed below.

Directly inserting a script into the site code

The simplest installation without additional tools is to manually add the Hotjar script to the website template. This allows you to start collecting data almost instantly and not depend on the container settings.

Step by step:

Copy the Hotjar script.

Log in to your Hotjar account, go to the Install Tracking Code section and click «Copy» next to the code snippet – it contains your unique Site ID.

Add it to the <head>.

Open the HTML template of your website, find the closing </head> tag and paste the copied JavaScript right before it. This ensures that Hotjar will load immediately after entering the page.

Alternative placement before </body>.

If you can’t edit the <head> (for example, due to CMS restrictions), you can insert the same code right before the closing </body> tag. In this case, the service will start collecting basic data immediately after the page loads.

Check the correctness of the installation.

Go back to the Hotjar interface and click the Verify button next to the site name. A green check mark will indicate successful activation and the start of data collection.

After these steps, Hotjar will immediately start collecting additional information about user activity.

In the next section, we’ll look at platform-specific examples of how to add Hotjar on popular platforms to help you quickly set up Hotjar on popular platforms.

Setting up Hotjar on popular platforms

Regardless of whether your website is running on a CMS or a complex single-page application, Hotjar offers ready-made solutions for quick installation. You just need to choose the right option and follow the simple steps to start collecting data without delay.

WordPress

For WordPress sites, the most convenient way is the official Hotjar plugin. After installing and activating the plugin, just open the plugin settings, insert your Hotjar Site ID, and save the changes. All the necessary script is automatically added to the <head>, and the platform will start collecting the click map and video sessions without any additional effort.

Shopify

Shopify stores support direct theme editing. First, go to Online Store → Themes → Edit code, find the theme.liquid template and paste the copied Hotjar script before the closing </head> tag. After saving the changes, you will start monitoring the behavior of visitors without any additional settings.

Single page applications (SPA)

In the case of SPAs in React, Angular, or Vue, additional steps are required to correctly track navigation between «virtual» pages. The official Hotjar documentation has special guides for each technology: they explain how to manually call hj(‘stateChange’, …) after a route change and ensure that the user’s session is fully covered without any breaks.

The way you choose to install Hotjar depends on your level of code access and whether you have Google Tag Manager. The automatic approach through GTM is the fastest for marketers and analysts, the manual approach gives you maximum control, and direct script insertion is suitable for simple cases or non-standard platforms.

Examples of Hotjar usage

To see how Hotjar transforms data into actionable insights, let’s take a look at real-world examples from different industries. Each case study demonstrates how the combination of user behavior visualization, surveys, and form analytics helps to identify problem areas, test hypotheses, and significantly improve UX and conversions.

E-commerce: +50% increase in CTA click-through rate.

The online store Hans van Leersum analyzed heatmaps to understand why the «Add to Cart» button is overlooked by most users. After moving the button closer to the main content, increasing its size, and changing its color, the CTR jumped from 22% to 33%. This means a 50% increase without additional investment in advertising.

SaaS: – 50% bounce rate and + 17% time on page.

The Netguru team used session recordings to identify the stages at which users often left the site. Additional surveys explained the reasons for bounces, after which key pages were optimized and navigation was simplified. As a result, the bounce rate dropped by 50% and the average time on page increased by 17%.

Intertop (Turum-burum): + 55% conversion rate and + 11.5% AOV.

UX/UI agency Turum-burum conducted A/B testing based on heatmaps and session recordings for its client Intertop. Having identified weaknesses in the product filters of and checkout, the team made design changes and simplified the shopping process. This resulted in a +55% increase in conversions and +11.5% increase in average checkout, and a 13.4% drop in checkout bounces.

HubSpot Academy: +10% of completed subscriptions.

After adding Hotjar Surveys, the HubSpot Academy team launched a survey on the course registration page. The survey revealed that users were scared off by too many fields. After redesigning the form and adding embedded prompts, the completion rate increased by 10%.

Unbounce: 60-70 new trial signups per month.

The Unbounce team used Hotjar to analyze session records and discovered an unexpected barrier in the signup form: the address autofill feature, which was meant to simplify the process, was actually making it more difficult for some users. Thanks to these insights, they made changes to the UX flow, making the registration process easier and more convenient. This helped to increase conversion rates and consistently receive 60-70 new registrations for the trial version every month, without additional advertising costs.

Credo: +220% increase in client revenue.

Credo, a UK-based CRO agency, used Hotjar’s features, such as heatmaps and session recordings, to gain a deeper understanding of visitor behavior on the website of its client V1CE, a manufacturer of NFC business cards. The analysis showed that users didn’t immediately notice key call-to-action (CTA) buttons and were confused about the structure of product pages. Based on these insights, the team redesigned the placement of CTA elements, simplified navigation, and optimized the order in which information is presented. The result was not long in coming: sales revenue increased by 220%, and the user experience became more intuitive.

Each of these cases confirms it: Hotjar is a tool that helps to turn dry numbers into clear visual insights and direct feedback.

Conclusion

Hotjar is more than just a tool for viewing heatmaps or session recordings. It is a powerful ally in creating websites that really work for the user. More and more companies are moving away from assumptions to making decisions based on real data, and that’s where Hotjar demonstrates its value. Given the current UX trends and growing online competition, services like Hotjar that combine quantitative and qualitative analytics are becoming not just useful, but essential to effective user experience.

In the coming years, we can expect even deeper integration of such solutions with CRM systems, AI analysis of user behavior, and automatic recommendations for improving interfaces. Hotjar is already taking steps in this direction, which means that its role in digital strategies will only grow.