Как читать тепловые карты Clarity
GA4 и Яндекс Метрика отвечают на вопрос «сколько»: сколько визитов, сколько заявок, на какой странице обрывается воронка. Но цифра в отчете не показывает, что человек делал на самой странице: куда дотянулся курсором, по какому элементу кликнул вместо кнопки, докуда долистал до оффера. Это видно на тепловой карте.
Для performance-задачи карта закрывает разрыв между «конверсия просела» и «вот место, где она проседает». Платный трафик пришел на лендинг, часть посетителей ушла без заявки - карта показывает, на каком экране и по какому элементу теряется клиент, до того как вы зальете бюджет в новый поток на ту же страницу.
Microsoft Clarity дает пять типов карт: клики, скроллинг, зоны (area), внимание (attention) и конверсии. Бесплатно, без лимита по трафику, с генерацией за секунды. Разберем каждый тип под одну задачу - найти на странице место утечки и собрать гипотезу правки.
Что показывает карта и чего от нее не ждать
Тепловая карта - это агрегированная картина поведения многих посетителей на одной странице, наложенная цветом поверх ее скриншота. Теплые цвета (красный, желтый) отмечают зоны с высокой активностью, холодные (синий) - с низкой. Чем краснее участок, тем больше людей там кликали или тем дольше задерживались, в зависимости от типа карты.
Карта отвечает на вопрос «где» и «куда»: где сосредоточены клики, докуда доходит скролл, какие зоны держат внимание. Чего она не дает - это ответа «почему». Карта покажет, что половина посетителей кликает по картинке, которая никуда не ведет. Но почему люди приняли ее за кнопку и что чувствовали в этот момент, по карте не прочесть - для этого открывают записи сессий, где видно поведение конкретного человека от входа до ухода.
Отсюда главное правило чтения: карта дает гипотезы, но не ставит диагноз. Красное пятно на некликабельном элементе - сигнал «здесь что-то не так», и дальше эту догадку проверяют записями и тестом. Если воспринимать карту как финальный вердикт, легко переделать страницу под артефакт выборки и потерять конверсию там, где ее не было нужды трогать.
Карты Clarity строятся для популярных страниц автоматически, как только на сайт встанет код отслеживания. Если Clarity еще не подключен, начните с установки счетчика - без собранных данных карта пустая. Сам инструмент и его возможности разобраны в обзоре что такое Microsoft Clarity.
подписаться → @marataxanov
Карта кликов: куда жмут и куда жмут зря
Карта кликов показывает, по каким элементам страницы кликали на десктопе или тапали на мобильном и планшете. Это базовая карта при разборе лендинга: видно, притягивает ли клики целевая кнопка или активность уходит на посторонние элементы.
Clarity собирает на карте кликов все типы кликов сразу: обычные, а также мертвые (dead), гневные (rage), первые и последние в сессии. Мертвый клик - это нажатие по элементу, который не реагирует. Гневный - серия быстрых кликов по одному месту от раздражения. Сигналы фрустрации - отдельная тема, разобранная в материале про rage- и dead-клики. Здесь важно, что на общей карте кликов они тоже видны и подсвечивают проблемные зоны.
Что искать на карте кликов под конверсию:
- Клики по некликабельному. Люди жмут на заголовок, иконку или картинку, которые никуда не ведут. Значит, элемент выглядит как кнопка или ссылка, хотя кликом за ним ничего не запускается. Сделайте его рабочей ссылкой либо уберите визуальные признаки кнопки
- Холодная целевая кнопка. Главный CTA почти не собирает кликов, а активность уходит выше или в сторону. Кнопку не замечают - проверяйте ее заметность, формулировку и позицию на экране
- Перетянутое внимание. Меню, баннер или второстепенная ссылка собирает больше кликов, чем целевое действие. На лендинге под платный трафик это утечка: бюджет приводит человека, а он уходит в раздел, не связанный с заявкой
Возьмем лендинг онлайн-школы в Казахстане. Карта кликов показывает плотное красное пятно на логотипе в шапке: посетители принимают его за кнопку и кликают, а он ведет на главную и уводит их с продающей страницы. Параллельно сам блок с кнопкой записи на курс остается прохладным. Гипотеза с карты: убрать ссылку с логотипа на посадочной и усилить заметность целевой кнопки. Проверяется записями и тестом, но направление поиска карта дала за минуту.
В типах кликов отдельно выделяются первый и последний клик в сессии. Первый показывает, что человек трогает сразу, попав на страницу - это подсказывает, что притягивает внимание в первую очередь. Последний - на чем взаимодействие со страницей закончилось.
По любому элементу на карте Clarity показывает число кликов и долю от всех кликов, а рядом - переход к записям, где этот клик случился. С карты можно открыть записи по конкретной кнопке и посмотреть, что было до и после нажатия.
Карта скроллинга: докуда долистывают до оффера
Карта скроллинга показывает, как далеко вниз посетители прокручивают страницу. Каждому уровню глубины соответствует процент людей, дошедших до него: вверху страницы это близко к 100%, ниже процент падает. При наведении на любую точку Clarity показывает точную долю посетителей, добравшихся до этого места.
Ключевая величина здесь - средний сгиб (average fold): линия, до которой в среднем видно содержимое до начала прокрутки. Все, что выше сгиба, человек видит сразу. Все, что ниже, - только если листает дальше. Положение сгиба зависит от устройства: на мобильном он выше, и часть блоков, видимых на десктопе с ходу, на телефоне уходит вниз. Поэтому линию сгиба сверяют для каждого устройства - то, что на десктопе над сгибом, на телефоне может требовать прокрутки.
Что это дает для лендинга:
- Если важный блок - например, форма заявки или главный CTA - оказался ниже сгиба, а карта показывает, что до него долистывает меньшая часть трафика, его не видит большинство пришедших. Поднимите ключевой элемент выше или продублируйте его в зоне, докуда доходит скролл
- Резкий обрыв на карте, где процент дошедших падает скачком, отмечает место, на котором теряют интерес. Посмотрите, что там за блок: слишком длинный текст, тяжелый раздел или ложный финал страницы, после которого не ждут продолжения
- Длинный лендинг, который дочитывает малая доля посетителей, - повод сократить путь до целевого действия и вынести заявку ближе к началу
Пример: длинный лендинг IT-аутсорса в Узбекистане. Форма заявки стоит в самом низу, после восьми экранов с описанием услуг. Карта скроллинга показывает, что среднего сгиба достигают почти все, но до формы долистывает малая доля - остальные отваливаются на середине, где идет тяжелый блок с техническим стеком. Гипотеза: вынести короткую форму или кнопку запроса в верхнюю часть страницы и разгрузить середину, чтобы скролл не обрывался до целевого действия.
У карты скроллинга в Clarity есть технические ограничения, о которых стоит помнить. Она строится для тега body и не отображает прокрутку внутри отдельных блоков с собственным скроллом. Карта рендерится для страниц высотой до 65 535 пикселей - очень длинные полотна обрезаются. И на динамических элементах, которые открываются по наведению или клику (выпадающие меню, аккордеоны), прокрутку она не покажет.
Скролл-карта особенно полезна для длинных текстовых страниц и многоэкранных лендингов, где цена ошибки с расположением оффера высокая.
Карты зон и карты внимания
Кроме базовых кликов и скроллинга, Clarity дает еще два типа карт, которые читают под более узкие задачи.
Карта зон (area map) показывает суммарное число кликов по выбранной области страницы целиком, без разбивки по отдельным элементам. Вы сами очерчиваете зону - один блок или целую секцию - и видите, сколько кликов пришлось на нее и какую долю от всех кликов это составляет (CTR области). Удобно, когда нужно сравнить между собой крупные части страницы. Например, на интернет-магазине в Армении карта зон показывает, что блок фильтров слева собирает заметно меньше кликов, чем ожидалось, а основная активность держится на карточках товаров. Это повод проверить, замечают ли посетители фильтры и помогают ли они. Доля кликов по зоне (click distribution rate) сразу показывает, какая часть активности уходит на навигацию, а какая остается на самом товаре, без ручного подсчета кликов по каждой кнопке. Карта кликов отвечает «по какому элементу жмут», карта зон - «какая область страницы работает».
Карта внимания (attention map) показывает, где посетители проводят больше всего времени на странице. Здесь цвет означает время задержки взгляда и курсора, не число кликов. Высокое внимание к нужному блоку (оффер, описание услуги) - хороший знак. Если дольше всего задерживаются на блоке с ценой или гарантией, посетители всерьез взвешивают предложение - такой блок стоит усилить и держать выше по странице, а не прятать вниз. Но внимание бывает и тревожным сигналом. Возьмем форму заявки сервиса доставки в Грузии: карта внимания показывает долгое залипание на поле адреса. Люди подолгу держатся на одном поле - значит, ввод дается тяжело, формат неочевиден или валидация ругается. Такую зону открывают в записях и смотрят, что тормозит человека.
Пятый тип - карта конверсий (conversion map) - показывает, какие элементы привели к покупке. На сегодня она работает только для магазинов на Shopify и разобрана отдельно в материале про карты конверсий Clarity. Для обычного лендинга под заявку хватает первых четырех типов.
С какой карты начинать разбор
Под диагностику лендинга у карт есть рабочий порядок. Первой открывают карту скроллинга - она показывает, видят ли посетители оффер и форму вообще. Если до целевого блока долистывает малая доля, остальные правки бессмысленны: люди не дошли до места, где принимают решение. Следом идет карта кликов - по чему жмут те, кто дошел, и не уходит ли клик мимо целевого действия. Зоны и внимание подключают в конце, для детального разбора секций, которые вызвали вопросы на первых двух картах.
Внутри каждой карты помогают две вещи. Сравнение (compare) - Clarity дает положить две карты рядом: до и после правки страницы или два разных сегмента трафика, чтобы увидеть разницу в поведении. Смена скриншота (change screenshot) - если на странице есть всплывающие окна, аккордеоны или разные состояния, можно выбрать нужный скриншот, чтобы карта легла на правильную раскладку. Без этого клики по элементам в свернутом состоянии накладываются на развернутый вид и сбивают картину.
Если записей и карт по странице накопилось много, у Clarity есть AI-сводка по карте - короткий текст с основными наблюдениями по поведению. Это отправная точка для беглого взгляда, но решения по ней не принимают: сводку проверяют на самой карте и в записях.
Как собрать гипотезу из карты и не обмануться
Карты дают сырой материал, но выводы из них легко сделать неверно. Несколько правил, чтобы чтение карты вело к росту конверсии и не превращалось в случайные переделки.
Один тип карты - один срез. Карта кликов не объясняет, почему кликали. Карта скроллинга не говорит, что человек думал на середине страницы. Каждый тип отвечает на свой узкий вопрос. Полную картину собирают, накладывая несколько карт друг на друга и подтверждая записями.
Сегментируйте перед чтением. Карта по всему трафику смешивает разные источники, а они ведут себя по-разному. Посетитель из поиска и посетитель из таргета приходят с разным намерением и читают страницу неодинаково. Отфильтруйте карту по нужному срезу - тогда видно поведение конкретного потока. Доступны фильтры по устройству, источнику и кампании (UTM), стране, а также по своим тегам и сохраненным сегментам. Как привязать поведение на карте к рекламному источнику, разобрано в материале про поведенческую аналитику и рекламу.
Десктоп и мобильный - разные карты. Раскладка, длина страницы и зона сгиба на телефоне другие. Карту всегда смотрят отдельно по устройствам, иначе мобильные тапы лягут на десктопную верстку и картинка получится искаженной. В Clarity переключение между PC, планшетом и мобильным сделано в самой карте.
Много кликов - не всегда хорошо. Горячая зона не всегда про интерес: те же гневные клики выглядят на карте ярким пятном. Прежде чем радоваться активности, проверьте, не сигнал ли это проблемы.
Карта открывает цепочку, но не закрывает ее. Рабочий порядок такой: карта дает гипотезу, запись сессии показывает само поведение и проясняет причину, а тест проверяет правку на цифрах. Только пройдя эту цепочку, меняют страницу - тогда правка опирается на поведение, подтвержденное записью и тестом.
От карты к стоимости заявки
Для performance вся ценность карты в одном: она сокращает путь от «конверсия лендинга низкая» до конкретной правки. Без карты низкую конверсию чинят вслепую - меняют заголовок или цвет кнопки наугад и ждут, сработает ли. Карта сужает поиск до места утечки: вот здесь не долистывают до формы, а вот тут жмут на нерабочую картинку.
Каждая такая правка работает на стоимость заявки. Тот же платный трафик при той же цене клика, но с лендингом, где оффер видят все дошедшие и кнопку находят сразу, дает больше заявок на тот же бюджет - значит, ниже CPL. Карта не приводит трафик и не снижает ставку, ее работа в другом: выжать из уже оплаченного потока больше конверсий, убрав препятствия, которые видно только в поведении.
Коротко
- Тепловая карта Clarity - это агрегированное поведение многих посетителей поверх скриншота страницы. Теплые цвета означают больше активности, холодные - меньше
- Типов карт у Clarity пять: клики, скроллинг, зоны (area), внимание (attention) и конверсии (последние - для Shopify)
- Карта кликов показывает, по чему жмут, включая мертвые и гневные клики. Ищите клики по некликабельному, холодный CTA и элементы, перетягивающие внимание с заявки
- Карта скроллинга показывает, докуда долистывают. Средний сгиб - граница видимого без прокрутки. Важные блоки держите выше зоны, до которой доходит большинство
- Карта зон сравнивает крупные области страницы, карта внимания показывает, где задерживаются дольше всего. Долгое внимание к форме бывает сигналом, что ее трудно заполнить
- Карта отвечает на «где», но не на «почему». Сегментируйте по источнику и устройству, проверяйте гипотезу записями и тестом, и только потом меняйте страницу
- Для performance смысл карты в снижении CPL: та же оплаченная аудитория дает больше заявок, когда с лендинга убраны места утечки
Частые вопросы
Чем тепловая карта отличается от записей сессий?
Карта показывает агрегированную картину - где кликает и докуда листает множество посетителей сразу. Запись сессии показывает путь одного человека от входа до ухода. Карта отвечает на вопрос «где проблема», запись - «что происходило и почему». Их используют в связке: нашли подозрительную зону на карте, открыли по ней записи и посмотрели поведение вблизи.
Сколько визитов нужно, чтобы карта была достоверной?
Жесткого порога нет - Clarity строит карту без минимального лимита по трафику и обновляет ее по мере поступления данных. Но чем меньше визитов, тем выше случайные колебания: на десятке посещений одно нетипичное поведение перекосит всю картину. Для устойчивых выводов стоит дождаться, пока на странице наберется достаточно данных, и смотреть карту по конкретному сегменту, не смешивая все источники.
Карта кликов и карта зон - в чем разница?
Карта кликов считает клики по каждому отдельному элементу - кнопке, ссылке, картинке. Карта зон считает суммарные клики по области, которую вы очертили сами, и показывает ее долю от всех кликов. Карта кликов отвечает на вопрос «по какому элементу жмут», карта зон - «какая часть страницы собирает активность». Зоны удобны, чтобы сравнить между собой крупные секции.
Почему на мобильном и десктопе карты разные?
Раскладка страницы, ее длина и линия сгиба на телефоне отличаются от десктопа. Если смотреть общую карту, мобильные тапы наложатся на десктопную верстку и дадут искаженную картину. В Clarity карту переключают между PC, планшетом и мобильным - читайте каждое устройство отдельно, особенно если основной трафик идет с телефонов.
Что значит, если люди кликают по элементу, который не кликается?
Это частый и полезный сигнал. Если посетители кликают по заголовку, иконке или картинке, которая никуда не ведет, элемент выглядит кликабельным, хотя действия за ним нет. Дальше два пути: сделать элемент рабочей ссылкой, если люди ждут от него перехода, или убрать визуальные признаки кнопки, чтобы не сбивать с толку. Что человек ожидал получить, видно в записях по этому элементу.
Можно ли доверять одной карте при принятии решения?
Одна карта дает гипотезу, но не основание для финального решения. Карта кликов не объясняет причину, выборка может быть мала, одно устройство или источник перекашивают картину. Рабочий порядок: подтвердить находку второй картой или сегментом, посмотреть записи по проблемной зоне и проверить правку тестом. Решение на одном скриншоте - короткий путь к переделке, которая не двигает конверсию.
Карты Clarity платные?
Все карты Clarity бесплатны и без лимита по трафику - это часть бесплатного продукта Microsoft. Карты строятся для популярных страниц автоматически после установки кода. Платных тарифов у Clarity нет, ограничения по объему данных тоже отсутствуют.
