Інтеграція Hotjar (теплові карти) на сайт

Інтеграція Hotjar (теплові карти)

Hotjar показує, куди кликають, як скроллять і де бросають сторінку. Теплові карти, записи сесій та опитування — усе через один лічильник. Встановлюється за 20 хвилин, результати видні через кілька годин після запуску.

Встановлення лічильника

Через GTM — рекомендуємий спосіб, не потребує правки коду:

1. GTM → Теги → Створити → «Користувацький HTML»
2. Вставити сніппет:

<!-- 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>

3. Тригер — «Усі сторінки»
4. Публікуємо контейнер

YOUR_SITE_ID — числовий ID з Hotjar → «Tracking Code».

Пряма вставка в HTML (якщо немає GTM):

<!-- Перед </head> -->
<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:3456789,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>

NPM (якщо потрібен контроль над завантаженням):

npm install hotjar-browser

import Hotjar from '@hotjar/browser';
Hotjar.init(YOUR_SITE_ID, 6);

Ідентифікація користувачів

Без ідентифікації сесії анонімні. Якщо потрібно фільтрувати записи по конкретному користувачу або тарифу:

// Після логіну передаємо атрибути
window.hj('identify', userId, {
    plan: 'pro',
    email: userEmail,
    signup_date: '2024-01-15',
    country: 'RU',
});

Атрибути відображаються в інтерфейсі Hotjar при переглядові запису сесії — можна фільтрувати по plan === 'pro' або датою реєстрації.

Події та теги

Hotjar дозволяє помічати точки взаємодії, щоб потім фільтрувати записи по них:

// Користувач відкрив форму
window.hj('event', 'form_opened');

// Користувач додав товар у кошик
window.hj('event', 'add_to_cart');

// Сталася помилка валідації
window.hj('event', 'form_validation_error');

// Успішна відправка форми
window.hj('event', 'form_submitted');

У інтерфейсі Hotjar → «Recordings» можна відфільтрувати: «покажи тільки сесії, де сталася form_validation_error» — і побачити, де саме користувачи спотикаються.

Налаштування теплових карт для SPA

У SPA роутер змінює URL без повного перезавантаження. Hotjar за замовчуванням створює теплову карту на основі URL — якщо URL не змінюється при переходах, усі події сольються в одну карту.

Рішення — вручну повідомити Hotjar про зміну сторінки:

// Vanilla JS / будь-який фреймворк
function notifyHotjarPageChange(newUrl) {
    if (window.hj) {
        window.hj('stateChange', newUrl);
    }
}

// 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
import { useRouter } from 'next/router';
useEffect(() => {
    const handleRouteChange = (url) => window.hj?.('stateChange', url);
    router.events.on('routeChangeComplete', handleRouteChange);
    return () => router.events.off('routeChangeComplete', handleRouteChange);
}, [router.events]);

Захист конфіденційних даних

За замовчуванням Hotjar розмиває інпути з типом password. Для інших полів з персональними даними потрібно явно вказати класи:

<!-- Поле приховано у записах Hotjar -->
<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">

У налаштуваннях сайту у Hotjar можна задати глобальні CSS-селектори для придушення — без правки коду.

Опитування та NPS через Hotjar API

// Відкрити конкретне опитування програмно
window.hj('trigger', 'survey_trigger_name');

// Приклад: показати опитування після успішного оформлення замовлення
function onOrderCompleted(orderId) {
    window.hj?.('event', 'purchase_completed');
    window.hj?.('identify', userId, { last_order_id: orderId });

    // Показати опитування через 5 секунд
    setTimeout(() => window.hj?.('trigger', 'post_purchase_survey'), 5000);
}

Перевірка

• Hotjar → «Tracking» → статус повинен бути «Verified»
• DevTools → Network: шукаємо запити до hotjar.com — мають проходити без помилок
• Hotjar → «Recordings» — після перших реальних сесій (зазвичай через 1–2 години) з'являються записи
• Для швидкої перевірки: Hotjar → «Tools → Incoming Feedback» — можна побачити своє відвідування

Строки

Встановлення лічильника через GTM — 30 хвилин. Налаштування ідентифікації користувачів та подій — 2–3 години. Налаштування маскування конфіденційних даних + тест у SPA — ще 1–2 години.