Тепловая карта кликов в «Метрике» «Яндекса» – это полезный, и удобный инструмент анализа поведения пользователей на сайте. Если хотите знать, какие элементы страницы отвлекают внимание от заветных кнопок «купить» и «оставить заявку», что ищут на сайте московские женщины и как ведут себя пользователи, перешедшие из соц.сетей, то вам сюда. В статье: базовые понятия, краткий обзор функций и сценариев применения сервиса. 10-ти приемов для повышение конверсии, кочующих из статьи в статью здесь не будет.
В статьях про карту кликов «Яндекса» в основном перечисляют режимы ее работы, дают пару скриншотов и на этом закругляются. Как ее применять вообще не объясняют, видимо думают, что все рождаются веб-аналитиками и все и так знают. Я не буду так делать, а вместо этого приведу пару примеров того, как с помощью этого инструмента анализировать поведение пользователей и совершенствовать сайта. Но обо всем по порядку, поэтому начнем с базы.
Что это такое?
Тепловая карта кликов – это визуализация статистики по самым закликиваемым элементам на сайте. Она помогает понять, на что пользователи обращают больше всего внимания и какие фрагменты дизайна принимают за кнопки и активные ссылки. Карта кликов сайта доступна в «Яндекс.Метрике» и в большинстве платных сервисов веб-аналитики. Выбирать можно любую, но мы расскажем об инструменте «Яндекса», потому что свое, родное и любимое.
![35208bcde6[1]](http://semantica.in/wp-content/uploads/2016/09/35208bcde61.jpg)
Как работает карта кликов «Яндекса»?
В «Метрике» есть четыре варианта визуализации отчетов:
- Тепловая карта кликов – вариант по умолчанию. В этом случае элементы страницы, по которым кликают относительно часто, подсвечиваются теплыми цветами (красный, оранжевый, желтый), а менее популярные – холодными (зеленый, синий, фиолетовый).
- Монохромная. То же самое, только используется единственный красный цвет. Чем ярче область, тем больше по ней кликают, а чем тусклее, тем меньше.
- Карта кликов по ссылкам и кнопкам. В этом случае все взаимодействия пользователей с сайтом делятся на два вида: клики по ссылкам и кнопка и обычные. Первые отмечаются красным или ранжевым, а вторые – синим.
- Прозрачная. Здесь работает все тот же принцип, единственное отличие в способе визуализации. Чем чаще нажимают на элемент, тем прозрачней в его области темная «маска», наложенная на сайт. Сразу понятно, на что смотрят посетители.
- Карта элементов. В этом режиме подсвечиваются не конкретные области, а элементы целиком. Этот режим можно включать просто чтобы доставить себе эстетическое удовольствие (вы поймете, о чем я).
Что умеет карта кликов «Яндекса»?
![62781b7824[1]](http://semantica.in/wp-content/uploads/2016/09/62781b78241.jpg)
Настраивать сегмент аудитории, о котором вы хотите получить информацию. Разбираем по пунктам.
- Настройка параметров просмотра. Можно учитывать только те, в которых посетитель заходил определенный URL, кликал по какому-либо заголовку и так далее.
- Настройка параметров визита. Здесь можно отфильтровать пользователей по географии, типу устройства, поведению, источнику перехода и истории посещений.
- Дополнительная настройка профиля пользователя. Можно отфильтровать по полу, возрасту, географии и другим параметрам.
- Выбор периода. Здесь все просто: от одного дня до года.
- Сравнение двух сегментов. Если хотите сравнить поведение пользователей в этом и предыдущем месяце или двух разных сегментов аудитории, выбирайте этот пункт.
В качестве примера я выбрал пришедших из поиска мужчин, которые переходили по ссылке на блог. Количество кликов не покажу.
Как применять тепловую карту кликов в «Яндекс.Метрике»?
Банально, но для тестов и аналитики. В самом простом сценарии можно посмотреть, что интересно посетителю сайта: каталог товаров, описание услуг, страница контактов или блог. Исходя из этой информации можно скорректировать путь пользователя на сайте, чтобы ему жилось проще и веселее. Например, запихнуть популярную ссылку на блог повыше и полевее. Для этого подойдет режим тепловой карты кликов, стоящий по умолчанию.
Второй вариант – посмотреть, какие элементы дизайна люди ошибочно принимают за кнопки и активные ссылки. Это поможет очистить страницу от вещей, которые перетягивают на себя внимание. Допустим, у вас на главной есть какая-то плашка, очень похожая на форму для заполнения. Причем вы об этом и не подозреваете, потому что ни разу не открывали карту кликов. А люди кликают по плашке но их постигает разочарование, потому что ничего не происходит. Не надо быть специалистом по UX, чтобы понять, что это плохо. Такие ложно-активные элементы отвлекают внимание пользователя от настоящих кнопок, заставляют его тратить больше времени на навигацию и снижают удобство сайта. Чтобы их найти, проще всего включить карту кликов по кнопкам и ссылкам.
![ef00049342[1]](http://semantica.in/wp-content/uploads/2016/09/ef000493421.jpg)
Третий вариант – оценить, как работает перелинковка на странице или какие пункты меню чаще всего выбирают люди. Здесь поможет карта кликов по элементам. Вообще, это очень полезный режим, потому что он нагляднее, чем режим по умолчанию и никогда не вводит в заблуждение, как режим с активными ссылками. Поясню. НА предыдущем скриншоте несколько областей выглядят почти одинаково оранжево, поэтому понять, какая ссылка популярней, довольно сложно. С помощью карты кликов по элементам мы избавляемся от проблемы легко и изящно – все цвета получаются максимально разными.
![56e7e7f8c7[1]](http://semantica.in/wp-content/uploads/2016/09/56e7e7f8c71.jpg)
Наконец, можно посмотреть, куда чаще всего клацает какой-то конкретный сегмент аудитории. Например, люди пришедшие из соцсетей или поиска, жители Казани или школьники с айфонами (нет). Для этого нужно воспользоваться панелькой, о которой я рассказывал выше.
Тепловая карта кликов помогает улучшать юзабилити сайтов, выстраивать для клиента оптимальный путь к целевому действию и анализировать поведение разных групп пользователей.
Что делать, если карта кликов в «Метрике» не работает?
Такое бывает, если сайт защищен от показа в iframe или вы используете nginx. Подробную инструкцию, как действовать в этом случае дал сам «Яндекс», но на всякий случай повторим.
Если у вас стоит iframe, нужно добавить в исключения домен «Вебвизора» (webvisor.com), его поддомены и ваш собственный домен. Сделать это можно через регулярное выражение:
В случае с nginx, дополнительный код с исключениями выглядит вот так:
set $frame_options '';
if ($http_referer !~ '^https?:\/\/([^\/]+\.)?(yourdomain\.com|webvisor\.com)\/'){
set $frame_options 'SAMEORIGIN';
}
add_header X-Frame-Options $frame_options;
...
}
А есть другие инструменты?
Да, тепловых карт кликов много, некоторые предлагаются в составе других инструментов веб-аналитики, а некоторые отдельно или в виде плагина для CMS. В принципе, все они делают примерно одно и то же, отличаются только детализацией данных. Примеры:
- ClickHeat:
- Mouseflow:
- CrazyEgg:
- OpenWebAnalytics.
Первые три – платные сервисы, а OWA можно скачать просто так.
Что в итоге?
Карта кликов «Яндекса» помогает следить за поведением пользователя, оптимизировать его путь до целевого действия, оценивать эффективность разных элементов страницы и получать еще кучу полезной информации. Если делать все правильно и учитывать данные, которые дает эта метрика, можно ненароком увеличить конверсию и повысить удобство сайта. Если это вас не пугает, то вперед, делайте.
