GA4 показує, скільки людей зайшло на сторінку і скільки пішло, не оформивши замовлення, — але не показує, чому. Теплові карти й записи сесій закривають саме цей розрив: видно, до якого місця долистують, куди клікають у пошуках неіснуючої кнопки і на якому кроці форми обривається заповнення. Розбираємо, які карти для чого потрібні, як їх налаштувати без розробника і як перетворити знахідку на перевірювану гіпотезу, а не просто на цікаве спостереження.
01 Навіщо теплові карти, якщо вже є GA4
GA4 відповідає на питання «скільки» і «куди»: скільки сеансів, який відсоток пішов з певного кроку воронки, куди вели переходи. На питання «чому саме на цьому кроці» аналітика з цифрами не відповідає — а без відповіді незрозуміло, що взагалі змінювати на сторінці.
Теплові карти й записи сесій додають візуальний шар поверх тих самих даних: видно, що реальна людина робила на сторінці секунда за секундою. Часто виявляється, що причина відмови — не в офері й не в ціні, а в деталі інтерфейсу: кнопка візуально схожа на неактивну, форма занадто довга, важливий блок розташований нижче того, докуди реально долистують.
02 Види карт: кліки, скрол, рух курсора
Різні типи карт показують різні зрізи поведінки, і для повної картини зазвичай потрібно дивитись мінімум два з них разом, а не покладатися на один.
- Карта кліків — по яких елементах сторінки клікають чи тапають: реальні кнопки й посилання, але нерідко й елементи, які клікабельними не є взагалі.
- Карта скролу — до якого місця долистує конкретний відсоток відвідувачів; показує, чи взагалі читають блок із цінами чи відгуками, якщо він розташований низько.
- Карта руху курсора — куди дивиться і де затримується погляд (на десктопі рух курсора непогано корелює з поглядом); корисна для оцінки, чи взагалі помічають ключовий блок.
03 Hotjar чи Clarity: як обрати для старту
Для більшості сайтів вибір зводиться до двох інструментів, і рішення частіше впирається не в якість карт, а в бюджет і обсяг трафіку.
Microsoft Clarity безкоштовний без обмежень за кількістю записаних сесій і включає базові карти кліків та скролу, запис сесій та інтеграцію з Google Analytics і Tag Manager. Hotjar пропонує ширший набір інструментів — включно з опитуваннями й формами зворотного зв'язку прямо на сайті, — але на безкоштовному тарифі обмежує кількість сесій, після чого вмикається вибіркове записування. Для сайту, який лише починає працювати з поведінковою аналітикою, розумний старт — безкоштовний тариф Clarity: він покриває основні сценарії без обмеження за обсягом даних, а до платного інструменту можна перейти пізніше, якщо знадобляться опитування чи детальніша сегментація.
04 Встановлення без розробника
Обидва сервіси встановлюються одним і тим самим способом — коротким фрагментом коду в розділі <head> сайту, і розробник для цього не обов'язковий, якщо на сайті вже підключено Google Tag Manager або GA4.
- Зареєструвати проєкт в обраному сервісі й отримати код відстеження;
- вставити код у шаблон сайту напряму або через Google Tag Manager окремим тегом;
- перевірити, що дані почали надходити — зазвичай це видно в інтерфейсі сервісу протягом кількох хвилин;
- за офіційною інструкцією зі встановлення Clarity є окремі готові модулі для популярних CMS — це ще швидше за ручну вставку коду.
05 Як читати записи сесій і не потонути в даних
Головна помилка при першому знайомстві із записами сесій — дивитися їх поспіль без мети. За годину можна переглянути двадцять роликів і не винести нічого корисного, якщо заздалегідь не вирішити, що саме шукаєте.
Робочий підхід — дивитися записи не всіх поспіль, а конкретного сегмента: наприклад, лише сеанси, які дійшли до форми, але не відправили її, або лише візити з мобільних пристроїв на конкретній сторінці. Такий фільтр за 10–15 записів зазвичай показує повторюваний патерн: користувачі однаково спотикаються об те саме поле форми або однаково не помічають кнопку під банером.
06 П'ять сценаріїв, які найчастіше знаходять на теплових картах
Перш ніж аналізувати свій сайт, корисно знати, що зазвичай знаходять на картах і записах інші — це прискорює розпізнавання схожих патернів.
- «Хибний клік» — користувачі масово клікають на елемент, який виглядає як кнопка, але нею не є.
- Обрив скролу до ключового блоку — ціни, відгуки або форма розташовані нижче того місця, до якого долистує більшість.
- Затор на одному полі форми — курсор повертається до одного й того самого поля кілька разів поспіль, часто це ознака незрозумілого формулювання чи помилки валідації.
- Ігнорування головного CTA — кліків по основній кнопці дії майже немає, а по другорядних посиланнях — помітно більше.
- Розбіжність поведінки на мобільних і десктопі — блок, який чудово працює на десктопі, на мобільному екрані з'їжджає або перекривається іншим елементом.
07 Від знахідки до гіпотези A/B-тесту
Спостереження з теплової карти — це ще не рішення, а сировина для гіпотези. Корисна гіпотеза формулюється у форматі «якщо змінити X, то очікуємо Y, тому що Z», а не просто «переробимо кнопку, бо вона червона».
Наприклад: якщо карта показує, що 40% відвідувачів клікають на неробочий елемент, схожий на кнопку, гіпотеза може звучати так — «якщо перетворити цей елемент на справжню клікабельну кнопку, конверсія в перехід на наступний крок зросте, бо зараз частина користувачів втрачає намір після невдалого кліку». Як саме ставити і читати такий тест, розібрано у статті про A/B-тестування реклами — принципи поділу аудиторії та оцінки результату там працюють і для тестів на самому сайті. Якщо перевіряти гіпотези і налаштовувати інструменти самостійно немає часу, цю роботу можна передати команді — детальніше на сторінці послуг.
08 Часті питання
Чи сповільнюють теплові карти сайт?
Скрипти Hotjar і Clarity асинхронні й завантажуються паралельно з основним контентом, тому помітного впливу на швидкість завантаження сторінки зазвичай немає. Перевірити це на своєму сайті можна через звіт про швидкість у GA4 або Search Console до і після встановлення.
Чи потрібна згода користувача на запис сесій?
Так, якщо на сайті збираються персональні дані або використовуються файли cookie для аналітики, запис сесій має бути врахований у політиці конфіденційності і, залежно від регіону, вимагати згоди через банер cookie. Обидва сервіси за замовчуванням маскують чутливі поля на кшталт паролів і номерів карток.
Скільки записів сесій потрібно переглянути, щоб зробити висновок?
Зазвичай достатньо 10–15 записів одного сегмента, щоб побачити повторюваний патерн. Якщо після цього обсягу поведінка виглядає хаотичною і без закономірності, ймовірно, сегмент обрано занадто широко.
Чи можна використовувати теплові карти замість A/B-тестів?
Ні, це різні інструменти на різних етапах. Теплова карта допомагає знайти, що саме лагодити, а A/B-тест перевіряє, чи справді виправлення збільшує конверсію, а не просто здається логічним поліпшенням.
Чи працюють теплові карти на мобільних пристроях?
Так, обидва сервіси збирають карти кліків, скролу та записи сесій окремо для мобільних пристроїв — це важливо перевіряти окремо від десктопа, бо поведінка на маленькому екрані часто відрізняється.
З чого почати, якщо сайт отримує мало трафіку?
Починати варто з найвідвідуваніших сторінок — головної, ключових посадкових або карток популярних товарів, — і з безкоштовного тарифу Clarity, який не обмежує кількість зібраних сесій за часом.