Карта кликов
Любому сайту, сервису или коммерческому проекту в Интернете карта кликов помогает эффективнее отслеживать активности пользователей на конкретной странице, так и на всем ресурсе. Маркетологам и специалистам по юзабилити важно знать, какие элементы страницы притягивают больше всего внимание посетителей, что отвлекают пользователей от совершения целевых действий – купить, оставить заявку, заказать звонок.
Карта кликов позволяет:
Тепловая карта кликов визуализирует статистику по наиболее кликабельным местам и элементам на сайте. Она помогает наглядно увидеть, на что посетители обращают внимание в первую очередь, какие дизайнерские элементы снижают конверсию, замечают ли пользователи кнопки, ссылки, СТА и другие элементы лидогенерации. Полнофункциональная карта кликов сайта доступна в системе аналитики «Яндекс.Метрика», а также во многих платных сервисах. В этой статье рассмотрим работу с инструментами Яндекса.
Зачем нужна карта кликов Яндекс.Метрике?
Зачастую даже подробные графические отчеты аналитических сервисов не позволяют разобраться в причинах низкой конверсии сайтов. Мы можем зафиксировать, что посетители уходят, не совершив целевого действия, но почему они выпадают из воронки продаж – непонятно. Чтобы выявить причины оттока покупателей необходимо проводить аудит ресурса, используя тепловые карты сайта.
Какие возможности открывает маркетологу этот инструмент:
Как работает тепловая карта Яндекс.Метрики
Принцип работы этого инструмента основывается на считывании данных со страниц сайта, посредством программного кода в счетчике Метрики. Далее аналитический сервис обрабатывает страницу и создает карту всех элементов, с которыми пользователей вступает в контакт – кликает, скролит. После получения данных счетчика об активности на сайте, тепловая карта обновляется.
Как пользоваться картой кликов в Яндексе
Чтобы информация об активностях фиксировалась в счетчике Метрики, необходимо в настройках скрипта отметить опцию «Вебвизор, карта скроллинга, аналитика форм».
Как посмотреть карту кликов Яндекса?
На главной панели Метрики выбираем раздел «карты» и сервис предлагает несколько вариантов аналитики. Кликаем на любой.
Откроется окно, где можно выбрать вид отчета и настроить параметры для анализа сайта:
Маркетологи используют карту кликов для аудита сайта и тестов. Например, нужно узнать, какие страницы привлекают внимание посетителей: блог, карточка товаров, описание услуг, доставка и контакты. Получив данные с тепловой карты, маркетологи корректируют путь пользователя, чтобы он без заминок проходил воронку конверсии от первого знакомства с компанией к целевому действию.
Как это реализовать на практике? Если вы видите на странице блога область с высокой кликабельностью, например, блок слева от заголовка. Как вариант поставьте там ссылку на тематическую услугу или товар, чтобы пользователь сразу перешел к целевому действию. Обычно возле СТА и офферов устанавливают формы лидогенерации или кнопки заказа консультации, звонка.
Еще один вариант использования карты кликов – это определить элементы оформления сайта, которые ошибочно воспринимаются за кнопки или ссылки. Красивый дизайн зачастую пестрит разными элементами, которые путают посетителей и перетягивают их внимание с важных областей страницы.
Например, дизайнер разместил перед футером графический элемент, который напоминает форму подписки. Пользователи кликают в поле, но не получают ожидаемого эффекта. Как минимум – это их огорчает, а по максимуму – отвлекает внимание от настоящей формы подписки. Если регулярно проводить аудит сайта с помощью тепловой карты кликов, то можно сразу заметить такие проблемы.
Карту элементов используют для проверки кликабельности пунктов навигации и ссылок на странице. Если с помощью карты кликов бывает трудно установить, какой же пункт меню больше популярен у пользователей, то разбивка на элементы помогает сделать это максимально точно.
Если вы разбили ЦА на сегменты, например, по городам или каналам привлечения трафика, то карты покажут, куда чаще кликает конкретная аудитория.
Резюме
Мы изучили, что такое карта кликов Яндекса. Узнали, зачем нужен этот инструмент маркетологу и рекламодателю, владельцу сайта и специалисту по продвижению. Посмотрели, как настроить эту опцию и где искать отчеты по картам. Если внимательно анализировать данные отчетов Метрики и вовремя корректировать элементы сайта, можно в разы увеличить конверсию пользователей в покупателей.
Карта кликов в «Яндекс Метрике»
Речь пойдет об уникальном инструменте, позволяющем измерять и визуально отображать сведения по статистике переходов (кликов) на веб-ресурсе. Система аналитики фиксирует абсолютно все щелчки левой кнопкой мышки по кнопкам, элементам панелей вертикального и горизонтального меню, ссылкам (в том числе и по тем, которые не являются активными).
Чтобы наглядно ознакомиться с инструментом, достаточно, авторизовавшись в сервисе «Яндекс Метрика», перейти во вкладку «Карты».
Нажимаем на кнопку «Карта кликов».
В результате отобразятся данные о кликах, собранные системой сбора статистики.
Клики и переходы на сайты с ссылок и кнопок подсвечиваются, при этом цвет зависит от частоты и идет от синего (минимум) к красному (максимум).
Для чего нужен представленный в статье инструмент?
Прежде всего, для анализа такого значимого параметра, как юзабилити, благодаря которому можно судить об удобстве веб-ресурса для интернет-пользователей, пришедших на него с любого возможного источника, будь-то органическая выдача поисковых систем, реклама на поиске и сайтах-партнерах, социальные сети, рассылка электронных писем, непосредственно ввод названия сайта или домена в адресной строке.
Кроме того, благодаря «Карте ссылок», есть возможность выявить наиболее «кликабельные» элементы, популярные кнопки, элементы/разделы, нажатие на которые посетителем ассоциируется, как переход в соответствующий раздел (или статью).
Логично, что с помощью этих же сведений можно определить и выявить неактивные кнопки и ссылки, наличие которых никак не влияют на эффективность веб-сайта и возникает логичный вопрос об их необходимости.
Чтобы просматривать не только главную страницу сайта, но и другие, предусмотрена возможность переключения на «Взаимодействие с сайтом» с целью смены активной страницы. Для этого достаточно нажать на соответствующую кнопку.
Отрегулировать размеры точек и прозрачность, можно с помощью тумблера под названием «Опции».
Для «Карты ссылок» в сервисе «Яндекс Метрика» можно задавать периоды, за которые должны отображаться сведения.
Доступные варианты отображения
«Карта ссылок» поддерживает следующие варианты отображения информации:
Какой из вариантов отображения выбрать – зависит лишь от удобства восприятия информации, информативности.
Как подключить «Карту ссылок»
Инструмент подключается совместно с «Вебвизором», нажатием галочки в настройках и добавлением (или обновлением) кода счетчика на веб-сайте (раздел html-разметки ).
Не забываем нажать кнопку «Сохранить».
Обратите внимание на возможное возникновение проблем с отображение карты, что может быть обусловлено использованием посетителями уже устаревшего, но до сих используемого интернет-пользователями браузера «Internet Explorer» ниже 8-ой версии, неиспользованием ресурсом кодировки UTF-8, защитой веб-ресурса от показов «iframe» и т. д.
Если «Карта кликов» отображается, но собирает сведения не со всех страниц веб-сайта, то проблема связана с тем, что счетчик установлен не на всех веб-страницах ресурса. Следует внимательно просмотреть разметку, добиться наличия кода-установочника на каждой странице.
Использование сегментации при построении «Карты ссылок»
Работа с сегментами позволяет получить более информативные сведения с разбивкой на определенные группы. Можно создать свои условия сегментации или использовать ранее созданные.
Добавление нового производится за счет нажатия кнопки со знаком «+».
Есть три базовых раздела связанных с просмотрами, визитами и посетителями.
На основании сведений о просмотрах можно задать конкретный интересующий URL, заголовок веб-страницы, реферер, временные характеристики.
Раздел «Визиты» включает в себя стандартные способы сегментации, а именно: по источникам, поведению, истории, географии, технологии, а также электронной коммерции. Более подробно о данном способе сегментации и примерами наиболее часто используемых из них, вы можете узнать из статей нашего блога.
Раздел «Пользователи» содержит условия, благодаря которым можно задать описание посетителей веб-ресурса, выделить целевую аудиторию.
Удобным является и опция, позволяющая произвести сравнение двух сегментов между собой, с целью выявления закономерностей и отличительных особенностей, временной динамики.
Сравнивать можно с предыдущим периодом времени, с готовыми сегментами и заданными вручную самостоятельно, а также сохраненными ранее заданными условиями.
Заключение
Ознакомившись с возможностями опции «Карта ссылок» сервиса сбора данных и аналитики «Яндекс Метрика», можно сразу же приступить к использованию полученных знаний на практике. Регулярно работая с отображаемой в интерактивном режиме информацией, а также взаимодействуя с другими инструментами системы аналитики, такими как «Вебвизор», «Карта скроллинга», «Карта ссылок», «Аналитика форм», можно значительно улучшить юзабилити своего веб-сайта.
Удобство использования веб-ресурса пользователями является неотъемлемым условием для повышения эффективности и конверсии. Это ценится не только людьми, заходящими на ваш сайт, но и поисковыми системами, реагирующими на «быстрый» уход посетителей, не нашедших информацию или запутавшихся в навигации по вашему сайту. Поведенческий фактор в таком случае снижается естественным образом, что есть плохо.
Поэтому, уделяйте «usability» (удобству пользования веб-ресурсом) много внимания и времени с целью повышения эффективности вашего веб-сайта и, как следствие того, повышения доходов, прибыли и отдачи. При необходимости обращайтесь к специалистам, которые положительно себя зарекомендовали в области «правильного» и удобного для посетителя построения разделов веб-источника и подачи различного контента.
Тепловая карта кликов — как пользователи ведут себя на сайте
Сегодня у нас в руках множество инструментов, исследований и статей по ux/ui и том как сайт будут читать и идентифицировать.
Но главный вопрос остаётся открытым.
А знаете ли именно вы, куда пользователи вашего (или сделанного вами) сайта тыкают?
Сегодня поговорим о кнопках
Все, наверное, хоть раз слышали о том, что у кнопок есть минимальный допустимый размер, существуют какие то защитные поля, и что кнопки должны быть похожи на кнопки.
Но так ли это на самом деле?
Давайте разбираться на примере
Для него я взял свой сайт — 2 кнопки и список ссылок. (
2 500 кликов, временной охват — 1 год). И проанализировал его при помощи тепловой карты от Яндекс.метрики.
Гамбургер
Визуально гамбургер имеет размеры 32х26 пикселей. Вместе с защитными полями область клика — 40х33 пикселя. Пользователь же в основном нажимает по области размером 46х42 пикселя.
А это значит, что не хватает приблизительно по 4px по периметру в моём случае.
И по 8px в целом.
Вывод: для основных кнопок типа: «гамбургер», «назад», «домой» область клика должна быть увеличена минимум на 8px с каждой из сторон. И стремиться к размеру 48х48px.
Список ссылок
Далее идёт просто список ссылок. Он кликабелен по всей ширине и визуально это показывается при наведении.
Горизонтально
Как видно по тепловой карте, основная плотность кликов приходится на середину средней длины слов.
55px (62%) от левого края.
Вертикально
Если учитывать стандартную высоту строки (normal), то «промах» составляет примерно от 2px до 5px.
Мобилка
В списке появляется стрелочка (как и на десктопе). И пользователи на мобилном устройстве следующим действием кликают по ней.
Закрытие
Кнопка закрытия появляется когда мы выбрали какой-то элемент списка. И характер кликов по ней не отличается от самого списка.
Вывод: Для списков текстовых ссылок область клика должна быть увеличена на 4px с верхней и нижней стороны.
Подсказки
Блок с подсказками находится в правом верхнем углу, сделан слабо заметным, и не реагирует на наведения. Но визуально слегка похож на кнопку.
Активность
Кол-во людей кликнувших на эту «псевдо кнопку» заметно меньше от общего числа.
И те, кто кликнул и понял, что ничего не происходит, просто ушли. (это заметно что активность заканчивается только на первой кнопке)
Вывод: Если вы хотите, чтобы на кнопку нажали, нужно менять её состояние при наведении, менять курсор или производить действие при нажатии.
Появляющаяся кнопка
Кнопка имеет размер 200+px x 48px и как видно практически 100% кликов находятся внутри, что подтверждает пункт 1.
Основная часть кликов приходится в центр кнопки с небольшим смещением к центру экрана (
Вывод: Кнопка достаточного размера близкая к центральной части экрана — профит.
Эпилог
Так к чему я это всё? Можно много читать статей про ux/ui, изучать патерны сканирования контента пользователем и смотреть видео на ютубе.
Но лучше 1 раз увидеть изучить метрику, чем слушать истории.
Подключайте метрики и делитесь своими результатами 🙂
Раскрываем карты Яндекс.Метрики
Раздел «Карты» в Яндекс.Метрике – это еще один набор отчетов, который поможет проанализировать поведение пользователей. Особенность в том, что данные представлены не в виде таблиц и графиков, а на скриншоте страниц вашего сайта.
Сохраните изменения. Если у вас уже установлен счетчик на сайте, то после подключения данной функции обязательно обновите код на всех страницах сайта. Инструкцию по настройке всех возможностей счетчика вы найдете здесь.
Далее нужно, чтобы каждая тепловая карта Яндекс.Метрики «накопила» данных для анализа, поэтому лучше подождать неделю-две перед изучением отчетов.
Отчетов всего четыре и находятся они в разделе «Карты»:
Давайте последовательно рассмотрим их на примере тестового аккаунта Яндекс.Метрики. Рекомендуем зайти в него, если еще не подключили счетчик на свой сайт, чтобы понять, как это работает.
Карта ссылок
Инструмент позволяет собрать статистику переходов по всем ссылкам на сайте. В зависимости от популярности ссылки выделены цветом: чем чаще пользователи кликают по ссылке, тем теплее ее цвет на графике. Цвет меняется от синего к зеленому, а затем от желтому к оранжевому. Самые посещаемые ссылки выделяются красным.
Например, в нашем случае пользователи чаще кликают на ссылки «Metrica» и «Pricing». А вот по ссылке «Resources» не было кликов, поэтому сначала стоит проверить корректность ее работы, и если все в порядке, то возможно стоит убрать из Главного меню непопулярный раздел.
Чтобы настроить дополнительные параметры, раскроем меню, кликнув по стрелочке в правом верхнем углу:
В меню можно указать страницу, задать временной интервал и дополнительные фильтры для сегментации трафика:
Если нужно посмотреть результаты для группы страниц, то используем символ «*». Например, чтобы оценить общую популярность ссылок в боковом меню на страницах каталога указываем адрес: https://mysite.ru/catalog/*. Также для выбора группы ссылок можно использовать регулярные выражения.
Можно выбрать адрес страницы на самой карте. Для этого кликаем по кнопке «Взаимодействие с сайтом» и, кликая по ссылкам, переходим в нужный раздел. Заходим на страницу «Pricing»:
После перехода на нужную страницу кликаем по кнопке «Просмотр карты»:
И только тогда отобразится статистика для выбранной страницы:
Чтобы посмотреть количество переходов и долю переходов относительно всех ссылок на странице, кликаем по нужной ссылке на сайте:
Например, по ссылке «Features» за квартал было совершено 654 клика, и это четверть от трафика на странице. В нашем случае популярная ссылка стоит на заметном и удобном месте, поэтому перемещать ее не нужно.
Для чего пригодится карта:
Дополнительно: в карте ссылок не учитываются редиректы (внутренние и на другие сайты). Если они очень нужны, то придется настраивать параметр «trackLinks». Также Метрика исключает из ссылок «www», рекламные метки и части ссылок после «#». Другие параметры ссылок учитываются.
Карта кликов
Карта отображает информацию обо всех кликах по элементам страниц сайта. По аналогии с предыдущей картой цветами обозначена популярность элементов по количеству кликов. Наиболее кликабельные области страницы выделяются красным цветом. Максимальный период времени, за который можно изучить данные – 1 год.
Пользователи часто кликают по кнопке в первом экране «Get started», а также пытаются авторизироваться и перейти в раздел «Pricing». А вот если прокрутить страницу ниже, то видно, как пользователи кликают по некликабельному тексту, принимая за ссылки:
Значит пользователям не хватает информации, ссылок на страницы услуг в данном блоке.
В меню, помимо основных функций, можно настраивать варианты отображения точек:
Опции: выбираем размер точек и степень прозрачности. Пригодятся, если на странице много мелких элементов или важно видеть надписи на кнопках.
Тип отображения карты: выбираем способ окрашивания областей клика, доступны варианты:
Тепловая карта – теплые цвета соответствуют частым кликам, холодные – редким. Этот режим отображения установлен по умолчанию и наиболее наглядный.
Монохромная карта – плотность цвета соответствует частоте кликов в данной точке.
Клики по ссылкам и кнопкам – на карте не отображаются клики по элементам, не являющимся ссылками или кнопками.
Карта прозрачности – карта кликов отображается как «туманная маска», наиболее кликабельные элементы более четко проступают сквозь «туман».
Карта элементов – на карте отображаются все элементы страницы сайта.
Все их показывать не будем, чтобы не удлинять статью (а вам задание покликать по ним и выбрать удобный для себя). Мы в основном используем вариант по умолчанию.
Практический смысл
Карта скроллинга
Если нужно понять, докручивают ли пользователи страницу до конца и на какие блоки обращают больше внимания, то вам пригодится карта скроллинга. Данные можно посмотреть не более чем за 15 дней (включая текущий). Красным цветом выделяются наиболее просматриваемые блоки, синим – менее популярные.
Вверху справа видим общее количество просмотров и среднее время просмотра для первого экрана. 2 секунды для первого экрана – слишком мало, значит пользователям не интересен текст. На вертикальной полоске справа видим, что при прокрутке страницы вниз падает количество просмотров информации.
В меню все те же функции, что и для предыдущих карт:
Существует только два варианта отображения карты (рекомендуем первый вариант, он задан по умолчанию):
Тепловая карта – изменение времени просмотра страницы выделено зонами разного цвета. Этот режим отображения установлен по умолчанию и наиболее наглядный.
Карта прозрачности – области страницы, которые пользователь просматривал меньшее время, затемнены, области, которые просматривались большее время – более прозрачные.
Как использовать данную карту:
Аналитика форм
Инструмент показывает воронку заполнения по каждой форме на странице, т.е. сколько человек открыло форму и сколько заполнило ее до конца. Как и для предыдущей карты, данные доступны за последние 15 дней.
По некой тестовой форме видим, что из 4040 посетителей только 136 взаимодействовали с ней, но при этом не отправили свои данные.
В этом отчете видим а) основное меню с уже нам известными функциями и б) дополнительное меню справа, где можно выбрать форму на странице и решить, какую информацию показать для нее:
Наиболее интересны вкладки, где можно посмотреть либо общую информацию по конверсии, либо статистику по каждому полю формы.
В демо-аккаунте часть функций отключена, поэтому пример данных по форме записи на прием с сайта клиники:
Только 37% пользователей начинают заполнение формы. Возможно, смущает что нельзя выбрать врача И время приема, поэтому клиенты предпочитают позвонить в клинику. По второй вкладке видим, что пользователи тратят больше времени на заполнение капчи (лучше было бы её убрать) и не замечают галочку о согласии с условиями обработки данных (нужно показать ее над кнопкой отправки данных формы).
Инструмент поможет выяснить:
Аналитика форм работает только для тех форм, данные с которых отправляются с помощью события «submit» и поля не скрыты в атрибуте «style» значением «display: none». Формы, где отправка данных происходит с помощью других событий, не доступны для анализа в Аналитике форм. Поэтому если в Яндекс.Метрике по этому отчету нет данных, то причина может быть не в отсутствии конверсий, а в том, что сервис не распознает формы на сайте.
Дополнительный совет
Он относится ко всем картам: используйте сегментацию. Так вы сможете получить более точную и полезную информацию. В меню каждой карты большой выбор параметров, который пригодится для многих задач:
Например, можно отдельно посмотреть, куда кликали пользователи по рекламному трафику и доработать продающую страницу или сколько экранов просмотрели клиенты, совершившие заказ, и поместить важную информацию выше. Если до сих пор не настроили цели, то вот вам инструкция.
Резюме
Для анализа поведения пользователей на сайте карты – незаменимые инструменты. Анализ карты ссылок позволяет разработать эффективную и удобную навигацию, улучшить перелинковку. Карта кликов показывает, где посетители хотят видеть ссылку, а где и вовсе не замечают ссылки. С помощь карты скроллинга можно улучшить компоновку страниц, подобрать их длину. Аналитика форм применяется для повышения конверсии форм на сайте.
Желаю успехов в анализе поведения пользователей на вашем сайте. Вопросы можно задать в комментариях, а если нужна персональная консультация по сайту от наших специалистов, то ждем вас здесь.
