Карта кликов: Карта кликов — Метрика. Справка

Содержание

Что такое карта кликов | Unisender

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

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

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

Режимы отображения карты кликов

Существуют следующие режимы отображения:

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

Аналитика рассылок

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

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

Что дает инструмент для владельца веб-сайта?

Если использовать получаемую информацию по назначению, то инструмент дает многое. Данные кликабельности решают следующие важные проблемы:

  • определяются наиболее эффективные схемы продвижения товаров и услуг на сайте;
  • выбирается оптимальное графическое оформление страницы;
  • определяются пользовательские предпочтения.

Как правило, интересы посетителей сайта могут меняться. Карта кликов дает возможность владельцу сайта всегда держать руку на пульсе. Например, можно перенести кнопку заказа услуги или товара в более кликабельную область страницы, что заметно увеличит активность пользователей. Или же можно произвести своевременную замену надоевшего пользователям рекламного баннера. Это наиболее важный аналитический инструмент, позволяющий отслеживать активность и поведение пользователей.

Тепловая карта кликов сайта – Plerdy

Які ключові переваги теплових карт кліків plerdy?

Теплові карти Plerdy розроблені з урахуванням реального досвіду проведення юзабіліті аF:удитів:

Точность сбора кликов ‒ 99% Это стало возможным благодаря собственному алгоритму сбора кликов, который записывает только важные клики и показывает их точное расположение даже на мобильных устройствах. Благодаря этому собранные данные являются надежным источником информации для оптимизации сайта, редизайна и других изменений.

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

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

Записываются клики по динамическим элементам Карта кликов Plerdy фиксирует все данные из динамических элементов сайта, в том числе клики по поп-ап формам, выпадающим меню, слайдерам и др. Вся информация про элементы и другой контент сайта созданных с помощью JavaScript фреймворков, SPA или AJAX технологий доступна для анализа.

Для анализа показываются только важные клики Под «важными» мы понимаем те, которые были сделаны по объектам сайта и которые можно профессионально интерпретировать. Все клики по слепым зонам (в которых нет ни картинок, ни кнопок, ни ссылок) автоматически скрываются, как такие, которые не несут ценности для юзабилити аудита

Данные записываются группировано По всем кликам, которые сделали пользователи, без привязки к отдельному посетителю. Это обеспечивает соблюдение требований политики конфиденциальности и защищает персональные данные ваших посетителей.

Возможно сегментирование аудитории по различным характеристикам Можно видеть куда кликали на сайте пользователи из различных типов устройств (компьютеров, смартфонов и планшетов) и разного трафика (поисковых систем, рекламы, соцсетей и т.п.)

Все события на сайте записываются сразу После установки скрипта. Их просмотр можно настроить позже, ведь в истории будут сохранены все события с момента установления скрипта.

Что такое карта кликов и как ее посмотреть?

В данной статье мы посмотрим, что такое карта кликов и как ее посмотреть, узнаем, что как включить и как работать с картой кликов в Яндекс.Метрике. Рассмотрим, как отключить банковскую карту от услуги «клик».

Что такое карта кликов в Яндекс Метрике?


Что такое карта кликов в Яндекс Метрике? Мы уже рассматривали, что собой представляет аналитика форм в Яндекс Метрике, теперь остановимся на картах.


Данные карты называются «тепловыми». Данные карты используются для проведения аналитики. На таких картах отражаются все клики. Яндекс.Метрика содержит не только карту кликов, но и карту ссылок, аналитику форм и карту скроллинга. В Карте кликов есть несколько способов изображения:

  • тепловая;
  • монохром;
  • клики по ссылками кнопкам;
  • наиболее кликабельные элементы;
  • карта элементов.

Тепловая карта метрики помогает визуализировать активность пользователей на страницах сайта и является действенным инструментом SEO продвижения в Яндекс, для того чтобы счетчик метрики работал нужно установить настройки.

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

Это поможет выделить кликабельные части сайта. На карте все зоны указаны разными цветами, чем теплее цвет, тем больше кликов было совершено. Для того чтобы пользоваться картой эффективно нужно произвести настройки аналитики, если не получается это сделать сразу, то можно пройти обучение СЕО онлайн, где научат эффективно использовать аналитику.

На карте синим цветом будет указано где наименьшее количество кликов, красным цветом будет отображаться большое количество кликов. На монохромной карте чем ярче цвет, тем больше кликов там было сделано. Такой параметр, как «клики по ссылкам» собирает статистику только переходов по элементам, которые содержат ссылку. Если в настройках используется карта прозрачности, то места, где больше кликов будут более белыми.

Такой способ аналитики помогает оценить активность, создать статистику по URL. Карта метрики позволяет «увидеть сайт со стороны». Это поможет усовершенствовать сайт по потребностям посетителей, в том числе при профессиональной настройке контекстной рекламы яндекс директ, сделать его более удобным. Если какие то ссылки и элементы сайта посетители обходят стороной, но бывают ситуации, когда пользователь хотел кликнуть, но почему то этого не сделал.

Карта кликов: как посмотреть?

Как посмотреть карту кликов? Карту кликов можно посмотреть в специальном разделе , называется он «Карты», расположен этот раздел в Яндекс Метрика. Информация на карте подается не обычным способом, она не предлагает сухих цифр и с помощью скриншота страниц интересующего сайта показывает поведенческие особенности посетителей сайта.

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

  • карта ссылок;
  • карта кликов;
  • карта скролинга;
  • аналитика форм.

Карта ссылок анализирует количество переходов по ссылкам, которые размещены на сайте. Самые популярные ссылки система выделит красным цветом. Самые не посещаемые будут синими. Если ссылка не кликабельна, нужно найти причину, возможно она не работает или работает некорректно.


Если нарушений в работе ссылки нет, то можно просто убрать ссылку, которой никто не пользуется. С помощью такого раздела можно создать интерфейс, который будет удобен пользователям при использовании навигации сайта, например для каталога книжного интернет-магазина, о котором мы уже говорили.

Такие карты помогут проанализировать, какая информация на сайте наиболее интересна посетителям. Карта ссылок укажет на ссылки, которые работают некорректно.

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

Как открепить карту клик?

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


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

Как работать с картой кликов в «Яндекс Метрике»

Речь пойдет об уникальном инструменте, позволяющем измерять и визуально отображать сведения по статистике переходов (кликов) на веб-ресурсе.  Система аналитики фиксирует абсолютно все щелчки левой кнопкой мышки по кнопкам, элементам панелей вертикального и горизонтального меню, ссылкам (в том числе и по тем, которые не являются активными).

Чтобы наглядно ознакомиться с инструментом, достаточно, авторизовавшись в сервисе «Яндекс Метрика», перейти во вкладку «Карты».

Нажимаем на кнопку «Карта кликов».

В результате отобразятся данные о кликах, собранные системой сбора статистики.

Клики и переходы на сайты с ссылок и кнопок подсвечиваются, при этом цвет зависит от частоты и идет от синего (минимум) к красному (максимум).  

Для чего нужен представленный в статье инструмент?

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

Кроме того, благодаря «Карте ссылок», есть возможность выявить наиболее «кликабельные» элементы, популярные кнопки, элементы/разделы, нажатие на которые посетителем ассоциируется, как переход в соответствующий раздел (или статью).

Логично, что с помощью этих же сведений можно определить и выявить неактивные кнопки и ссылки, наличие которых никак не влияют на эффективность веб-сайта и возникает логичный вопрос об их необходимости.

Чтобы просматривать не только главную страницу сайта, но и другие, предусмотрена возможность переключения на «Взаимодействие с сайтом» с целью смены активной страницы. Для этого достаточно нажать на соответствующую кнопку.

Отрегулировать размеры точек и прозрачность, можно с помощью тумблера под названием «Опции».

Для «Карты ссылок» в сервисе «Яндекс Метрика» можно задавать периоды, за которые должны отображаться сведения.

Доступные варианты отображения

«Карта ссылок» поддерживает следующие варианты отображения информации:

  • «Тепловая карта» — классический вариант, при котором синим цветом обозначается минимум кликов, а красным максимум, при этом палитра изменяется от меньшего к большему в зависимости от частоты;

  • «Монохромная карта» — используется только один красный цвет для подсветки переходов, при этом, в зависимости от частоты, изменяется плотность цвета;

  • «Клики по ссылкам и кнопкам» — убирается подсветка кликов по элементам, не являющимся «ссылочными» и «кнопочными»;

  • «Карта прозрачности» — отображение в виде «туманной дымки» с проявлением прозрачности в точках кликов;

  • «Карта элементов» — происходит отображение всех кликабельных веб-элементов сайта, при этом заливка осуществляется не точечно (как в случае с другими форматами карт), а полностью.

Какой из вариантов отображения выбрать – зависит лишь от удобства восприятия информации, информативности.

Как подключить «Карту ссылок»

Инструмент подключается совместно с «Вебвизором», нажатием галочки в настройках и добавлением (или обновлением) кода счетчика на веб-сайте (раздел html-разметки <head></head>).

Не забываем нажать кнопку «Сохранить».

Обратите внимание на возможное возникновение проблем с отображение карты, что может быть обусловлено использованием посетителями уже устаревшего, но до сих используемого  интернет-пользователями браузера «Internet Explorer» ниже 8-ой версии, неиспользованием ресурсом кодировки UTF-8, защитой веб-ресурса от показов «iframe» и т. д.

Если «Карта кликов» отображается, но собирает сведения не со всех страниц веб-сайта, то проблема связана с тем, что счетчик установлен не на всех веб-страницах ресурса. Следует внимательно просмотреть разметку, добиться наличия кода-установочника на каждой странице.

Использование сегментации при построении «Карты ссылок»

Работа с сегментами позволяет получить более информативные сведения с разбивкой на определенные группы. Можно создать свои условия сегментации или использовать ранее созданные.

Добавление нового производится за счет нажатия кнопки со знаком «+».

Есть три базовых раздела связанных с просмотрами, визитами и посетителями.  

На основании сведений о просмотрах можно задать конкретный интересующий URL, заголовок веб-страницы, реферер, временные характеристики.  

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

Раздел «Пользователи» содержит условия, благодаря которым можно задать описание посетителей веб-ресурса, выделить целевую аудиторию.

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

Сравнивать можно с предыдущим периодом времени, с готовыми сегментами и заданными вручную самостоятельно, а также сохраненными ранее заданными условиями.

Заключение

Ознакомившись с возможностями опции «Карта ссылок» сервиса сбора данных и аналитики «Яндекс Метрика», можно сразу же приступить к использованию полученных знаний на практике. Регулярно работая с отображаемой в интерактивном режиме информацией, а также взаимодействуя с другими инструментами системы аналитики, такими как «Вебвизор», «Карта скроллинга», «Карта ссылок», «Аналитика форм», можно значительно улучшить юзабилити своего веб-сайта.

Удобство использования веб-ресурса пользователями является неотъемлемым условием для повышения эффективности и конверсии. Это ценится не только людьми, заходящими на ваш сайт, но и поисковыми системами, реагирующими на «быстрый» уход посетителей, не нашедших информацию или запутавшихся в навигации по вашему сайту. Поведенческий фактор в таком случае снижается естественным образом, что есть плохо.

Поэтому, уделяйте «usability» (удобству пользования веб-ресурсом) много внимания и времени с целью повышения эффективности вашего веб-сайта и, как следствие того, повышения доходов, прибыли и отдачи. При необходимости обращайтесь к специалистам, которые положительно себя зарекомендовали в области «правильного» и удобного для посетителя построения разделов веб-источника и подачи различного контента.

Комментарии

Хотите узнать все
подробности о своём
сайте, звоните:

8 800 200 47 80

(Бесплатно по России)

или

Отправить заявку

Сообщение отправлено

что это, как ее увидеть, устранение проблем

Есть проблемы с ранжированием, проект не растет, хотите проверить работу своих специалистов по продвижению? Закажите профессиональный аудит в Семантике

Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

Карта кликов – это бесплатный инструмент для аналитики сайта.


Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA

С его помощью можно измерять и отображать статистику по кликам всех элементов страниц – даже тех, что не являются ссылками. Действия посетителей можно просматривать как по отдельной странице, так и по целым разделам сайта.

Во время продвижения сайта в интернете тепловая карта позволяет наглядно увидеть соотношение числа кликов на странице. Фактически, она представляет собой графическое отображение активности пользователей, позволяя определить недостатки дизайна или интерфейса (кажущиеся посетителям ссылкой, но не являющиеся таковыми), выявить наиболее просматриваемые области. Зная, на что люди обращают внимание, можно эффективно организовать структуру каждой отдельной страницы и выбрать оптимальное место для размещения рекламы и специальных предложений.

Как посмотреть карту кликов

Когда в Яндекс.Метрике только появилась возможность просматривать карту кликов, в каждом аккаунте эта функция была включена автоматически. Сегодня, при добавлении нового счетчика или редактировании текущего, пользователь должен самостоятельно устанавливать галочку в соответствующем разделе.

Карта располагается в главном меню Яндекс.Метрики (с левой стороны), и представляет собой таблицу страниц ресурса.

Фильтр параметров позволяет просматривать пользовательскую активность за «сегодня», «вчера», неделю, месяц и год. При выборе страницы к просмотру, они открывается в новом окне браузера. Рядом с картами расположены другие разделы. Пользователь может переключаться между ними без потери результатов проверок. Клики отображены разными цветами. Можно просматривать страницу в следующих режимах:

  1. Тепловая карта. Чем больше было кликов, тем теплее цвет и наоборот – холодными цветами отмечены места, где пользователи не активны.

2. Монохромная карта. Плотность цвета зависит от количества кликов в одной точке.


3. Клики по ссылкам. Из показа исключаются элементы, не относящиеся к интерфейсу.


4. Карта прозрачности. Просматриваемая страница затемняется, и только места четко выражены.


5. Также пользователь может просмотреть карту элементов. Она визуализирует все элементы интерфейса, на которые чаще всего кликают.

Просматривать карту кликов на странице можно только в том случае, если на ней установлен счетчик Яндекс.Метрики.

Возможности инструмента

Тепловая карта кликов – удобный и эффективный инструмент отображения распределения кликов с целью дальнейшего анализа поведения посетителей сайта. С ее помощью можно узнать, какие элементы отвлекают внимание, что ищут люди из различных регионов, а также поведение людей, перешедших из социальных сетей. Одно из главных преимуществ состоит в возможности настраивать сегмент аудитории, также подлежащей анализу.

  1. Параметры просмотра. Существует возможность учитывать только те просмотры, в которых пользователь кликал по заголовку и прочим кнопкам.
  2. Параметры визита. Эта функция позволяет фильтровать посетителей по географическому местоположению, виду используемого устройства (телефон, ПК), истории посещений и места в интернете, с которого был осуществлен переход.
  3. Дополнительная настройка. Она дает возможность установить фильтр по возрастным и половым категориям пользователей сайта.

Чтобы сравнить поведение людей на странице за разные периоды времени, можно воспользоваться функцией «Сравнение сегментов». При наличии подробной информации о том, как ведут себя люди, заходя на сайт, интернет-маркетолог может тщательно проработать стратегию развития ресурса: улучшить блоки, определить места, отвлекающие пользователей, выбрать оптимальное расположение рекламы и т. д. Это также позволит эффективно управлять фокусом внимания посетителей и улучшит визуальное восприятие ресурса.

Способы применения результатов тепловой карты кликов на практике

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

Во-первых, составление общей аналитики сайта. Это наиболее простой сценарий применения карты кликов. Можно выяснить, что представляет больший интерес для пользователей сайта: контент, страница контактов или каталог товаров. Это может помочь в выстраивании более правильной и удобной структуры сайта, чтобы пользователям было удобнее заходить в интересующие их разделы и страницы. К примеру, передвинуть ссылку выше, правее или вовсе убрать ее. Для сбора подобной аналитической информации используется режим тепловой карты кликов.

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

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

В-четвертых, при помощи карты кликов веб-мастер может узнать о работе перелинковки страниц, какие разделы и пункты меню более востребованы аудиторией. Это можно сделать посредством карты кликов по элементам.

Причины неисправности карты кликов

Случаи, когда карта кликов в Яндекс.Метрике не работает, довольно редки. Обычно это связано с тем, что на веб-ресурсе установлена защита от показа в плавающем фрейме, либо используется почтовый прокси-сервер nginx. Чтобы исправить проблему, необходимо добавить в исключения домен WebVisor, его subdomain и непосредственно домен сайта.

Инструмент для сбора статистических данных ресурса может применяться для неограниченного числа страниц. Помимо Яндекс.Метрики, существуют другие инструменты веб-аналитики, в составе которых присутствуют тепловые карты кликов. Есть отдельные модули подключения, устанавливаемые на сайт. Они подходят для программного обеспечения, которое поддерживает динамические информационные веб-сайты: ClickHeat, Mouseflow, OpenWebAnalytics и т. д. Суть их работы практически идентичны: они помогают следить за поведением пользователя. Главное отличие состоит в способах детализации данных.

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

Карта кликов Яндекс — уникальный инструмент, визуально отображающий статистику кликов на сайт. Если вы продаете что-то онлайн, то благодаря карте кликов сможете понять, какие действия производят посетители с различными элементами на страницах сайта. Расскажем, как пользоваться картой кликов и зачем это нужно.

Где находится карта кликов

Для ознакомления с картой кликов нужно авторизоваться в Яндекс.Метрике и нажать на кнопку «Карта кликов» во вкладке «Карты». Статистика по кликам соберется автоматически. Переходы с кнопок и ссылок на сайте подсвечены разными цветами на карте ссылок: красный цвет означает максимальную частоту, синий — минимальную.

Как найти карту кликов

Как отображаются данные карты кликов

Изменить страницу для просмотра можно с помощью кнопки «Взаимодействие с сайтом», внешний вид точек регулируется тумблером «Опции». Также вы можете задать период, за который будет отображаться информация.

Настройки карты кликов

Что касается карты ссылок, то для нее доступны разные стили отображения информации: дефолтный с палитрой от красного к синему («Тепловая карта»), с использованием красного цвета различной интенсивности («Монохромная карта»), без подсветки кликов не со ссылок и кнопок («Клики по ссылкам и кнопкам»), с отображением всех элементов («Карта элементов»), с прозрачными точками («Карта прозрачности»). Любой пользователь может установить тот вид, который ему удобнее и привычнее.

Пример тепловой карты кликов

Подключить карту ссылок можно там же, где и Вебвизор: для этого в настройках сервиса нужно нажать соответствующую галочку, а затем добавить HTML-код счетчика в тэг <head> каждой из страниц сайта.

Как подключить карту кликов

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

Чем полезна статистика карты кликов

В первую очередь, по данным из карты кликов можно оценить юзабилити сайта, то есть его удобство для пользователей, независимо от того, откуда они на него вышли: из поисковых систем, рекламных объявлений и роликов, социальных сетей, рассылок, мессенджеров.

Используя карту ссылок, вы легко определите самые популярные кнопки, страницы, статьи и разделы сайта, а также неактивные элементы, которые можно удалить без потерь для посещаемости. Для интернет-магазина это еще и возможность усовершенствовать как интерфейс сайта, так и собственный ассортимент.

Карта кликов — удобный инструмент для анализа и повышения юзабилити сайта. Если вы уже решили создать интернет-магазин и развивать его, обращайте внимание на удобство вашего ресурса для пользователей и советуйтесь со специалистами в этой отрасли.

Клики на карте / Хабр

На Яндекс.Метрике новый инструмент – карта кликов. Он, как нетрудно догадаться, предназначен для измерения и отображения статистики по кликам.

По этой карте легко определить, куда кликают посетители вашего сайта (и, соответственно, куда они не кликают). С первого взгляда видно:

Вы можете выбрать несколько вариантов показа карты:

  • Тепловая карта
    — теплые и яркие цвета соответствуют частым кликам, а тусклые и холодные – редким. Эта карта идет по умолчанию.
  • Монохромная карта — тот же принцип, но всего один цвет — красный.
  • Распределение кликов по времени – карта строится в зависимости от времени
    — от загрузки страницы до клика, если время небольшое
    — клик обозначается красным, а если большое – синим.
  • Все клики одним цветом — как на монохромной карте, но сами клики рисуются не областями, а точками.

Пользователи Метрики знают о существовании

карты ссылок

. Карта ссылок и карта кликов отличаются и выполняют разные задачи. Например, в карте кликов подсвечивается вся страница, а не только ссылка. Карта кликов показывает относительное количество кликов по элементам на странице, поэтому она работает не только для ссылок, но и для любых других элементов (кнопки, текст, картинки).

Поясним на примере. Если на вашем сайте размещен список новостей, который постоянно ротируется (на одном месте каждый раз показываются ссылки на разные новости), то карта кликов будет отображать кликабельность в зависимости от позиции, на которой расположена ссылка, а карта ссылок – в зависимости от количества переходов на конкретную новость. Разница – очевидна, но важно измерять и то, и другое.
Чтобы статистика для построения карты кликов начала собираться, необходимо на странице редактирования счётчика на вкладке «код счётчика» установить флажок «Карта кликов» (это действие добавит вызов yaCounterXXXX.clickmap() в код счетчика) и заменить код счетчика на своем сайте на новый. Для вновь создаваемых счетчиков флажок «Карта кликов» установлен по умолчанию.

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

Команда Яндекс.Метрики, дарим тепло

Аналитика в реальном времени для вашего сайта

Наведите указатель мыши на указатель ниже, чтобы узнать больше.

Оптимизация целевых страниц

Вы только что создали специальную страницу или веб-сайт для особого события (Черная пятница, запуск продукта)?

Вы не можете позволить себе ждать даже часы, чтобы узнать, что делают пользователи. Благодаря тепловой карте вы получаете полезные данные в режиме реального времени, поэтому можете действовать быстро и немедленно проверьте влияние ваших изменений.

Динамическое содержимое

Ваши страницы наполнены динамическим содержимым: меню, галереи, видео и т. Д.

тепловая карта позволяет вам видеть взаимодействие пользователя со ВСЕМИ динамическими элементами и изначально поддерживает большинство библиотек Javascript: jQuery, MooTools, Prototype, script.aculo.us, Bootstrap и т. д.

Конфиденциальность соблюдается везде

тепловая карта собирает только те данные, которые необходимы вам для улучшения вашего интернет-магазина.Больше ничего.

Все собранные данные анонимны, что защищает ваших пользователей, а также ваши собственные данные. Тем не менее, тепловая карта может предоставлять данные о страницах, защищенных паролем, и поддерживает HTTPS.

Наведите указатель мыши на указатель ниже, чтобы узнать больше.

Динамическое содержимое

Ваше веб-приложение наполнено динамическим содержимым: меню, раскрывающиеся списки, всплывающие окна, AJAX и т. Д.

тепловая карта позволяет вам видеть взаимодействие пользователя со ВСЕМИ динамическими элементами и изначально поддерживает большинство библиотек Javascript: jQuery, MooTools, Prototype, script.aculo.us, Bootstrap и т. д.

Страницы, защищенные аккаунтом

Большинство страниц вашего веб-приложения защищены паролем и / или по протоколу HTTPS.

тепловая карта работает с ними без необходимости что-либо настраивать или, что еще хуже, поставить под угрозу вашу безопасность, чтобы можно было делать снимки экрана.И очевидно, что HTTPS поддерживается.

Конфиденциальность соблюдается

тепловая карта собирает только те данные, которые необходимы вам для улучшения вашего веб-приложения. Больше ничего.

Нет ключевого журнала. Никакого обнюхивания печенья. Даже IP-адреса не регистрируются. Все собранные данные анонимны, что защищает ваших пользователей, а также ваши собственные данные.

Тепловая карта — Optimizely

Определение предоставлено Fresh Egg

Что такое тепловая карта?

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

Преимущества тепловых карт

Инструменты

Analytics, такие как Google Analytics или Site Catalyst, отлично подходят для предоставления показателей, показывающих, какие страницы посещают пользователи, но им может не хватать деталей, когда дело доходит до понимания того, как пользователи взаимодействуют с этими страницами.Тепловые карты могут дать более полный обзор того, как на самом деле ведут себя пользователи.

Тепловые карты

также намного более наглядны, чем стандартные аналитические отчеты, что упрощает их анализ с первого взгляда. Это делает их более доступными, особенно для людей, не привыкших анализировать большие объемы данных.

Хорошие инструменты для тепловых карт, такие как CrazyEgg, позволяют аналитикам сегментировать и фильтровать данные. Это означает, что можно легко увидеть, как разные типы пользователей взаимодействуют с определенной страницей.

Соображения

Как и большинство форм веб-аналитики, тепловые карты должны содержать большой объем данных, прежде чем их можно будет точно проанализировать. Анализ тепловых карт на основе небольшого количества данных аналогичен слишком раннему вызову A / B-тестов на основании слишком малого количества посещений или конверсий. Поскольку тепловые карты показывают тенденции, важно иметь достаточно информации, чтобы гарантировать, что любые аномалии не повлияют на общую картину тепловой карты.

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

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

Это может означать, что пользователи выходят из процесса после заполнения первого поля. Однако тепловые карты не показывают, если пользователи использовали клавиатуру для перехода по полям формы, а не мышь. Для правильного анализа использования форм можно использовать специальные инструменты аналитики форм. Они будут измерять время, проведенное в каждом поле, а не просто клики.

Примеры тепловой карты

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

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

Тепловая карта также может быть полезна для различения ссылок, когда на странице есть более одной ссылки, ведущей на конкретную целевую страницу. Некоторые инструменты аналитики, такие как Google Analytics, обрабатывают ссылки на один и тот же пункт назначения как одну и ту же ссылку. Из-за этого невозможно определить, какая из ссылок получила больше всего кликов.

Одним из примеров того, где это различие полезно, является определение количества людей, использующих ссылки в нижнем колонтитуле, по сравнению со ссылками в основной навигации.Часто это больше, чем вы ожидали!

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

Это показывает четкое намерение пользователя и предполагает, что эти значки действительно должны ссылаться на дополнительную информацию о каждой из опций.

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

Заключительные мысли

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

Использование тепловых карт на этапе обнаружения вашей CRO-кампании действительно может помочь определить дополнительные области для тестирования. Все примеры, представленные на этой странице, были использованы для информирования A / B-тестов об изменениях макетов страниц и функциональности, чтобы лучше соответствовать намерениям пользователя.

Heatmaps также можно интегрировать с A / B-тестами в Optimizely.Это означает, что вы сможете получить четкое представление о том, как пользователи взаимодействуют с вашими вариантами теста по сравнению с вашим оригиналом.

seaborn.heatmap — документация seaborn 0.11.2

data прямоугольный набор данных

2D набор данных, который можно преобразовать в ndarray. Если фрейм данных Pandas предоставлен, информация индекса / столбца будет использоваться для обозначения столбцы и строки.

vmin, vmax float, optional

Значения для привязки цветовой карты, в противном случае они выводятся из данные и другие аргументы ключевого слова.

cmap matplotlib имя или объект цветовой карты, или список цветов, необязательно

Отображение значений данных в цветовое пространство. Если не указано, по умолчанию будет зависеть от того, установлен ли центр .

center float, optional

Значение, при котором центрируется цветовая карта при построении расходящихся данных. Использование этого параметра изменит значение по умолчанию cmap , если ни один не указано.

robust bool, необязательно

Если True и vmin или vmax отсутствуют, диапазон цветовой карты вычисляется с надежными квантилями вместо экстремальных значений.

annot bool или прямоугольный набор данных, необязательно

Если True, запишите значение данных в каждую ячейку. Если подобный массиву с та же форма, что и данные , затем используйте ее для аннотирования тепловой карты вместо данных. Обратите внимание, что DataFrames будут соответствовать позиции, а не индексу.

fmt str, необязательно

Код форматирования строки для использования при добавлении аннотаций.

annot_kws dict ключа, сопоставления значений, необязательно

Аргументы ключевого слова для matplotlib.axes.Axes.text () когда аннотация правда.

linewidths float, необязательно

Ширина линий, которые будут разделять каждую ячейку.

цвет линии цвет, необязательно

Цвет линий, которые будут разделять каждую ячейку.

cbar bool, необязательно

Следует ли рисовать шкалу палитры.

cbar_kws dict ключа, сопоставления значений, необязательно

Аргументы ключевого слова для matplotlib.рисунок.Figure.colorbar () .

cbar_ax matplotlib Axes, optional

Axes, в которых рисовать шкалу палитры, в противном случае занимать пространство из Главные оси.

square bool, необязательно

Если True, установите для параметра Axes значение «равно», чтобы каждая ячейка была квадратной формы.

xticklabels, yticklabels «auto», bool, list-like или int, необязательно

Если True, отобразить имена столбцов фрейма данных.Если false, не строить имена столбцов. Если в виде списка, нанесите эти альтернативные метки как xticklabels. Если целое число, используйте имена столбцов, но наносите на график только каждые n этикетка. Если «авто», попробуйте плотно нанести неперекрывающиеся надписи.

mask bool array or DataFrame, optional

Если передано, данные не будут отображаться в ячейках, где mask имеет значение True. Ячейки с пропущенными значениями автоматически маскируются.

ax matplotlib Axes, optional

Axes, в которых нужно рисовать график, в противном случае используйте текущие активные Топоры.

kwargs другие аргументы ключевого слова

Все остальные аргументы ключевого слова передаются в matplotlib.axes.Axes.pcolormesh () .

Что такое тепловая карта? Тепловые карты и объяснение тепловых карт

5 различных типов и примеров тепловых карт У нас есть пять различных типов тепловых карт:
  • Нажмите «Тепловая карта»
  • Прокрутка тепловой карты
  • Внимание Тепловая карта
  • Тепловая карта движения
  • Географическая тепловая карта
Каждый из них дает вам ключевые идеи, которые помогут вам конвертировать больше.Давайте пройдемся по ним и посмотрим, чем они отличаются визуализацией и удобством использования.
Щелкните тепловую карту Показывает, где именно пользователи нажимают на вашем сайте.

Основная причина использования этой тепловой карты заключается в том, что она точно показывает, как конвертируются ваши индивидуальные призывы к действию (CTA) и интерактивные элементы.

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

Сценарий, который часто выделяется на тепловых картах кликов, — это переход пользователя на страницу и щелчок по ряду случайных некликабельных элементов. В конце концов они сдаются и покидают сайт без конвертации. Они действительно хотят конвертировать, они просто не могут понять, как это сделать.

Даже в менее критичной версии, где пользователь в конце концов находит призыв к действию и успевает перейти по ссылке, вероятность конверсии снижается. Исследование показало, что веб-сайты, не соответствующие ментальным моделям пользователей, расстраивают пользователя. И разочарованные пользователи с меньшей вероятностью купят или подпишутся на вашу услугу.

С другой стороны, теперь вы знаете , что нужно изменить, чтобы повысить коэффициент конверсии. Это важный шаг в оптимизации вашей воронки конверсии.

Когда вы используете тепловую карту по кликам?
Мы рекомендуем использовать тепловые карты по кликам, чтобы:

  • Повысьте коэффициент конверсии, определив проблемы, мешающие пользователям совершать конверсию
  • Отслеживание и тестирование удобства использования как старых, так и новых функций веб-сайта
  • Выявление ошибок на вашем веб-сайте и немедленное реагирование на проблемы, связанные с кодом
  • Посмотрите, в чем заключается ошибка, вместо того, чтобы полагаться на сторонние описания

Что это для вас?
  • Дизайнеры пользовательского интерфейса могут видеть, ведут ли пользователи себя так, как вы ожидаете.Например, нажимают ли они кнопки или другие вещи на сайте, которые не реагируют?
  • Маркетологи могут оптимизировать коэффициент конверсии, просматривая тепловые карты кликов. Могут ли ваши пользователи понять, куда вы хотите, чтобы они пошли дальше? Рассмотрим, например, перемещение кнопок туда, где пользователи пытаются щелкнуть, но терпят неудачу!
  • Владельцы / разработчики продукта: Существуют ли проблемы, связанные с удобством использования или кодом, которые можно исправить, чтобы повысить удовлетворенность продуктом?
  • Основатели / технический директор: Соответствует ли реальное поведение пользователей тому, как вы представляли себе, как подходит ваш продукт? Следует ли вкладывать больше или меньше ресурсов в UX?

Прокрутка тепловой карты Эффективный анализ длинных или содержательных страниц.

«Тепловая карта» или «карта прокрутки» показывает, насколько далеко вниз прокручивают страницу пользователи в среднем. По сути, , сколько вашего контента на самом деле видят ваши пользователи.

Тепловая карта с прокруткой особенно полезна при попытке определить, где разместить контент на странице — или когда выясняется, какой процент пользователей действительно видит конкретный контент на странице.

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

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

Используя тепловую карту прокрутки, вы можете увидеть, что пользователям становится скучно на полпути и они отключаются, или, возможно, их внимание привлекает мигающий баннер еще до того, как они увидят призыв к действию.Возможно, он становится слишком насыщенным текстом и требует визуального контента или большего количества заголовков.

Когда вы используете тепловую карту прокрутки
Вы хотите использовать тепловую карту прокрутки, чтобы:

  • Измерьте взаимодействие пользователей с вашим контентом
  • Определите среднюю линию сгиба и оптимальное размещение для важного содержимого

Что это для вас?
  • UX-дизайнеры могут видеть, скучно ли пользователям или отвлекается во время чтения.Возможно, вам стоит удалить непонятные элементы дизайна… или добавить несколько привлекательных!
  • Маркетологи могут определить, где пользователи теряют внимание, и могут захотеть перейти к следующему шагу. Поместите кнопки, интересные ссылки или интерактивный контент там, где упадет вовлеченность.
  • Основатели / технические директора: Узнайте, приносит ли ваша стратегия контент-маркетинга свои результаты
Тепловая карта внимания Понимание внимания может помочь вам оценить эффективность дизайна страницы.

Тепловые карты внимания иногда называют тепловыми картами времени. Они получены из тепловых карт прокрутки и выглядят похожими, но показывают время вместо прокрутки. Итак, вы можете увидеть, сколько времени средний пользователь тратит на ваш контент.

Тепловые карты внимания, что неудивительно, наиболее популярны среди наших клиентов, которые работают с контент-маркетингом. Они используют их, , чтобы определить, какой контент привлекает внимание людей больше всего , есть ли контент, который нужно вырезать, и где на странице разместить призывы к действию, чтобы получить больше всего конверсий.

Когда использовать тепловую карту внимания?
Вы хотите использовать тепловую карту внимания для:

  • Посмотрите, какие элементы и элементы вашего контента привлекают внимание дольше всего
  • Определите, где разместить призывы к действию, чтобы получить как можно больше просмотров и конверсий
  • Проверьте, какие типы контента пользователи возвращают для

Итак, чем тепловая карта внимания отличается от тепловой карты со прокруткой?

Отличительной особенностью тепловых карт внимания является то, что они более подробно показывают, какие элементы привлекают внимание, а не какая горизонтальная часть страницы.Элементы, которым уделяется наибольшее внимание, получат более теплый цвет. Это дает большую дисперсию цветов на тепловой карте внимания.

Прокручиваемая тепловая карта обычно начинает быть красной и становится все холоднее и синей по мере прокрутки тепловой карты. Для каждого веб-сайта всегда будет больше людей, просматривающих верхнюю часть веб-сайта, чем нижнюю.

Тепловая карта движения Эффективно для отслеживания мыши, чтобы увидеть, где наиболее вероятно повышение удобства использования и конверсии.

Тепловая карта движения или карта движения показывает, где пользователи перемещают указатель мыши на вашем сайте.

Исследования показывают, что человек помещают мышь там, где они удерживают внимание. Таким образом, тепловая карта движения похожа на тепловую карту внимания, но обеспечивает большую детализацию.

Тепловые карты движения отлично подходят для того, чтобы увидеть, на чем пользователи сосредотачивают свое внимание и обнаруживают ли они важные элементы на вашем сайте, такие как ваши призывы к действию (CTA).

Когда использовать тепловую карту движения?
Тепловые карты движения отлично подходят для:

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

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

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

Географическая карта Определяет, какие регионы, города и районы наиболее перспективны для маркетинга или ремаркетинга ваших продуктов.

Географическая тепловая карта (или «Географическая тепловая карта») показывает количество пользователей из определенного географического местоположения с точностью до 3-х квартального радиуса (этот процесс полностью соответствует GDPR и CCPA).Чем больше пользователей из определенного места, тем ярче становятся цвета в этой области.

Когда вы используете географическую тепловую карту?
Географические тепловые карты предназначены для:

  • Предприятия, которые хотят владеть или обосноваться на соответствующих рынках и в городах
  • Аргументы, основанные на данных, во внутреннем общении
  • Вы хотите отслеживать данные от пользователей, которые интересовались определенными продуктами
  • Конкретная информация на страницах в определенном городе может затем использоваться в маркетинговых кампаниях в Facebook, Twitter или Instagram.

Что такое тепловая карта, как ее создать, примеры и тематические исследования

Тепловые карты — отличный инструмент для визуализации сложных статистических данных.

Доктора, инженеры, маркетологи, социологи и исследователи всех видов используют тепловые карты, чтобы сделать наборы данных понятными и действенными.

Но что такое тепловая карта? И как вы подойдете к его созданию?

Давайте подробно рассмотрим, как можно начать работу с тепловыми картами уже сегодня.

Что такое тепловая карта?

Тепловая карта — это программное обеспечение для анализа данных, которое использует цвет так же, как столбчатая диаграмма использует высоту и ширину: в качестве инструмента визуализации данных.

Если вы просматриваете веб-страницу и хотите знать, какие области привлекают наибольшее внимание, тепловая карта покажет вам наглядно, что легко усвоить и принять решения.

Что показывает тепловая карта?

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

Эта тепловая карта, например, показывает, насколько далеко вниз прокручиваются посетители страницы:

С тепловой картой данные для вашей веб-страницы прямо здесь: CTA над сгибом светится ярко-оранжевым светом или нет.

Если это не так, подумайте о том, чтобы переместить его вверх по странице, чтобы он соответствовал тому месту, где посетители обращают наибольшее внимание.

Чтобы узнать о других простых способах увеличения коэффициента конверсии, посмотрите это видео с сайта Crazy Egg:

Вы можете думать о тепловых картах как о форме визуального повествования. Создание тепловой карты поможет вам мгновенно понять поведение посетителей.

Они также помогут вам ответить на важный вопрос: «Где должно быть самое важное содержание на этой странице?»

Как работает тепловая карта?

Программа для тепловых карт

работает, собирая данные с веб-страницы и отображая эти данные на самой веб-странице.

Вот как это делает Crazy Egg.

Сначала мы делаем снимок веб-страницы по выбранному вами URL. Когда HTML-код страницы загружается, версии того, что загружено, также отправляются на наши серверы благодаря короткому разделу JavaScript, вставленному в код вашего сайта.

Затем мы создаем карту всех элементов на вашей странице — всего, с чем кто-либо может взаимодействовать. Эти и их теги и их родительские элементы — это то, что мы используем для построения карты активности пользователей на вашей странице.

Далее мы собираем все данные об активности. Каждый раз, когда пользователь что-то делает на вашей веб-странице, мы отмечаем это.

(Мы также используем фрагмент кода, чтобы убедиться, что это уникальные пользователи, чтобы вы не допустили, чтобы дубликаты или несколько пользователей вмешивались в ваши цифры.)

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

Предположим, кто-то заходит на вашу страницу и нажимает на ваш CTA.Мы запишем этот клик и добавим его ко всей другой имеющейся у нас информации об этой странице.

Затем, когда вы просматриваете страницу на панели управления, вы увидите совокупность всего, что каждый уникальный пользователь сделал на странице, которая выглядит примерно так:

Анализ тепловой карты дает вам визуальный обзор того, где посетители нажимают на вашу страницу — чем больше кликов, тем ярче область, создавая то, что мы называем «горячими точками».

Это означает, что, глядя на тепловую карту, вы можете быстро увидеть, в каких областях страницы происходит много действий, а в каких нет.

Другие типы тепловых карт

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

Прокрутка карты

Должен ли у вас быть более длинный или более короткий контент на странице?

Где должен быть этот CTA?

Карта прокрутки позволяет вам увидеть, какая часть ваших посетителей прокручивала где перед тем, как отскочить.

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

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

Внезапные сильные изменения цвета могут указывать на то, что посетители «думают, что все, что следует за ними, больше не связано с тем, что было раньше (так называемое« логическое завершение »)», — говорит Пип Лаха, основатель Conversion XL. «Это резкие точки падения, которые трудно увидеть с помощью только Google Analytics».

Отчет о конфетти

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

Зачем?

Отчасти потому, что вы будете удивлены тем странным вещам, на которые люди нажимают, в том числе не кликабельным элементам. Это может дать вам уникальное представление о том, как люди переходят на ваш веб-сайт или не переходят на него.

Например, допустим, у определенной страницы высокий показатель отказов. Отчет по отслеживанию кликов конфетти показывает, что люди посещают эту страницу, пытаются нажать на кучу разных элементов, на которые невозможно нажать, а затем расстраиваются и уходят.

Они хотят перейти по ссылке — они просто не могут понять, как это сделать.

Теперь вы знаете, что нужно изменить, чтобы страница конвертировалась.

Еще одно действительно ценное приложение Confetti Report — это его способность отслеживать настраиваемые параметры — например, посетил ли кто-то ваш веб-сайт из платной рекламной кампании или из-за конкретной рассылки электронной почты.

Мы написали целую статью, в которой объясняется, как это отслеживание может помочь предприятиям, особенно брендам электронной коммерции, выяснить, что происходит между кликом и покупкой (или почему многие люди покидают сайт, не добавляя в корзину).

Отчеты по наложению и списку

В отчете «Оверлей» количество кликов на вашем веб-сайте разбито на проценты для каждого элемента. Это позволяет вам точно видеть, какие отдельные элементы вызывают клики.

На миниатюре выше видно, что на странице есть маленькие знаки плюса.

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

Отчет Overlay позволяет визуально увидеть разбивку кликов на вашей странице.

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

Он также позволяет увидеть, какие элементы на странице были нажаты, даже если они фактически ни с чем не связаны.

Отчет со списком отображает аналогичную информацию, но в формате диаграммы, чтобы упростить определение тенденций (например, являются ли элементы, на которые чаще всего нажимают, ссылками), проще для глаз.

Когда следует использовать тепловую карту?

Все время!

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

Вот несколько сценариев, в которых наличие данных тепловой карты может помочь вам быстро принимать более обоснованные маркетинговые решения:

Редизайн сайта

Редизайн веб-сайта может быть дорогостоящим и трудоемким мероприятием.Меньше всего вам нужен редизайн, который работает не лучше оригинала.

Графические дизайнеры и профессионалы UX могут использовать инструменты тепловых карт, чтобы понять, как на поведение пользователя влияют графические элементы, такие как цвет, контраст и размещение, что в конечном итоге приводит к более эффективной конверсии веб-сайта.

Очевидно, что графические дизайнеры в принципе уже все это знают. Но разные аудитории ведут себя по-разному на разных сайтах.

Запуск тепловых карт перед разработкой и запуском редизайна веб-сайта может спасти вас от упущения и попадания на сайт, который не конвертируется или по которому вашей конкретной аудитории сложно ориентироваться.

A / B тестирование

Ты ведь это делаешь? A / B-тесты обеспечивают решающий скачок конверсии, который может стать разницей между быстрорастущим бизнесом и бизнесом, который пытается выжить.

Тепловые карты могут дать вам мгновенное и полезное представление о том, что именно ваши посетители делают по-разному на разных версиях вашей целевой страницы, сообщений в блогах или даже на вашей домашней странице.

Когда вы тестируете перемещение кнопки CTA, изменение копии или изображения, вы можете увидеть коэффициент конверсии страницы и понять, почему одна страница конвертируется лучше, чем другая.(Надеюсь, тест конвертирует лучше!)

С помощью тепловой карты вы можете точно увидеть, чем отличается поведение конверсии. Может быть, более длинная страница преобразуется лучше, поэтому вы думаете: давайте сделаем все наши страницы длинными. Имеет смысл.

Но что, если у более длинной страницы есть другое отличие — скажем, более привлекательный текст в верхней части страницы — и в этом разница?

С тепловой картой вы можете сразу увидеть, где люди прокручивают и куда нажимают, поэтому вы никогда не будете в темноте.

Контент-маркетинг

Даже сейчас большая часть контента написана. Это слова на странице.

Читают ли посетители вашего сайта и интересуются ли они вашим контентом?

Карты прокрутки показывают, насколько далеко вниз прокручивают страницу пользователи, чтобы вы знали, читают ли они ваш контент. Узнайте, какие призывы к действию привлекают наибольшее внимание. с помощью карты кликов, и вы узнаете больше.

Например: допустим, Майкл пишет фантастический подробный пост в блоге об использовании продукта своей компании DocuLoc для защиты документов.

Он определяет варианты использования, документирует действия существующих клиентов и подробно рассказывает о том, почему это важно и почему многие существующие решения не работают.

Если он рассылает спам и рекламирует это, никто не будет это читать; но он это знает, поэтому пост в основном посвящен проблемам безопасности, а не продукту.

Он публикует статью в своем блоге, пишет в Твиттере и делится ею, и она получает приличный трафик.

Пока все хорошо.

На следующей неделе он проверяет отчеты о посетителях.

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

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

Michael не имеет неэффективного контента, от которого люди отскакивают; у него есть машина для генерации лидов, которая дисквалифицирует неподходящих потенциальных клиентов еще до того, как они с ним свяжутся!

Он может узнать все это, потратив всего несколько минут на просмотр данных, что даст ему больше времени для написания своего следующего опуса из 7000 слов.

Тестирование пользовательского интерфейса и удобства использования

Имея возможность отслеживать, куда нажимают посетители и как далеко они прокручиваются, имеет смысл протестировать UX и удобство использования.

Допустим, вы интернет-магазин и обнаружили, что многие люди добавляют товары в свою корзину, но в последний момент они бросают свою корзину.

Пришло время провести небольшое тестирование UX, чтобы увидеть, что происходит.

Используйте тепловые карты и наложения, чтобы увидеть, куда люди нажимают, а где застревают.

Ваша кнопка оформления заказа выглядит синей? Может быть, он недостаточно заметен. Попробуйте что-нибудь более красочное или более высокое на странице.

Покупатели нажимают на то, что не является кликабельным? Или, может быть, они отвлекаются на панель навигации?

Удалите эти отвлекающие факторы из одного варианта страницы, а затем выполните A / B-тестирование двух страниц, чтобы увидеть, какая из них больше привлекает клиентов.

Хотите увидеть анализ веб-сайта в действии? Посмотрите это видео, в котором мы анализируем домашнюю страницу электронной коммерции клиента Crazy Egg Томми Коппера, используя отчеты о посетителях и записи сеансов:

Воронка преобразования

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

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

Вы можете увидеть все это на картах прокрутки и картах конфетти.

Если, однако, вы видите, что на вашу целевую страницу приходит много посетителей, но почти никто не отправляет вам адрес электронной почты или не нажимает на ваш купон, посмотрите на свою тепловую карту, чтобы увидеть, где они нажимают, если вообще.

Возможно, пришло время провести A / B-тестирование нескольких разных страниц, чтобы улучшить удобство использования и устранить отвлекающие факторы, из-за которых посетители могут застрять.

Что можно узнать из тепловой карты

Данные тепловой карты

помогут вам быстро увидеть:

  • Какие заголовки привлекают посетителей и заставляют их нажимать
  • Какие изображения привлекают внимание и что с этим делают люди — вы удивитесь, сколько людей попытаются щелкнуть несвязанное изображение
  • Что отвлекает посетителей от вашего основного контента (многие Пользователи, впервые использующие тепловую карту, шокированы тем, насколько иначе их пользователи перемещаются по сайту по сравнению с их ожиданиями.)
  • Видят ли посетители вашу электронную почту с подпиской (Низкое количество подписок и переходов по ссылкам может быть связано с чем-то столь же простым, как поля с подпиской, которые не выделяются. Тепловые карты делают это ясным и очевидным, чтобы вы могли исправить.)

Вы также можете использовать тепловую карту, чтобы узнать:

  • Работает ли ваша навигация (Знают ли пользователи, что она есть?)
  • Если люди могут легко найти параметры поиска
  • Читают ли посетители ваш контент и сколько его (это огромный пример использования карт прокрутки! )

Просверлите глубже, и вы увидите:

  • Где разместить контент, который наиболее важен для целей вашего посетителя (в недавнем исследовании ConversionXL обнаружил, что время просмотра пользователями распределялось почти точно в соответствии с принципом Парето: 80% вверху страницы, 20% — ниже.(Какая складка?))
  • Где большинство пользователей просматривают страницу (как правило, это верхняя и левая стороны — люди обычно читают веб-страницы по образцу «F» или «Z», поэтому многие сайты предназначены для облегчения это, но контент на основе изображений часто читается по горизонтали.)
  • Разница между тем, что мужчины и женщины, пожилые и молодые люди и люди из разных географических регионов хотят от контента
  • Какие изображения просматриваются, как взаимодействуют пользователи с ними, и как их использовать более эффективно

Все это в сумме дает простой способ выявления проблем, которые ухудшают конверсию, и простой способ постоянно оптимизировать исправления для них.

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

Общие сведения о тепловых картах

Чтение тепловых карт происходит быстрее и интуитивно понятнее, чем получение полезной информации из столбцов с рисунками. Но их еще нужно интерпретировать.

Как читать тепловую карту

Давайте посмотрим на пару примеров тепловых карт в реальном времени. Вот как Khan Academy использовала инструмент тепловой карты, чтобы понять, как их пользователи взаимодействуют с их сайтом.

Инструмент «Тепловая карта» показывает домашнюю страницу Академии Хана, показывая долю посетителей, которые щелкнули по каждому элементу на странице.

Что это нам показывает? В верхнем меню пользователи часто нажимают «Наблюдать», «Практика», «Коуч», но не «Содействовать», на что почти не обращают внимания.

«Поиск» вызывает много действий, видео часто воспроизводится, и два призыва к действию под первым заголовком также привлекают много внимания.

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

Просто увидев, куда на странице нажимают люди, вы можете определить, нужно ли вам переместить какое-либо изображение, сделать правильный образ действий более понятным и легким для поиска, а также узнать, насколько сбиты с толку ваши посетители.

Есть еще кое-что.

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

Это нормально. Прокрутите вниз до большой коллекции ссылок Khan Academy на определенные фрагменты контента, которые есть на их домашней странице, и все начнет выглядеть примерно так:

Опять же, это нормально.Что вы можете сделать, так это сравнить впечатления, которые вы получаете с этим отчетом Scroll Map со списком.

Это показывает, сколько людей нажимали на каждую ссылку в виде таблицы сырых чисел, а не пропорционально количеству посетителей.

Длинный хвост кликов по ссылкам в представлении списка очень хорошо согласуется с длинным хвостом внимания, который мы видели в отчете Scroll Map. Немногие прокручивают так далеко, но из тех, кто это делает, многие щелкают по одной из этих ссылок. Это говорит о том, что ссылки, вероятно, находятся в нужном месте и их стоит сохранить.

Тепловую карту

и карту прокрутки можно использовать вместе, чтобы получить более четкое представление о поведении посетителей.

Например, вот страница «Участие» в Khan Academy в отчете «Тепловая карта»:

Вы можете видеть, что большая часть внимания направлена ​​туда, куда они хотят: на призыв к действию повторяющегося пожертвования в правой части страницы.

Но у этой страницы две цели. Другой — побудить людей зарегистрироваться и стать переводчиками.

И когда мы переместим страницу на карту прокрутки, мы увидим, почему не так много людей нажимают на эту ссылку:

Только половина посетителей сайта прокручивают так далеко вниз. Переместить CTA ? Отдать ему отдельную страницу?

Или текст недостаточно убедителен, чтобы люди читали? Проверьте изменения цвета, чтобы увидеть.

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

Используя карту прокрутки, чтобы увидеть, где падает внимание, и тепловую карту, чтобы увидеть, где меняются действия, вы можете не только построить картину того, что люди делают, но и почему они это делают.Это дает вам знания, необходимые для принятия решений, ведущих к конверсиям и росту.

Вы можете посмотреть полное видео прохождение стратегии «Тепловая карта» Академии Хана здесь:

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

Тепловые карты: начало работы

Тепловые карты относительно просты в настройке. Настройка тепловой карты Crazy Egg занимает буквально пару минут. После настройки возвращаться к своим отчетам также очень просто.

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

Шаг 1. Зарегистрируйтесь

1. Создайте учетную запись CrazyEgg

Перейдите на https://www.crazyegg.com/ и подпишитесь на пробную версию. Вы получаете 30 дней бесплатно, поэтому вы можете запускать тепловые карты на своем сайте, а также записи сеансов пользователей и даже A / B-тесты.

Вам будет предложено выбрать тарифный план. На этом процесс регистрации завершен.

Шаг 2. Настройка снимка

Перейдите на страницу «Новый снимок» на панели инструментов и настройте новый отчет.

Перетащите URL страницы, которую вы хотите протестировать, в поле URL. (Убедитесь, что код отслеживания находится на этой странице!) Назовите снимок как угодно, что имеет для вас смысл.

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

Затем определите, как долго вы хотите запускать отчет:

Вы можете закончить через установленное время или после установленного количества трафика. По умолчанию 60 дней или 25 000 посетителей, но вы можете войти и изменить его, если у вас низкий трафик или вы думаете, что можете узнать то, что вам нужно знать, с меньшим количеством посетителей.

Когда ваш снимок будет запущен, вы сможете увидеть его на своей панели управления.

7 Примеры использования тепловой карты

Вот семь примеров визуализации данных о том, как люди эффективно использовали тепловые карты Crazy Egg:

1. Softmedia повышает конверсию на 51 процент

Компания Softmedia, провайдер программного обеспечения для аукционов

Penny, использовала тепловые карты для выявления проблемных областей на своем веб-сайте.

Они успешно определили отвлекающие факторы, которые мешали посетителям выполнить желаемое действие.После их удаления конверсия увеличилась на 51 процент.

Левая пара изображений тепловой карты показывает, что кнопка «Не нажимать здесь» отвлекала посетителей от нажатия кнопки «запросить цитату».

Правая пара изображений показывает клики посетителей на странице контактов, где демонстрация видео отвлекала посетителей от связи с Softmedia.

Удаление обоих улучшенных преобразований для каждой страницы.

2. Эксперты по коэффициенту конверсии увеличивают количество подписок на 25.9 процентов

CRO-агентство по коэффициенту конверсии. Эксперты хотели улучшить подписку на определенной странице.

Несмотря на то, что он работал надлежащим образом, данные тепловой карты показали, что некоторые посетители были отвлечены контентом боковой панели и, следовательно, никогда не заполняли поле согласия.

A / B-тест показал, что новая страница без боковой панели привела к увеличению числа подписок на 25,9%.

Посмотрите, как профессионалы используют Crazy Egg!

3. WPMU Dev устраняет проблемы с дизайном страницы продукта

WPMU Dev использовал отчет Confetti Crazy Egg, чтобы увидеть, как посетители, особенно новые посетители, взаимодействуют с контентом на своей странице продукта CoursePress.

Они определили части меню навигации, которые посетители игнорировали, а также несколько отличных видеороликов, которые никто никогда не смотрел. Эта информация была введена в запланированный редизайн страницы продукта.

Можете угадать, что не так с этой картинкой? Ага! Слишком много призывов к действию и элементов, на которые могут нажать посетители. На самом деле они обнаружили, что никто не нажимал (и не просматривал) то, что они хотели, чтобы посетители увидели.

4. Система локальной видимости улучшает локальное SEO

Консультант по поисковой оптимизации для малого бизнеса Local Visibility System (LVS) создал настраиваемый URL-адрес для Google Places (теперь Google My Business) и отслеживал посетителей по этому URL-адресу с помощью Crazy Egg.

Полученный отчет Confetti показывает, куда уходят местные посетители после перехода на сайт, что позволяет им увидеть, какие страницы требуют дополнительной оптимизации.

(Есть также полезная информация об использовании Crazy Egg с картами, маршрутами и обзорами, которые являются частью местного SEO.)

Иногда сумасшедшие тепловые карты могут показаться пугающими. «Они везде щелкают!»

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

5. Pagely Проверяет конструктивные недостатки

Хостинговая платформа

WordPress Pagely использовала карту прокрутки Crazy Egg, чтобы определить, на какие части их страницы люди обращали внимание.

Компания обнаружила, что менее 25 процентов их посетителей просматривали более 600 пикселей, что означало, что большая часть страницы была потрачена впустую.

Эта информация наводит на мысль, что Pagely следует переосмыслить макет, чтобы посетители могли видеть наиболее важную информацию в верхней части страницы.

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

Знание того, сколько просмотров страниц превратилось в клики и сколько кликов фактически превратилось в подписки, является чрезвычайно ценной информацией. Объедините эти знания с вашими A / B-тестами и посмотрите, какой вариант не только получает больше кликов, но и подписок.

6. SugarRae регулирует микс содержимого

SEO-блогер SugarRae использовал тепловые карты Crazy Egg, чтобы определить, какой контент больше всего понравился посетителям.

Она определила три навигационных метки, которые получили наибольшее количество кликов, и использовала эту информацию, чтобы решить, какой контент она создаст больше в будущем.

Она обнаружила, что посетители пытались нажимать на изображения, не вызывающие кликов, а также выяснила, какие объявления работают лучше всего, чтобы она могла оптимизировать сочетание для увеличения количества кликов и дохода.

Режим наложения позволил ей сегментировать клики посетителей по таким свойствам, как источник перехода.

7. Ювелирный бутик Harry Fay устраняет утечку прибыли

Ювелирный бутик Harry Fay определил несколько областей, которые отталкивали посетителей и влияли на прибыль, в том числе

  • уведомлений об отказе файлов cookie
  • Потеря посетителей социальных страниц
  • оставшихся без ответа вопросов клиентов в процессе заказа

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

Scroll Maps позволяет быстро узнать, смотрят ли люди даже на контент, которым вы больше всего гордитесь. В этом примере, сравнивая карты прокрутки до (слева) и после (справа), изображения показывают, что сейчас гораздо больший процент людей просматривает продвигаемый контент.

Как использовать инструмент «Тепловая карта Crazy Egg»: пример

Вот пример того, как кто-то — на самом деле Crazy Egg — использует этот инструмент для решения проблем на главной странице своего клиента. Работая над собственным веб-сайтом Нила Пателя, цель заключалась в увеличении конверсии на 100 процентов.

В итоге команде удалось увеличить конверсию более чем на 400 процентов, согласно данным инструмента Crazy Egg.

Началась работа над домашней страницей Нила:

Взгляните на источник, и вы увидите, что это длинная страница. В этом нет ничего плохого, но эта страница не конвертировалась. Первоначальные карты прокрутки показали, что только около 50% аудитории читали намного больше половины страницы, а относительно немногие посетители вообще видели нижнюю часть.

Между тем тепловая карта показала, что многие посетители действительно нажимали на имя Нила в верхней части страницы или на логотипы клиентов, в то время как сравнительно немногие нажимали на призыв к действию.

Многие люди нажимали на места, на которые нельзя было кликнуть — знакомая история.

Кроме того, возможность щелкнуть мышью, чтобы перейти к тематическим исследованиям, приводила к обрыву: больше людей просматривали тематические исследования, чем подписывались!

Глядя на отчет Confetti, было легко увидеть, что 49% трафика, приходящего на страницу, поступало из QuickSprout, личного блога Нила Пателя, а это означает, что посетители, вероятно, уже знали, кто он такой.

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

Может быть, они могли бы пойти более минималистично?

Новая страница была максимально простой: заголовок, две строки текста и форма с одним полем.

Вместо того, чтобы заставлять людей заполнять форму сразу, посетители теперь вводят URL своего веб-сайта и анализируют его, а затем добавляют свои данные позже.

(Звучит знакомо? Должно быть — это то, что предлагает домашняя страница Crazy Egg, а также множество других.)

«Когда люди обнаруживают ошибки на их сайтах, они с большей вероятностью захотят подписаться на нас», — говорит Майк.

Внизу новой домашней страницы вы можете увидеть две опции: Консультации и Отзывы. Консультационная страница теперь похожа на исходную домашнюю страницу и содержит много одинаковых копий:

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

Разница в производительности между двумя страницами огромна. На первой странице было всего 2,1% конверсий.

На новой странице 26% посетителей заполнили первую форму.

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

Используя вместе различные типы тепловых карт, Crazy Egg удалось добиться значительного увеличения конверсии.

Очевидно, что ни один инструмент тепловой карты или какой-либо другой инструмент не обладает встроенным творчеством и не избавляет от необходимости в отличном дизайне, копировании и поисковой оптимизации.

Но он позволяет вам увидеть, что на самом деле происходит, и изменить способ построения вашего сайта, чтобы отразить это.

Заключение

Тепловая карта — это основа любой стратегии CRO (оптимизации коэффициента конверсии). Это также очень недооцененный инструмент из-за того, насколько он мощный.

Тепловые карты дают вам четкое представление о том, что посетители действительно делают на вашем сайте.Вы можете быстро и легко узнать, видит ли кто-нибудь вашу копию и нажимают ли люди на ваш призыв к действию или на изображения и слова.

Вы также можете видеть, откуда приходят ваши посетители, следить за коэффициентом конверсии просмотров страниц в клики и многое другое.

Вместо того, чтобы делать выводы о происходящем на основе таких цифр, как показатель отказов и время, проведенное на странице, или отслеживать достигнутые конверсии в GA, тепловые карты помогают создать более сложную картину, зная, какие элементы нажимаются, а какие игнорируются.

Мы увидели, как тепловые карты можно использовать для понимания поведения конверсии и оптимизации воронки продаж.

Использование простой тепловой карты позволяет увидеть, нажимают ли посетители ваши элементы конверсии, а если нет, то на что они нажимают вместо этого.

Это почти всегда что-то неожиданное.

И это позволяет вам ответить на вопрос, на который не может ответить никакая статистика отказов: почему люди уходят с вашего сайта?

Основываясь на этом понимании реального, а не воображаемого поведения пользователя, можно придумать лучший дизайн и скопировать и добиться гораздо более высоких конверсий.

Data from Confetti и Scroll Maps позволяют более детально определять поведение пользователя, сохраняя при этом такой же интуитивный анализ тепловых карт, как просмотр экрана.

Перекрестные ссылки Overlay, List Reports и User Session Recordings позволяют вам видеть, на что направлено внимание и кто именно куда щелкает.

Сегментирование трафика по активности и источнику и понимание его с точки зрения количества посетителей, которые фактически просмотрели эту часть страницы, может спасти вас от «неправильной оптимизации» неправильных частей страницы.Это также может сделать вашу контентную игру сильной!

Трудно превзойти этот простой и универсальный инструмент для оптимизации страниц или целых веб-сайтов.

Как можно использовать тепловые карты в своих интересах? Начните использовать бесплатную пробную версию Crazy Egg , чтобы узнать, где вы можете улучшить конверсию своего сайта!

бесплатных тепловых карт веб-сайтов | Smartlook

Зачем использовать тепловые карты?

Тепловые карты — мощный инструмент по нескольким причинам. Это наглядный способ увидеть агрегированные данные, которые расскажут вам о том, что работает, а что нет.Вы видите, куда люди нажимают. Вы видите, куда они перемещают мышь. И вы видите, как далеко они прокручивают страницу.

Интересно посмотреть, как игнорируются важная кнопка или целые разделы вашей страницы. Тепловые карты помогают выявлять проблемы дизайна. Они помогают вам улучшить ваш сайт.

Они также полезны для убеждения заинтересованных сторон принять изменения на веб-сайте. Визуальный характер тепловых карт позволяет легко понять их всем, и именно это отличает их от пользовательских записей.И от сложного экспорта Google Analytics.

Типы тепловых карт в Smartlook

Тепловая карта кликов
На этой тепловой карте показано, где люди нажимают. Иногда результаты могут сильно отличаться от ожидаемых. Вы можете увидеть, как люди нажимают на множество элементов, на которые нельзя нажать. Как значок бесплатной доставки. Это говорит о том, что люди хотят знать, есть ли у вашего предложения о бесплатной доставке какой-то подвох.

В других случаях вы можете увидеть, как люди нажимают на ссылки в меню чаще, чем на ваш основной призыв к действию.Может, он недостаточно большой или достаточно контрастный? Или, может быть, текста на нем недостаточно? Тепловые карты в Smartlook — это источники гипотез о том, что можно изменить для повышения производительности вашего веб-сайта.

Перемещение тепловой карты
Карты перемещения показывают, куда люди перемещают указатель мыши. Это может указывать на сомнения. Иногда люди наводят курсор на элементы, которые могут сбивать с толку. Как неуклюжая строка текста.

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

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

Карты прокрутки в Smartlook помогут вам избавиться от лишних хлопот и реорганизовать страницы так, чтобы ни один важный элемент не оставался незамеченным.И да… Мы уже слышим вопрос. Как должна выглядеть карта прокрутки для хорошо продуманной страницы?

Это зависит от обстоятельств. Это зависит от того, что должна делать страница. Домашняя страница, выступающая в качестве концентратора, может иметь резкое сокращение прокрутки, когда люди находят то, что им нужно.

Когда у вас есть короткая целевая страница, которая должна побуждать людей к действию, большую часть ее обычно следует увидеть.

Страница результатов поиска? Это другая история. Когда люди видят большую часть страницы поиска, возможно, она неправильно спроектирована.Просто потому, что это не помогает людям быстро находить то, что они ищут. Поэтому часто бывает желательно быстрое переключение на такую ​​страницу.

Что делает Smartlook отличным инструментом для создания тепловых карт?

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

Различные типы посетителей на тепловых картах
Выберите между всеми, новыми и вернувшимися посетителями и посмотрите, как их поведение отличается.Вернувшиеся чаще нажимают на определенные элементы?

Скачивание и обмен тепловыми картами
Используйте тепловые карты в презентациях и отправляйте общедоступные ссылки своим товарищам по команде или клиентам. Тепловые карты понятны каждому.

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

Все о тепловых картах. Всеобъемлющее руководство | Шрашти Сингхал

i. vmin & vmax

Параметры vmin и vmax используются для изменения пределов цветовой карты, которые регулируют нижнюю и верхнюю границы контрастности. Все, что ниже vmin, и все, что выше vmax, будет одного цвета соответственно.

vmin и vmax установлены так, чтобы лежать вне диапазона данных для размытого вида.

 sns.heatmap (data.corr (), vmin = -0.2, vmax = 0.2) 
Настройка с использованием vmin и vmax (Изображение автора)

ii. Cmap

Значения cmap устанавливаются для изменения значения цветовой карты по умолчанию.

 sns.heatmap (data.corr (), cmap = ”coolwarm”) 
Настройка с использованием лагеря (Изображение автора)

iii. центр

Данные центрируются на «0» на цветовой карте по умолчанию. Центр можно изменить, установив для параметра «центр» цветовой карты определенное значение.

 sns.heatmap (data.corr (), cmap = ”coolwarm”, center = 0.6) 
Настройка с использованием центра (Изображение автора)

iv. Robust

Robust удаляет vmin или vmax с помощью sns.Heatmap () надежный параметр. «Надежный» работает как «автоконтраст» для выбора хороших значений путем фиксации уровней контрастности на основе квартилей.

 sns.heatmap (data.corr (), cmap = ”coolwarm”, robust = True) 
Настройка с использованием robust (Изображение автора)

v. Annot

Параметр Annot заполняет ячейки относительными коэффициент корреляции от -1 до 1.

 sns.heatmap (data.corr (), cmap = ”coolwarm”, annot = True) 
Настройка с использованием аннотации (Изображение автора)

vi. Fmt

«Аннотация» только добавляет числовое значение в ячейку тепловой карты Python, но параметр «fmt» позволяет нам изменять формат этих аннотаций и значительно добавлять строковые (текстовые) значения. Для строковых значений «аннотация» должна содержать массив строк, а «fmt» должна быть «s».

Экспериментальная нотация по умолчанию — 2g. Fmt принимает следующие значения:

 s - строка 
f, F - фиксированная точка
g, G - общий формат
e, E - формат экспоненты

Аннотации с числовым значением:

 sns.heatmap (data.corr (), cmap = 'coolwarm', annot = True, fmt = ”. 3f”) 
Настройка с использованием числовых значений fmt- (Изображение автора)
 data2 = (data.corr ()). round (3) 
corrA = np.squeeze (np.asarray (data2))
print (corrA)
rows, cols = (12, 12)
arr_annot = [[(str (corrA [j] [i]) + ' _ '+ str (j) +' _ '+ str (i)) для i в диапазоне (столбцы)] для j в диапазоне (строк)]
sns.heatmap (data.corr (), cmap =' coolwarm ', annot = arr_annot, fmt = ”s”)
Настройка с использованием значений строки fmt (Изображение автора)

vii. annot_kws

Иногда параметра annot и fmt недостаточно для создания значимой и стильной тепловой карты. Для форматирования аннотаций ячеек, таких как размер шрифта, цвет шрифта, ориентация шрифта и т. Д., Может выполняться annot_kws. «Annot_kws» означает аргументы ключевого слова аннотации, которые помогают изменить стиль и форматирование текста аннотации.

«annot_kws» принимает все аргументы «ax.text» или «matplotlib.text». Для передачи annot_kws значение аннотации должно быть True.⁷

 · annot_kws: значения как словарь ключа, сопоставления значений, необязательно 
· fontsize: размер шрифта
· fontstyle: стиль шрифта, такой как курсив, наклонный и нормальный
· fontfamily: семейство шрифтов, подобных serif, cursive
· цвет: цвет шрифта
· альфа: прозрачность текста
· вращение: поворот текста
· вертикальное выравнивание: вертикальное выравнивание (центр, верх, низ, базовая линия, center_baseline)
· цвет фона: Цвет фона текстов.heatmap (data.corr (), cmap = "coolwarm", annot = True, annot_kws = {'fontsize': 12, 'fontstyle': 'italic', 'color': "b", 'alpha': 0.6, ' Rotation ': ”vertical”,' verticalalignment ':' center ',' backgroundcolor ':' w '})
Настройка с помощью annot_kws (Изображение автора)

viii. Ширина линии

Увеличьте или уменьшите ширину линии между каждой ячейкой с помощью параметра «ширина линии».

 sns.heatmap (data.corr (), cmap = ”coolwarm”, linewidth = 0.5) 
Настройка с использованием ширины линии (Изображение автора)

ix. Цвет линии

Иногда параметр «ширина линии» не может разделить ячейку тепловой карты из-за сложности цвета. Параметр «цвет линии» дает возможность выбрать любой цвет для линии тепловой карты. Параметр «ширина линии» является обязательным для установки «цвета линии». Список цветов см. В следующем документе.

 sns.heatmap (data.corr (), cmap = ”coolwarm”, linewidth = 0.5, linecolor = ’g’) 
Настройка с использованием цвета линии (Изображение автора)

x. CBAR

Легенда или «cbar» видна по умолчанию. Без ключа это не имеет большого смысла в тепловой карте. Тем не менее, если ключ не нужен, для параметра cbar установлено значение False.

 sns.heatmap (data.corr (), cmap = ”coolwarm”, cbar = False) 
Настройка с помощью cbar (Изображение автора )

xi. Cbar_kws

Параметр аргументов ключевого слова цветной полосы (cbar_kws) может принимать несколько аргументов ключевого слова в качестве словаря. «Cbar_kws» принимает все параметры цветовой полосы matplotlib.⁷

 · ориентация: направление цветовой полосы, «горизонтальное» или «вертикальное». 
· сжатие: размер цветной полосы.
· удлинение: удлинение, используемое для сужения цветовой полосы. Значения могут быть «оба», «минимальное», «максимальное» и «ни одно» в зависимости от требований.
· extendfrac: «extendfrac» используется для регулировки расширения цветовой полосы. Значение «False» при отсутствии указателя, значение «auto» регулирует указатель автоматически, а значение с плавающей запятой позволяет настроить указатель цветовой полосы вручную.
· ticks: Параметр «ticks» используется для изменения отметок цветовой полосы; значение может быть списком или множественным массивом тактов.
· drawedges: для краев на цветной полосе.Значение логическое. 'True' для краев, 'False' без краев. Sns.heatmap (data.corr (), cmap = "coolwarm", cbar_kws = {"label": "шкала качества вина", "ориентация": "горизонтальная", «Shrink»: 1, «extend»: «both», «extendfrac»: 0,1, «ticks»: np.arange (0,3), «drawedges»: True})
Настройка с использованием cbar_kws (Изображение автора)

xii. ax и cbar_ax

ax и cbar_ax используются для построения тепловой карты и cbar на отдельных осях.

 f, (ax, cbar_ax) = plt.subplots (1,2, figsize = (15,12), gridspec_kw = {«wspace»: 0.05, «width_ratios» :( 0.8,0.1)}) 
ax = sns.heatmap (data.corr (), cmap = 'coolwarm', ax = ax, cbar_ax = cbar_ax)
Настройка с использованием ax и cbar_ax (Изображение от Автор)

‘ax’ также используется для установки различных функций уровня осей, таких как заголовок, метка x, метка y и т. Д.

 f, (ax, cbar_ax) = plt.subplots (1,2, figsize = (15 , 12), gridspec_kw = {«wspace»: 0,05, «width_ratios» :( 0,8,0.1)}) 
sns.heatmap (data.corr (), cmap = 'coolwarm', ax = ax, cbar_ax = cbar_ax)
ax.set (title = «Карта качества вина»,
xlabel = «Строки характеристик»,
ylabel = «Столбцы характеристик»)
Настройка с использованием ax для реализации функций уровня осей (Изображение автора)

xiii. Квадрат

Параметр «квадрат» используется для формирования ячеек тепловой карты в виде квадратов. «Квадрат» заставляет пропорции блоков быть одинаковыми.

 sns.heatmap (data.corr (), cmap = ”coolwarm”, square = True) 
Настройка с использованием квадрата (Изображение автора)

xiv. xticklabel & yticklabel

Для установки меток на оси X и Y используются параметры «xticklabel» и «yticklabel».

 xticklabel: для размещения тегов на оси X тепловой карты.«Xticklabels» - необязательный параметр, который принимает аргументы как «auto», bool, list-like, numpy array или int.  False: , чтобы скрыть метки  Array / list / int : для установки значений, отличных от defaultsns.heatmap (data.corr (), cmap = ”coolwarm”, xticklabels = np.arange (0,12)) 
Настройка с помощью xticklabel & yticklabel (Изображение автора)

Вращение меток метки возможно с помощью параметра «ротация».

Чтобы повернуть метки по умолчанию, для получения меток по умолчанию используется «get_yticklabels ()» или «get_xticklabels ()», затем для поворота устанавливается значение угла.

 HM = sns.heatmap (data.corr (), cmap = ”coolwarm”) HM.set_yticklabels (HM.get_yticklabels (), вращение = 40) 
Настройка с использованием вращения с помощью xticklabel & yticklabel (Изображение автора)

XV. маска

Всю тепловую карту можно разделить на два треугольника: верхний и нижний. Оба треугольника предоставляют только полный набор информации. Поэтому строить полную тепловую карту излишне. Желательно построить любой из треугольников.

Чтобы замаскировать верхний треугольник, «triu», используется метод numPy. Чтобы скрыть нижний треугольник «tril», используется метод numPy.

 sns.heatmap (data.corr (), cmap = ”coolwarm”, mask = np.triu (data.corr ())) 
Heatmap путем маскировки верхнего треугольника (Изображение автора)

Чтобы скрыть определенные значения, Условие скрытия желаемых значений передается в параметре «маска». Здесь мы маскируем каждую альтернативную строку, начиная со строки 1, и каждый альтернативный столбец, начиная с столбца 0.

 mask = np.нули (data.corr (). shape) mask [1 :: 2,0 :: 2] = 1sns.heatmap (data.corr (), annot = True, cmap = ”coolwarm”, mask = mask) 
Настройка с использованием двоичная маска (Изображение автора)

Маскирование отрицательно коррелированных данных
 data1 = (data.corr ()). round (3) corrA = np.squeeze (np.asarray (data1)) mask = np. нули (data.corr (). shape) для i в диапазоне (12): для j в диапазоне (12): если corrA [i] [j] <0: маска [i] [j] = 1plt.figure (figsize = (15,12)) sns.heatmap (data.corr (), annot = True, cmap = ”coolwarm”, mask = mask) 
Настройка с использованием условной маски (Изображение автора)

xvi.

Kwargs принимает словарь в качестве аргумента.

 kwargs = {'alpha':. 9, 'linewidth': 3, 'linestyle': '-', 'linecolor': 'k', 'rasterized': False, 'edgecolor': 'w', «capstyle». ”: 'Projecting',} sns.heatmap (data.corr (), cmap =” coolwarm ”, ** kwargs) 
Настройка с использованием kwargs (Изображение автора)

xvii. Управление эстетикой всей тепловой карты с помощью set_theme

seaborn.set_theme ( context = 'notebook' , style = 'darkgrid' , palette = 'deep' , font = 'sans-serif' , font_scale = 1 , color_codes = True , rc = None ) ¹²

Seaborn figure Style

Интерфейс set_style () может использоваться для управления стилями. Помогает задать тематику сюжета. Доступно пять тем:

  • Darkgrid
  • Whitegrid
  • Dark
  • White
  • Ticks

Темой по умолчанию является darkgrid.

Удаление стержня осей

Верхние и правые стержни оси могут быть удалены с помощью функции despine () в темах белый и галочки.

Масштабирование элементов графика

Масштабом тепловой карты можно управлять с помощью функции set_context () или set_theme (). В зависимости от относительного размера существует четыре предустановленных шаблона для контекстов:

По умолчанию контекстом является записная книжка.

Размер шрифта всех компонентов Seaborn

Размер шрифта всех компонентов Seaborn можно изменить с помощью атрибута «font_scale» Seaborn.По умолчанию установлен масштаб «1».

 sns.set_theme (context = 'paper', style = 'ticks', font_scale = 2) sns.heatmap (data.corr ()) sns.despine () 
Настройка с помощью set_theme () и despine () (Изображение автора Автор)

xviii. Подзаголовки тепловых карт Seaborn: создание нескольких тепловых карт

Несколько тепловых карт можно создать с помощью функции matplotlib plt.subplot ().

 plt.subplot (1,3,1) 
sns.heatmap (data.corr (), cbar = False, linecolor = ”w”, linewidths = 1) plt.subplot (1,3,2)
sns.heatmap (data = data [['качество', 'алкоголь']]. corr (), cmap = 'inferno') plt.subplot (1,3,3)
sns .heatmap (data.corr (), cmap = ”coolwarm”, mask = np.tril (data.corr ()), cbar = False)
Несколько тепловых карт по subplot () (Изображение автора)

Завершить

 sns .set_theme (context = 'paper', style = 'ticks', font_scale = 2) f, (ax, cbar_ax) = plt.subplots (1,2, figsize = (15,12), gridspec_kw = {«wspace»: 0,05, «width_ratios» :( 0,8,0.05)}) mask = np.triu (data.corr ()) annot_kws = {'fontsize': 14, 'fontstyle': 'italic', 'fontweight': 'bold', «цвет»: «k», «альфа»: 0.6, «вращение»: нет, «вертикальное выравнивание»: «центр», «цвет фона»: «нет»} cbar_kws = {«метка»: «шкала цвета качества вина», «ориентация»: «вертикаль», «сжатие»: 1 , 'extend': 'max', 'ticks': [- 0,8, -0,5,0, 0,5], 'extendfrac': 0,1, «drawedges»: True} sns.			

Добавить комментарий

Ваш адрес email не будет опубликован.