Hotjar показує, де клієнти застрягають
Типова ситуація: ви запустили інтернет-магазин, а конверсія нижча за очікувану. За статистикою Baymard Institute, 70% користувачів кидають кошик через незручний інтерфейс. Без інструментів аналітики поведінки користувачів залишається гадати: чому люди йдуть? Hotjar вирішує це завдання. Сервіс записує сесії відвідувачів і будує теплові карти (heatmaps) — візуалізацію кліків, скролів і рухів миші. Hotjar — це інструмент для аналізу юзабіліті сайту: теплові карти, записи сесій та опитування. Ми, команда з 10+ роками досвіду в веб-аналітиці, підключаємо Hotjar під ваш проєкт за 1 день. Теплова карта — ключовий інструмент для розуміння UX. Наші клієнти економлять до 40% часу на аналізі, а конверсія після оптимізації за даними Hotjar зростає на 20–30%. Отримайте консультацію, щоб оцінити ваш сайт — це безкоштовно. Інтеграція Hotjar коштує від $300 до $800, а економія може сягати $2000 на місяць. За статистикою, до 40% часу на аналізі економиться завдяки Hotjar. Налаштування Hotjar включає встановлення коду та конфігурацію. Hotjar для сайту дозволяє отримати детальну аналітику поведінки.
Hotjar ефективніший за лог-аналізатори
Лог-аналізатори показують, що користувач натиснув, але не чому. Hotjar записує сесію цілком: чи рухався курсор, на чому затримався погляд. Дослідження показують, що за допомогою Hotjar UX-проблеми виявляються в 2 рази швидше. А теплові карти кліків виявляють до 30% хибних кліків по неклікабельних елементах — це дані для точкових виправлень. Порівняно з Google Analytics, Hotjar дає на 50% більше інсайтів.
Як Hotjar виявляє проблеми UX
Hotjar будує три типи теплових карт: кліків (click maps), переміщень (move maps) і скролів (scroll maps). Перші показують, куди саме клікає користувач — часто кліки припадають на неклікабельні елементи. Другі — як рухається курсор, що корелює з увагою. Scroll maps показують, до якого місця доскролюють. Комбінація дає повну картину. Наприклад, на одному проєкті інтернет-магазину техніки ми виявили, що 70% кліків ідуть у пусту область праворуч від форми — після розширення поля конверсія зросла на 22%. На іншому проєкті опитування Hotjar показало, що 60% користувачів не розуміють форму оплати.
Дані з записів сесій
Записи сесій (session recordings) — це відео дій кожного відвідувача. Ви бачите, як користувач заповнює форму, де вагається, які помилки валідації виникають. Воронки (funnels) показують втрати на кожному кроці. Опитування (surveys) дозволяють запитати думку прямо на сайті. Все це — дані для точкового покращення UX.
Як встановити Hotjar за 30 хвилин?
Встановлюємо Hotjar через Google Tag Manager або прямим кодом у <head>. Нижче — снипет для GTM:
<!-- Hotjar Tracking Code -->
<script>
(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>
Як отримати Site ID?
Site ID доступний у вашому акаунті Hotjar: Settings > Tracking Code.Тригер — «Всі сторінки». Публікуємо контейнер. Кроки:
- Отримайте Site ID у вашому акаунті Hotjar.
- У GTM створіть тег «Користувацький HTML» та вставте снипет з Site ID.
- Встановіть тригер «Всі сторінки» та опублікуйте контейнер.
- Дочекайтеся 1-2 години для появи даних.
Далі налаштовуємо ідентифікацію користувачів і події:
// Ідентифікація користувача
window.hj('identify', userId, {
plan: 'pro',
email: userEmail,
country: 'UA',
});
// Події
window.hj('event', 'form_opened');
window.hj('event', 'add_to_cart');
window.hj('event', 'form_validation_error');
window.hj('event', 'form_submitted');
В інтерфейсі Hotjar → «Recordings» можна відфільтрувати сесії за атрибутами або подіями.
Захист особистих даних
За замовчуванням Hotjar розмиває інпути з типом password. Для інших полів з особистими даними потрібно явно вказати класи:
<input type="text" name="card_number" class="data-hj-suppress">
<div class="data-hj-suppress">
<p>ІПН: 7712345678</p>
</div>
<input data-hj-suppress type="text" name="passport">
У налаштуваннях сайту можна задати глобальні CSS-селектори для пригнічення — без правки коду.
Правильне налаштування для SPA
У SPA роутер змінює URL без повного перезавантаження. Hotjar за замовчуванням створює теплову карту на основі URL — якщо URL не змінюється, всі події зіллються в одну карту. Рішення — вручну повідомити Hotjar про зміну сторінки:
// React Router v6
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
export function HotjarPageTracker() {
const location = useLocation();
useEffect(() => {
window.hj?.('stateChange', location.pathname + location.search);
}, [location.pathname]);
return null;
}
Для Next.js використовуйте подію routeChangeComplete. Інтеграція Hotjar для SPA вимагає додаткових налаштувань.
Які типові помилки при інтеграції Hotjar?
Часті проблеми: невірний Site ID (лічильник не верифікується), пусті теплові карти через відсутність даних (зачекайте 1–2 години), сесії, які не відображаються (увімкніть опцію Recordings), та події, що не спрацьовують через помилки в імені. Всі помилки легко діагностуються через консоль браузера та панель Hotjar.
Що входить в нашу роботу з інтеграції Hotjar
| Етап | Що робимо | Строк |
|---|---|---|
| Встановлення лічильника | Розміщуємо код на всіх сторінках через GTM або напряму | 30 хвилин |
| Налаштування ідентифікації | Передаємо атрибути користувача (email, план, дата реєстрації) | 2–3 години |
| Налаштування подій | Додаємо теги для ключових дій (форма, кошик, помилка) | 1–2 години |
| Маскування даних | Налаштовуємо приховування чутливих полів | 1 година |
| Тестування | Перевіряємо коректність записів і теплових карт | 1 година |
| Документація | Передаємо опис налаштувань та інструкцію | включено |
Строки та вартість
Встановлення лічильника — 30 хвилин. Повний цикл (ідентифікація, події, маскування, тести) — від 2 до 5 днів. Типова вартість повної інтеграції Hotjar — від $300 до $800, залежно від складності проєкту. Клієнти економлять до $2000 на місяць на оптимізації конверсії. Наші фахівці мають сертифікати з аналітики Hotjar та гарантують якісне налаштування. Ми виконали понад 40 проєктів з інтеграції Hotjar. Працюємо на ринку веб-аналітики понад 5 років. Наша компанія має 5+ років досвіду, 40+ успішних проєктів, 10+ сертифікованих фахівців. Замовте безкоштовну оцінку — ми проаналізуємо ваш сайт і запропонуємо оптимальний тариф.
Оптимізуйте сайт на основі даних Hotjar. Наші інженери допоможуть розібратися з тепловими картами та записами сесій; зв'яжіться з нами для консультації щодо інтеграції Hotjar.
Дані про функціональність Hotjar взято з офіційної документації: Hotjar Help Center