Hotjar показывает, где клиенты застревают
Типичная ситуация: вы запустили интернет-магазин, а конверсия ниже ожидаемой. По статистике Baymard Institute, 70% пользователей бросают корзину из-за неудобного интерфейса. Без инструментов аналитики поведения пользователей остаётся гадать: почему люди уходят? Hotjar решает эту задачу. Сервис записывает сессии посетителей и строит тепловые карты (heatmaps) — визуализацию кликов, скроллов и движений мыши. Мы, команда с 7-летним опытом в веб-аналитике, подключаем Hotjar под ваш проект за 1 день. Тепловая карта — ключевой инструмент для понимания UX. Наши клиенты экономят до 40% времени на анализе, а конверсия после оптимизации по данным Hotjar растёт на 20–30%. Получите консультацию, чтобы оценить ваш сайт — это бесплатно.
Почему Hotjar эффективнее лог-анализаторов?
Лог-анализаторы показывают, что пользователь нажал, но не почему. Hotjar записывает сессию целиком: двигался ли курсор, на чём задержался взгляд. Исследования показывают, что с помощью Hotjar UX-проблемы обнаруживаются в 2 раза быстрее. А тепловые карты кликов выявляют до 30% ложных кликов по некликабельным элементам — это данные для точечных исправлений.
Как Hotjar помогает выявить проблемы UX?
Hotjar строит три типа тепловых карт: кликов (click maps), перемещений (move maps) и скроллов (scroll maps). Первые показывают, куда именно кликает пользователь — часто клики приходятся на некликабельные элементы. Вторые — как двигается курсор, что коррелирует с вниманием. Scroll maps показывают, до какого места доскролливают. Комбинация даёт полную картину. Например, на одном проекте мы обнаружили, что 70% кликов уходят в пустую область справа от формы — проблема решена расширением поля ввода.
Какие данные можно получить из записей сессий?
Записи сессий (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>
Триггер — «Все страницы». Публикуем контейнер.
Далее настраиваем идентификацию пользователей и события:
// Идентификация пользователя
window.hj('identify', userId, {
plan: 'pro',
email: userEmail,
country: 'RU',
});
// События
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.
Типичные ошибки при интеграции
Частые проблемы: неверный Site ID (счётчик не верифицируется), пустые тепловые карты из-за отсутствия данных (подождите 1-2 часа), неотображающиеся записи сессий (включите опцию Recordings), и события, которые не срабатывают из-за опечаток в имени. Все ошибки легко диагностируются через консоль браузера и панель Hotjar.
Что входит в нашу работу по интеграции Hotjar?
| Этап |
Что делаем |
Срок |
| Установка счётчика |
Размещаем код на всех страницах через GTM или напрямую |
30 минут |
| Настройка идентификации |
Передаём атрибуты пользователя (email, план, дата регистрации) |
2-3 часа |
| Настройка событий |
Добавляем теги для ключевых действий (форма, корзина, ошибка) |
1-2 часа |
| Маскировка данных |
Настраиваем скрытие чувствительных полей |
1 час |
| Тестирование |
Проверяем корректность записей и тепловых карт |
1 час |
| Документация |
Передаём описание настроек и инструкцию |
включено |
Сроки и стоимость
Установка счётчика — 30 минут. Полный цикл (идентификация, события, маскировка, тесты) — от 2 до 5 дней. Стоимость рассчитывается индивидуально. Закажите бесплатную оценку — мы проанализируем ваш сайт и предложим оптимальный тариф.
Оптимизируйте сайт на основе данных Hotjar. Наши инженеры помогут разобраться с тепловыми картами и записями сессий; свяжитесь с нами для консультации по интеграции Hotjar.
Данные о функциональности Hotjar взяты из официальной документации: Hotjar Help Center
Настройка веб-аналитики: GA4, GTM, Яндекс.Метрика и Amplitude
Мы часто видим: конверсия 1.2 %, трафик растёт, а конверсия стоит. Маркетолог смотрит в Google Analytics и говорит: «пользователи уходят с шага 2 оформления заказа». Разработчик открывает тот же шаг — ошибок нет, в Sentry тишина. Значит, дело не в JS-баге, а в UX или в кривых данных, которые показывает аналитика. Аналитика ломается незаметно: событие перестало трекаться после редеплоя — никто не заметил; GTM-тег стреляет дважды — данные задвоились; фильтр GA4 исключает бота, который на самом деле — реальный трафик с корпоративного прокси. Закажите аудит текущих тегов — мы найдём причину за неделю.
После правильной настройки экономия рекламного бюджета может достигать 150 000 ₽ в месяц — это реальный кейс интернет-магазина с 50 000 сессий в день, где дедупликация purchase вернула 20 % неверно приписанных конверсий.
Почему события GA4 дублируются и как это исправить?
Universal Analytics закрыт, его место заняла событийная модель GA4. В ней нет фиксированных хитов страниц и транзакций — только события с параметрами. Это гибче, но требует правильного дизайна событий.
Автоматические события GA4 собирает сам: page_view, scroll, click, session_start. Рекомендуемые события нужно реализовать самостоятельно: purchase, add_to_cart, begin_checkout, view_item. Google ожидает конкретную схему параметров — если передать product_id вместо item_id, данные попадут в GA4, но не в стандартные отчёты e-commerce. Кастомные события для специфики проекта: filter_applied, video_progress, form_step_completed. Кастомные параметры необходимо зарегистрировать в GA4 Admin → Custom definitions, иначе они не будут доступны в отчётах.
Частая ошибка — событие purchase с дублями. Причина: тег срабатывает на странице /thank-you, пользователь обновляет страницу — второй purchase уходит в GA4. Решение: на бэкенде генерируем уникальный transaction_id и передаём в событие. GA4 de-duplicates по нему (в теории — проверяйте через DebugView). Правильная атрибуция экономит до 20 % рекламного бюджета, который раньше уходил на неверно приписанные конверсии.
Как настроить data layer, чтобы не потерять данные?
GTM — инструмент для управления тегами без деплоя кода. Но «без кода» не значит «без архитектуры». Data Layer — основа всего. Передаём данные из приложения в GTM через dataLayer.push(). Структура: event + контекстные данные. Для e-commerce: перед открытием страницы продукта — push с данными товара. GTM-тег читает из dataLayer, не из DOM.
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: 'view_item',
ecommerce: {
items: [{
item_id: 'SKU-12345',
item_name: 'Название товара',
price: 1990.00,
currency: 'RUB'
}]
}
});
Плохая практика: GTM-тег парсит DOM — ищет цену в span.price, название в h1. Это ломается при любом изменении верстки. Хорошая практика: всегда dataLayer. Используем Preview Mode для отладки и GTM Server-Side для чувствительных данных — отправка с сервера, не с браузера, обходит блокировщики рекламы, не теряет данные.
Как Яндекс.Метрика дополняет веб-аналитику?
Для российской аудитории Метрика обязательна — особенно Вебвизор. Запись сессии пользователя, который бросил корзину, часто даёт ответ быстрее, чем неделя анализа воронки. Цели в Метрике: событийные (через ym(COUNTER_ID, 'reachGoal', 'GOAL_NAME')) или автоматические (клик по кнопке, посещение страницы). Связка с CRM через Метрика Плюс — передача офлайн-конверсий. Наш опыт: в 8 из 10 проектов после настройки Метрики находили скрытые баги в UX, которые не показывали другие системы.
Что даёт product analytics в Amplitude?
Amplitude — продуктовый инструмент, в отличие от маркетинговых GA4 и Метрики. Он заточен под анализ поведения пользователей внутри продукта: воронки, ретеншн, user paths. Amplitude подходит для SaaS-продуктов, мобильных приложений и любых сервисов с зарегистрированными пользователями, где важно понять, как проходят онбординг, на каком шаге уходят, какие фичи используют чаще. Ключевые концепции: identify (связать анонимного пользователя с userId после авторизации), group (аккаунт в B2B SaaS), когорты для удержания. Amplitude Chart — воронка шагов за последние 30 дней с разбивкой по источнику.
Мониторинг качества данных
Аналитика без мониторинга — чёрный ящик. Настраиваем:
- GA4 Realtime — проверяем после каждого деплоя, что ключевые события приходят
- Alerting в GA4 — аномалия в количестве событий
purchase (резкое падение = что-то сломалось)
- GTM Preview в staging-окружении перед продакшеном
- Ручные тесты воронок раз в неделю — просто пройти путь покупателя и проверить, что всё трекается
Что проверяем после каждого деплоя
- Все ли рекомендуемые события присутствуют в DebugView
- Нет ли задвоений (считаем количество
purchase на 100 сессий)
- Не изменилась ли структура dataLayer после обновления фронтенда
Что входит в работу
| Компонент |
Описание |
| Аудит текущих тегов |
Проверка существующих GTM-тегов, dataLayer, дублей и ошибок |
| Дизайн событийной схемы |
Документация: список событий, параметры, триггеры |
| Настройка GA4 + GTM |
Создание конфигурации, тегов, Custom definitions |
| Яндекс.Метрика |
Установка счётчика, создание целей, настройка Вебвизора |
| Amplitude (опционально) |
Настройка клиентского и серверного SDK, когорты |
| QA и мониторинг |
Тестирование в Preview Mode, Alerting |
| Обучение и передача |
Доступы, инструкция по добавлению новых событий, консоль |
Процесс и сроки
- Аудит текущих тегов и данных (2 дня)
- Дизайн событийной схемы (2 дня)
- Разработка Data Layer и настройка тегов (3–5 дней)
- QA в Preview Mode и на staging (2 дня)
- Деплой и настройка дашбордов (1 день)
| Сценарий |
Срок |
| Базовая настройка GA4 + GTM |
1 неделя |
| Полный e-commerce tracking + Метрика |
2–3 недели |
| Server-side GTM + Amplitude |
3–5 недель |
Стоимость рассчитывается индивидуально. Получите консультацию по настройке веб-аналитики для вашего проекта — мы оценим объём работ за один день. Свяжитесь с нами, чтобы начать.
Wikipedia: Веб-аналитика — подробнее о методах и метриках. Официальная документация по событийной модели GA4 доступна в Google Analytics 4.
