Тепловая карта сайта: как посмотреть клики и скроллинг в Яндекс Метрике и что исправить

Что такое тепловая карта сайта

Тепловая карта — визуальный отчёт о поведении посетителей поверх вашей страницы. Вместо таблицы с цифрами вы видите саму страницу, раскрашенную по интенсивности внимания.

В Яндекс Метрике это два инструмента:

Рядом есть Вебвизор — записи отдельных визитов — и аналитика форм. Тепловая карта отвечает на вопрос «что происходит в среднем», Вебвизор — «что делал конкретный человек». Работать удобно связкой: карта показывает проблемное место, записи объясняют, почему. Подробно про записи — в статье Вебвизор: как пользоваться.

Как посмотреть тепловую карту сайта в Яндекс Метрике

1. Проверьте, что на сайте стоит счётчик Метрики. Если нет — сначала установите, инструкция в статье Яндекс Метрика: как настроить.
2. Включите опцию «Вебвизор, карта скроллинга, аналитика форм» в настройках счётчика на вкладке «Счётчик» и сохраните.
3. Обновите код счётчика на сайте, если он вставлен вручную. На Тильде и в плагинах CMS это обычно не требуется — проверьте, что опция применилась.
4. Подождите, пока наберутся данные. Для страницы с рекламным трафиком — неделя, для страницы с 20 визитами в день — дольше.
5. Откройте карту в Метрике. В разделе с картами выберите карту кликов или скроллинга и укажите адрес страницы. Для группы страниц, например всех страниц услуг, можно использовать символ *.
6. Выберите режим и сегмент. Для начала — тепловой режим. Затем сравните телефоны и компьютеры, рекламу и поиск.

Если карта не показывается

По справке Метрики, частые причины такие:

• сайт запрещает показ во фрейме — нужно добавить исключение для доменов Метрики в настройках сервера;
• в Safari карта бесконечно грузится из-за опции «Мешать перекрестному отслеживанию»;
• в фильтрах счётчика включена замена https на http — карта показывает «Нет данных»;
• карту не открывали больше 6 месяцев, и запись отключилась — включите опцию снова.

Как читать карту кликов и карту скроллинга

Карта кликов. Яркие пятна — много нажатий. Смотрите не туда, где ярко, а туда, где ярко неожиданно: картинки, заголовки, иконки, текст. Это места, где посетитель ожидал действия и не получил его. И наоборот: главная кнопка бледная — её не видят или не хотят.

Режим «Клики по ссылкам и кнопкам» показывает долю нажатий на каждый кликабельный элемент. Удобно для меню и первого экрана: если пункт «Цены» в меню набирает больше половины кликов, людям нужны цены, и их стоит показать раньше.

Карта скроллинга. Показывает, сколько времени смотрят каждый участок. Важно не где «закончилась» страница, а где внимание резко падает. Если перед блоком с ценой участок затемнён, до цены доходит мало людей.

Правило объёма. Карта на 50 визитах — это мнение пятидесяти случайных людей. Делайте выводы, когда визитов хотя бы несколько сотен. Для небольших сайтов берите период шире, но помните: карта скроллинга хранит только 15 дней.

Три типовые картины на тепловой карте и что с ними делать

Мы регулярно смотрим карты на сайтах, которые приходят к нам на разбор. Чаще всего встречаются три картины.

Картина 1. «Слепые» кнопки и клики в пустоту

Как выглядит. Много кликов по фотографиям услуг, карточкам тарифов, иконкам, подчёркнутому тексту — а это не ссылки. Главная кнопка при этом бледная.

Что это значит. Посетитель ожидает, что элемент откроется или приведёт к цене. Не получает ответа и через пару попыток уходит.

Что сделать:

1. Сделайте кликабельным то, на что нажимают: фото услуги ведёт на страницу услуги, карточка тарифа — на форму с выбранным тарифом.
2. Если элемент не должен быть кликабельным, уберите то, что выглядит как ссылка: подчёркивание, синий цвет, стрелки.
3. Главную кнопку сделайте контрастной и подпишите действием и выгодой. Как формулировать, — в статье форма заявки на сайте.

Картина 2. Мёртвые блоки

Как выглядит. Блок занимает экран-два на телефоне, но кликов нет, а на карте скроллинга по нему быстро пролистывают. Чаще всего это «О компании» с общими словами, слайдер с сертификатами, длинная история основания, иконки «Качество · Надёжность · Опыт».

Что это значит. Блок не отвечает на вопросы посетителя и съедает его внимание по дороге к важному.

Что сделать:

1. Сократите или уберите блок. Если жалко — перенесите ниже формы.
2. Замените общие слова на факты: сроки, цены, фото работ, гарантия с условиями.
3. Проверьте, что на освободившееся место поднялись блоки, которые читают: цены, примеры, отзывы.

Картина 3. Обрыв внимания до цены или формы

Как выглядит. На карте скроллинга внимание падает в первой трети страницы, а цена, калькулятор или форма — в последней. До них доходит меньшинство.

Что это значит. Человек не дошёл до того, что продаёт. Чаще всего первый экран не даёт причины листать дальше, или по пути слишком много лишнего.

Что сделать:

1. Поднимите цену «от» и кнопку заявки на первый экран.
2. Добавьте кнопку заявки после каждого второго-третьего блока.
3. Пересоберите первый экран: что вы делаете, для кого, сколько стоит, как связаться. Как это сделать, — в статье первый экран сайта.

Если на сайт идёт реклама, а карта показывает одну из этих картин, каждый день вы платите за посетителей, которые не доходят до заявки. Это удобно разобрать вместе с рекламой.

Условный пример: что даёт исправление по тепловой карте

Пример условный, не кейс студии. Лендинг натяжных потолков, 3 000 визитов в месяц из рекламы, конверсия в заявку 1,5% — 45 заявок.

По карте скроллинга на телефоне внимание обрывалось на втором экране — длинном слайдере с фото, на котором карта кликов показывала много нажатий по фото: люди хотели увеличить и посмотреть детали. Калькулятор стоимости был на седьмом экране.

Что сделали:

1. Фото открываются по нажатию в полный экран, под каждым — цена за квадратный метр.
2. Калькулятор поднят на третий экран.
3. Блок «Наши преимущества» сокращён до трёх фактов.

Если после изменений конверсия выросла до 2,2%, те же 3 000 визитов дают 66 заявок вместо 45 — плюс 21 заявка без увеличения бюджета. Проверять результат стоит на сопоставимом трафике, лучше через A/B-тест, иначе можно принять сезонный рост за эффект правок. Самый надёжный способ — показывать старую и новую версии половине посетителей одновременно и сравнивать конверсию.

Тепловая карта на телефоне и на компьютере: в чём разница

На большинстве сайтов малого бизнеса с телефонов приходит больше половины посетителей, особенно из рекламы и Карт. При этом владелец и подрядчик смотрят сайт на компьютере — и тепловую карту тоже.

Что обычно отличается на мобильной карте:

• Страница в 3–5 раз длиннее. Блок, который на компьютере занимает полэкрана, на телефоне — два экрана прокрутки. Обрыв внимания наступает раньше.
• Клики пальцем неточные. Мелкие кнопки рядом друг с другом получают «чужие» нажатия, и на карте видно пятно между элементами.
• Плавающие элементы перекрывают контент. Виджет чата или кнопка звонка в углу закрывает часть формы — на карте кликов это видно по нажатиям на виджет вместо поля.
• Слайдеры листают реже. На компьютере стрелки заметны, на телефоне вторую карточку слайдера видят немногие.

Поэтому начинайте анализ с мобильного сегмента. Если мобильная версия собрана автоматически и никто её не проверял, большинство проблем найдётся именно там. Чек-лист мобильной версии — в статье мобильная версия сайта.

Как анализировать тепловую карту по шагам

1. Выберите страницу с трафиком и целью. Чаще всего — страница, на которую идёт реклама.
2. Откройте карту скроллинга на телефонах. Найдите, где внимание резко падает.
3. Откройте карту кликов в тепловом режиме. Найдите клики по некликабельному и бледную главную кнопку.
4. Переключите режим «Клики по ссылкам и кнопкам». Посмотрите, какие пункты меню и кнопки набирают больше всего.
5. Посмотрите 5–10 записей в Вебвизоре в проблемном месте, чтобы понять причину.
6. Запишите 3 гипотезы и исправьте одну за раз.
7. Через 2–4 недели сравните конверсию в цель с прошлым периодом на сопоставимом трафике.

Ошибки при работе с тепловыми картами

• Выводы на малом объёме. 40 визитов не показывают закономерностей.
• Смешивать телефоны и компьютеры. Разметка страницы разная, карта превращается в кашу.
• Смешивать источники. Человек из рекламы и человек из поиска по названию ведут себя по-разному.
• Правки без цели в Метрике. Без цели не измерить, стало ли лучше. Как настроить цели, — в статье цели в Яндекс Метрике.
• Править всё сразу. Непонятно, что именно сработало.
• Забыть про 15 дней. Карта скроллинга за прошлый квартал недоступна.

Мы делаем сайт, Директ и 30 дней ведения от 60 000 ₽, запуск — от 3 дней; карты кликов и Вебвизор смотрим в первый же месяц ведения, чтобы чинить страницу по данным. Если хотите разбор своей страницы, оставьте контакты.