Студия Турум-бурум

How to improve your ecommerce conversion rates with Hotjar

How to improve your ecommerce conversion rates with Hotjar
469

Why should tools like Hotjar be integrated with every online store? In this article you will find examples of how Hotjar helps obtain data on user behavior and contributes to increasing the conversions of your project. Here's the Turum-burum team’s insight into how to install it and which features give priority to.

 Hotjar's example

Why is it a good idea to integrate at least a free Hotjar version with your project?

Hotjar is one of the top online services of UX analysis that helps reveal your users’ behavior, get feedback from them and optimize the website to improve conversion. At the moment, over 350,000 organizations use Hotjar to analyze usability; it has been acknowledged as one of the best services in EMEA in 2021. It is actively used by such companies as Ryanair and Tomtom. You can also take a look at our case of increasing the conversion rate by 55% for Intertop in the Hotjar customer section.  

The service complements traditional web analytics tools, such as Google Analytics, and provides a more comprehensive and clearer picture of how users interact with an online store.

What Hotjar offers:

  • Heatmaps: click maps; scroll maps and move maps;
  • Feedback collection;
  • Viewing of A/B testing recordings;
  • Tracking and recording of user behavior;
  • Conversion funnel analysis;
  • Form analytics;
  • Creation of different surveys;
  • Click tracking.

Main Hotjar features for e-commerce projects (with examples) 

The Turum-burum team actively uses Hotjar in website redesign when applying both ESR and RSR approaches. Below are some features that you should definitely use on your website.

1. Heatmaps

There are three types of heatmaps that are particularly popular in e-commerce projects:

  1. Click map;
  2. Scroll map;
  3. Move map.

Heatmaps let you mark the pages you would like to track, i.e. you can pick certain key pages, or groups of pages, without collecting the data from the whole website. Depending on the project size and traffic, it takes 1-3 days to collect the data.

For example, for such a big, heavy-traffic project as Intertop a couple of days will be needed to collect all the necessary data.

  • Click map displays all the page elements and areas where users click, as well as the frequency of those clicks.
  • It helps:

    • Prioritize design elements on the page;
    • Identify unclickable elements, which users still actively click on;
    • Spot the buttons or links that are getting ignored;
    • Track unexpected user behavior patterns and understand what is happening on the page in real conditions.
Heat map of Tehnoezh
For example, on the click map of the online store Tehnoezh.ua one can see that users scroll banners with current promo actions, which means that they are interested in those.

Another heatmap of the online store Tehnoezh.ua
Another heatmap of the online store shows that users expand new arrivals, which also demonstrates their interest. Maybe, more new arrivals should be presented in the maximized view.

Click maps are particularly important for setting up filters. On the maps one can see which filters are most frequently used by the online store users and place them on the product list pages. 

  • Scroll map shows how far users scroll down the page and how intensely they do it. Thus, you can determine the degree of the customer engagement and percentage of the engaged users of the total number of visitors. 

If the key information is concentrated at the bottom of the page, it is important that the user scrolls down to see it.

Scroll maps on the website of the online store Intertop
Example of using scroll maps on the website of the online store Intertop

From the heatmap one can see that the most clickable part is located in the bottom half of the page – product categories – even though in accordance with the scroll map only 50% view it. This means that the blocks with the most clickable content should be placed higher.

  • Move map lets you track the spots and areas of the page, where most of the user’s attention is focused (images, areas around links, etc). The cursor of the mouse always follows the person’s eye, that’s why it can be used as an eye-tracker, which will let you understand which elements attract most of the user’s attention and if the website design accents were arranged properly.
Move map for the online store ARGO
Move map for the online store ARGO

On this screenshot we can see how the cursor was moved, which areas were viewed, where the users tried to click, and where they were moving further on. The warmer it is, the longer the cursor stays in the area. We discovered that the users navigated to their personal account pages to check their bonuses after promo actions, which means that this action was triggered by discounts.

2. Session recordings

Session recordings are a rather flexible tool that lets you analyze your target audience behavior. Recordings can be saved in favorites and shared with other team members for further work. If Hotjar maps reflect the situation on separate pages and groups of pages, recordings show the dynamic  interaction of a real user with the website in general:

  • Entry point of a website;
  • Navigation from page to page;
  • Whether the user enters data;
  • If the user makes mistakes, and if yes, where?
  • Point of failure and exit point;
  • Spots where rage clicks occur (moments, when users repeatedly click and tap, because they are frustrated); etc.
Rage clicks example
Rage clicks example: A screenshot of the recording, when the user couldn’t find the product he/she needed.

A recording can be filtered depending on the pages, devices, countries, etc. 


Even the free version offers numerous filter options
Even the free version offers numerous filter options

3. Watching recordings of A/B testing

Hotjar lets you connect heatmaps to test pages. This helps:

  • Reveal user behavior on test pages;
  • Determine which variation works best;
  • Find growth points;
  • Identify which features need optimization; etc.

4. Collecting feedback from users

This is a perfect tool to find out (without pressure) what users found uncomfortable during interaction with the page, as well as ask them to evaluate the interface.

Collecting feedback from users

This is what it looks like on the website: a little Feedback textbox expands when clicked upon. The user gets a chance to evaluate the interface on a 1-5 emoji scale and leave a comment if he/she wishes.

Feedback from the users of the online store Intertop
Feedback from the users of the online store Intertop helped identify bugs

This window can be designed in line with the general style of your site.

5. Surveys

Surveys are one of the most prominent tools for conversion optimization. We particularly recommend using them at the checkout if the exit rate from the order placement page is inexplicably high.
It was actually this feature that helped increase conversion for Intertop by 55%
A little survey let us identify exit reasons and served as a decisive factor for significant changes in the whole funnel. As the users were exiting the checkout page, they were asked: “Why would you like to leave checkout?”

Users just couldn’t complete the checkout. It triggered changes in the whole purchase process.
Users just couldn’t complete the checkout. It triggered changes in the whole purchase process.

How do you integrate Hotjar?

We usually create an account for the customer ourselves and integrate it to the site using Google Tag Manager, or directly with the help of a special piece of code. Thus, both the marketing department of the online store and we have access to the data, and everyone can track the website KPIs.

However, you can also install Hotjar yourself.
If you have Google Tag Manager installed, you don’t even have to involve a developer.

Option 1
You can add Hotjar via the official Google Tag Manager integration through Hotjar interface. Just press Start Setup and follow the instructions. You have to be logged in in the same Google account, where your Tag Manager was created, and indicate the necessary container during the installation. A tag will be automatically created, and you won’t even need to enter Tag Manager for publishing the tag.

Adding Hotjar via the official Google Tag Manager integration through Hotjar interface

Option 2
You can create a tag through Google Tag Manager, entering the Hotjar Site ID that you can get from the Hotjar account.

You can create a tag through Google Tag Manager, entering the Hotjar Site ID that you can get from the Hotjar account.  

Just find the tag you need and enter the Hotjar Site ID in it.

Find the tag you need and enter the Hotjar Site ID in it.

Option 3
You can upload the code directly to Head and Body.
Just copy it from the Hotjar account and pass it on to the developer. 

It’s quite simple from that point on: go to the necessary section with heatmaps, recordings etc., and start tracking user behavior.

How do you interpret Hotjar data?

You will easily identify obvious interface errors yourself. This is an unquestionable advantage of this tool. However, there are situations when you shouldn’t jump to conclusions without comparing the data with analytics and figuring out user behavior patterns.

For example, low scroll depth is not always indicative of the lack of the user interest. If you analyze these data along with clicks, navigation to other pages and visit depth, you can realize that this scroll depth is actually normal.

This is exactly why it’s better to order a comprehensive UX audit so that you could see the problem in an integrated manner, even if you just want selected changes to optimize your interface.

 
 








Оставьте номер и мы перезвоним
Thank you!
We will soon get back to you.
Contact us
Please choose a topic below in which you need help with:
    Thank you!
    We will soon get back to you.