Интеграция 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 часа.