Тепловые карты
Клики, скролл, внимание — три линзы для одной страницы. Видите поведение пользователей как на ладони, сравниваете сегменты side-by-side.
Видите, а не гадаете
Тепловая карта — как рентген для страницы. Видите горячие и мёртвые зоны за секунды.
Сравнение сегментов
Два сегмента рядом — как два снимка. Видите, как ведут себя разные аудитории на одной странице.
Работает в SPA
Автоматический сброс при навигации, MutationObserver для динамических элементов. Ничего не теряется.
Как это работает
Четыре этапа — от клика до тепловой карты. Как конвейер: SDK собирает, бэкенд считает, дашборд показывает.
SDK собирает данные
TrektikHeatmap слушает клики (document click), скролл (window scroll) и видимость блоков (IntersectionObserver). Каждое событие содержит координаты, селектор, viewport, timestamp.
Батчинг и отправка
Очередь копится до 50 событий или 5 секунд — что раньше. POST /v1/heatmap/events отправляет батч. При закрытии вкладки — flush через fetch keepalive.
Агрегация в ClickHouse
Бэкенд группирует: клики по координатам и селекторам, скролл по порогам (сколько % пользователей), внимание по зонам (среднее время видимости).
Визуализация в дашборде
Вводите URL — получаете heatmap. Переключаетесь между кликами, скроллом и вниманием. Включаете сравнение сегментов — видите два heatmap рядом.
Как это выглядит
Пример click heatmap. В реальном дашборде — интерактивная SVG-визуализация с цветовой шкалой.
Все возможности
Click Maps
Каждый клик записывается с координатами (x, y), CSS-селектором элемента и размером viewport. Агрегация по точкам — видите, куда кликают чаще всего. Как следы на снегу: сразу понятно, какие тропинки популярны.
Scroll Maps (глубина скролла)
Пороги 25%, 50%, 75%, 100%. SDK фиксирует каждый порог один раз за сессию. Видите, какой процент пользователей долистал до конкретного места. Как счётчик на горке — сколько человек добралось до вершины.
Attention Maps (карта внимания)
IntersectionObserver отслеживает, сколько миллисекунд каждый блок страницы был видим. Размечаете блоки через data-trektik-section или SDK сам находит section/article/main. Как хронометраж на стадионе — точно знаете, где проводят время.
По устройствам
Viewport записывается с каждым событием — фильтруете по размеру экрана. Десктоп, планшет, мобилка — три разных мира на одной странице. Как три разных спектакля на одной сцене.
Сравнение двух сегментов
Выбираете сегмент A и сегмент B, получаете две тепловые карты рядом. Новые vs вернувшиеся, платные vs бесплатные, из рекламы vs органика. Разница видна сразу — как «найди 10 отличий», только полезно.
Автоматический батчинг
SDK собирает события в очередь и отправляет батчами каждые 5 секунд или по 50 штук. При закрытии страницы — keepalive flush. Нулевая потеря данных, минимальная нагрузка на сеть. Как почтальон — собирает письма и несёт пачкой.
Технические детали
Под капотом — чтобы знали, как устроено. Как инструкция к микроволновке, только полезная.
| Типы событий | click, scroll, attention |
| Scroll пороги | 25%, 50%, 75%, 100% |
| Attention tracking | IntersectionObserver (threshold: 0, 0.25, 0.5, 0.75, 1.0) |
| Секции для attention | data-trektik-section или автодетект (section, article, main...) |
| Динамический контент | MutationObserver для новых data-trektik-section |
| Батчинг | 50 событий или 5 секунд |
| Приватность | trektik-no-capture / data-trektik-no-capture исключает элемент |
| SPA-поддержка | Автосброс на popstate (scroll thresholds, attention timers) |
| API для данных | POST /v1/heatmap/events (SDK), GET /v1/query/heatmaps (дашборд) |
Trektik vs конкуренты
| Возможность | Trektik | Hotjar | Crazy Egg |
|---|---|---|---|
| Click + Scroll + Attention | ✓ | ✓ | ✓ |
| Attention (IntersectionObserver) | ✓ | ✗ | ✗ |
| Сравнение 2 сегментов side-by-side | ✓ | ✗ | ✗ |
| SPA-совместимость (popstate + MutationObserver) | ✓ | ✗ | ✗ |
| Интеграция с воронками и аналитикой | ✓ | ✗ | ✗ |
| Приватность (trektik-no-capture) | ✓ | ✓ | ✗ |
| Данные в РФ | ✓ | ✗ | ✗ |
Когда что использовать
Пользователи не видят кнопку «Купить»?
Scroll map покажет: 60% не долистывают до CTA (порог 75% пройден только 40%). Переместите кнопку выше — видимость сразу вырастет. Как витрину передвинуть ко входу.
Баннер не работает — почему?
Click map покажет, что кликают мимо баннера — на текст рядом. Attention map покажет, сколько секунд смотрят на баннер (может, 0.5с — просто не успевают прочитать).
Мобильная версия конвертит хуже десктопа?
Сравните два сегмента: desktop (viewport > 1024) vs mobile (viewport < 768). Часто оказывается, что на мобилке CTA уходит за fold. Две карты рядом — разница видна сразу.
Где пользователи проводят больше всего времени?
Attention map с data-trektik-section на ключевых блоках. Увидите в секундах: hero — 2.1с, pricing — 8.3с, footer — 0.4с. Как хронометраж — точно знаете, на что смотрят.
Увидьте свою страницу глазами пользователей
Бесплатный тариф — heatmaps для 3 страниц. Все три типа карт и сравнение сегментов включены.