05 мая 2026 г․, В эпоху‚ когда каждый клик пользователя приносит ценную информацию‚ карта кликов (heatmap) становится незаменимым инструментом маркетологов‚ UX-специалистов и владельцев сайтов․ Готовые платформы вроде Hotjar‚ CrazyEgg или Lucky Orange требуют ежемесячной подписки․ Ниже — пошаговая инструкция‚ как получить ту же визуализацию‚ не потратив ни рубля․
Что такое карта кликов и зачем она нужна
- Карта кликов, это тепловая карта‚ где яркие точки показывают‚ куда чаще всего нажимают посетители․
- Она помогает найти «мертвые» зоны страницы‚ проверить‚ видят ли пользователи CTA-кнопки‚ и оптимизировать расположение блоков․
Инструменты‚ которые мы будем использовать
- Open-source-скрипт
heatmap․js— генерирует тепловое наложение прямо в браузере․ - Google Таблицы — для первичного сбора координат кликов․
- Google Analytics 4 (бесплатный) — экспорт событий
click․ - GTM (Google Tag Manager) — бесплатная «прослойка»‚ чтобы не писать код вручную․
Пошаговая схема
Шаг 1․ Настраиваем сбор событий кликов через GTM
Создайте новый триггер Тип: Клик по элементу → Все клики․
Добавьте тег GA4 Event с параметром event_name: click и двумя дополнительными параметрами:
x_coord: {{Click Element X}}y_coord: {{Click Element Y}}
Опубликуйте контейнер․
Шаг 2․ Экспортируем данные из GA4 в Google Таблицы
В интерфейсе GA4 откройте Администратор → Экспорт → BigQuery (бесплатный лимит 10 ГБ/мес)․
Напишите простой SQL-запрос:
SELECT event_date‚ (SELECT value․int_value FROM UNNEST(event_params) WHERE key = 'x_coord') AS x‚ (SELECT value․int_value FROM UNNEST(event_params) WHERE key = 'y_coord') AS y‚ COUNT(*) AS clicks FROM `ваш_проект․analytics_xxx․events_20260505` WHERE event_name = 'click' GROUP BY 1‚2‚3
Сохраните результат как CSV или подключите BigQuery Connector к Google Таблицам․
Шаг 3․ Визуализируем heatmap без сторонних сервисов
Вариант А․ Быстрый (через heatmap․js)
Скачайте библиотеку: https://cdn․jsdelivr․net/npm/heatmap․js@2․0․5/build/heatmap․min․js․
На тестовой странице добавьте:
<script src="heatmap․min․js"></script>
<script>
const heatmap = h337․create({
container: document․querySelector('#your-page')‚
radius: 25‚
maxOpacity: 0․8
});
// подставьте массив из Google Таблиц
const data = [
{ x: 120‚ y: 340‚ value: 73 }‚
{ x: 300‚ y: 480‚ value: 45 }‚
․․․
];
heatmap․setData({ max: 100‚ data });
</script>
Вариант B․ Без кода (через Google Таблицы → рисунок)
Вставьте скриншот страницы в Google Таблицы․
Через инструмент Вставка → Рисунок → Точки создайте диаграмму рассеяния с координатами x‚ y․ Измените цвет точек на полупрозрачный красный, получится «ручной» heatmap без стороннего софта․
Шаг 4․ Автоматизируем обновления
Подключите Google Apps Script к таблице‚ чтобы каждое утро автоматически подтягивать свежие строки из BigQuery․
Опубликуйте скрипт как веб-приложение и запустите триггер Time-driven → Каждый день в 7:00․
Как проверить точность
- Сравните общее число событий в GA4 и количество строк в таблице — расхождение ≤ 1 % считается нормой․
- Включите режим «Просмотр улиц» (Google Карты) на мобильном‚ чтобы убедиться‚ что клики по мелким элементам действительно захватываются․
Лайфхаки и ограничения
- Экономьте трафик: храните координаты в виде относительных значений (0–100 % ширины/высоты)‚ тогда heatmap масштабируется на любой размер экрана․
- Фильтруйте ботов: добавьте в GA4 фильтр Трафик → Внутренние IP․
- Помните: при отключенном JS или AdBlock данные не собираются — это естественное ограничение любой бесплатной схемы․
За час вы получите полноценную карту кликов без единой подписки․ Главное — использовать связку GTM + GA4 + BigQuery + heatmap․js․ Система легко масштабируется: достаточно добавить новые события (скролл‚ движение мыши) и расширять SQL-запрос․ Проверено на домашнем блоге и корпоративном лендинге — работает стабильно уже второй год․
Удачи в оптимизации! Если возникнут вопросы — задавайте в комментариях‚ я оперативно отвечу․