Как сделать тепловую карту сайта
Тепловая карта сайта: что это такое и как пользоваться
Тепловая карта сайта – это инструмент, использующий цветовую палитру, для определения и отражения статистики на веб-ресурсе при помощи кликов, который оценивает эффективность сайта или какой-либо его части.
Если говорить простыми словами, то тепловая карта – это пятна на экране, которые показывают какие элементы привлекают пользователей больше всего. По-другому ее еще называют картой кликов.
Цветные пятна колеблются от теплых до холодных оттенков, где теплые оттенки – это наиболее привлекательные элементы, а холодные – менее привлекательные. Исходя из этого, можно сказать, что тепловая карта помогает и в анализе поведенческих факторов (ссылка, когда появится статья), которые влияют на продвижение ресурса.
Особенности тепловой карты
Для начала поговорим об особенностях тепловой карты, а точнее ее преимуществах. Это поможет владельцам сайтов понять, что она является неоценимым инструментом в анализе их веб-ресурса.
Преимущества тепловой карты:
Получается, что тепловая карта дает эффективный результат в сфере анализа об интересах пользователей. В свою очередь, полученные сведения при разумном использовании помогают делать продвижение сайта в нескольких регионах результативным.
Виды тепловой карты
Следующим, о чем мы поговорим, будут виды тепловой карты. Их существует три. Это тепловая карта ссылок, конфетти и скролл-карта. Давайте остановимся подробнее на каждой из них.
И так, тепловая карта ссылок отражает ярким оттенком те ссылки, по которым пользователи больше всего кликали. Менее востребованные ссылки обозначаются при помощи градиента. Это поможет поставить на самые кликабельные места важные элементы.
Следующий вид – это конфетти или по-другому тепловая карта кликов. Она чем-то похожа на предыдущий вид, только показывает все области, по которым пользователи кликали. Данный вид помогает в оценке поведенческих факторов.
И последний – это скролл-карта. При помощи данного вида можно оценить прокрутку страницы веб-ресурса. Яркий оттенок покажет места, где пользователи задержались на длительное время. Бледный отметит те места, которые просмотрели вскользь. Также помогает изучать поведенческие факторы.
Когда использовать тепловую карту?
«Когда использовать тепловую карту?» следующий вопрос. Она станет хорошим помощником для тех, кто занимается интернет-маркетингом, контент-маркетингом. Также тем, кому интересны данные об активности аудитории на веб-ресурсе.
Тепловую карту сайта можно использовать в нескольких случаях. Во-первых, когда вы проводите редизайн веб-ресурса. Так, вы изменили дизайн своего сайта, но он пока работает не настолько хорошо, как старый. В этом и помогает тепловая карта. Анализируя активность аудитории на каждой стадии преобразования, можно понять что оставить, а что нужно изменить.
Во-вторых, при проведении А/В-тестирования, когда нужно понять какой из похожих групп элементов принесет наибольшую конверсию сайта. Например, вам требуется узнать какой лендинг выбрать, где разместить СТА-кнопку (кнопка, которую пользователь должен нажать) или различные элементы на странице.
В-третьих, при анализе наиболее приемлемой длины контента и определении места для СТА-кнопок. Этот случай можно отнести к контент-маркетингу.
Создание тепловых карт
Важной темой нашей статьи станет создание тепловых карт, а именно какие сервисы для этого используются. Среди них можно выделить пятерку лучших.
Открывает его бесплатный сервис Яндекс. Метрика. Ранее мы уже писали о том, что это такое Яндекс Метрика простыми словами и зачем нужна данная система веб-аналитики. У нее много различных инструментов. Среди них есть и тот, который отвечает за создание тепловой карты. Владельцу сайта достаточно поставить скрипт на свой веб-ресурс.
Сервис Heat-Map.co также станет хорошим помощником в создании тепловой карты сайта. Составление такой карты основывается на алгоритмах сервиса, а не аналитике кликов. К тому же Heat-Map.co не требуется подключение к веб-ресурсу. Существует бесплатный тариф.
Еще одним сервисом является CrazyEgg. Как и у Яндекс. Метрики устанавливается скрипт для работы. Есть только одно но. Бесплатный период у сервиса – 30 дней. Потом придется платить за его использование каждый месяц. По похожему сценарию работает и HotJar, только у него бесплатный тариф идет по количеству просмотров в месяц. Их может быть не более 2000.
А вот сервис MouseFlow полностью платный. Он позволяет получить сведения по всем страницам веб-ресурса. К тому же интерфейс удобен и понятен. Для работы также используется скрипт.
Работа тепловой карты
Теперь поговорим о работе тепловой карты: как происходит сбор данных со страниц веб-ресурсов. Для начала сервис производит статистический срез страницы URL, которую выбрали для изучения. После при помощи JavaScript сайта информация о загруженной странице HTML передается сервису, который был выбран для создания тепловой карты.
Затем выбранный вами сервис разрабатывает карту страницы, в которой отражаются все элементы для взаимодействия. И только после этого запускается сбор данных об активных действиях посетителей на странице. Каждая его активность вносится на тепловую карту.
В завершении хотелось бы сказать, что тепловая карта сайта – это мощный рычаг в любом способе продвижении веб-ресурса: будь-то продвижение сайтов по ключевым словам, трафиковое продвижение или SEO-продвижение.
Также тепловая карта помогает улучшить дизайн сайта и его удобство для пользователей. Кроме того, это хороший инструмент для сбора статистических данных для того, чтобы узнать об интересах аудитории. В свою очередь, это помогает в улучшении поведенческих факторов ранжирования веб-ресурса.
Тепловая карта Метрики
9 ноября 2017 Опубликовано в разделах: Азбука терминов. 7286
Этим общим термином принято называть все карты сервиса: кликов, ссылок, скроллинга. Часто сюда же относят записи посещений Вебвизора, хотя у них есть различия в содержании данных, которые отправляют в систему и методах сбора аналитики.
Чтобы параметры попадали в счетчик, необходимо предварительно отметить это галочкой в разделе «Настройки».
Что же такое карты Метрики
Помимо сбора числовой статистической информации в Яндекс Метрике есть набор инструментов для отслеживания поведения посетителей веб-сайта, интенсивности, предпочтений.
Рассмотрим возможности каждого подробнее.
Чтобы открыть эти опции для работы, необходимо на основной панели слева выбрать пункт «Карты» и далее нужный подпункт.
Карта кликов
Позволяет подсчитать количество кликов, которые сделали посетители вашего сайта.
Статистика собирается по всем кликабельным элементам. Это могут быть ссылки, кнопки, изображения, иконки соцсетей и т.д.
Зоны выделены разными оттенками. Цвета зависят от частоты: чем теплее цвет (ближе к красному), тем частота выше.
Как пользоваться тепловой картой?
Для начала нужно настроить параметры для анализа:
Варианты:
При работе с этим отчетом рекомендуем в опциях выставить бегунком минимальное значение «Прозрачность», это позволит увеличить контрастность цветам, определяющим интенсивность кликов.
Можно потестировать разные настройки, чтобы определить, какие более удобны и информативны для вас.
Как трактовать числовое значение:
Инструмент позволяет не просто оценить активность в рамках одной страницы. Можно настроить и выгрузить статистику по группе URL, например по конкретному разделу каталога товаров.
Изучение тепловой карты кликов веб-страниц вашего ресурса позволяет вам посмотреть на них глазами посетителей, сделать соответствующие выводы для донастройки юзабилити сайта. На ней четко видно, на какие ссылки и элементы интерфейса люди кликали чаще всего, на какие некликабельные элементы хотелось нажать. Впоследствии есть смысл вставить в них гиперссылки, либо более наглядно обозначить другие точки контакта.
Например, на форме электронной записи на прием наблюдается крайне низкая активность пользователей. На ключевых полях, необходимых для формирования запроса на запись, следов нет совсем.
Какие можно сделать выводы:
С чем могут быть связаны проблемы:
В этом случае можно посмотреть отчет по отправке форм. Если процент заполнения этой формы очень низкий даже на этапе первого поля, значит, причина не техническая.
Также есть смысл оценить, какой процент пользователей заинтересовался страницей онлайн-записи в сравнении со всей аудиторией. Это также даст подсказку о востребованности опции электронной записи.
Карта скроллинга
Помогает оценить, каким частям страниц сайта люди уделяли больше внимания, выводит усредненное время и количество просмотров области, на которую наведен указатель.
На основании этого анализа можно подобрать ту длину страниц, которая максимально удержит внимание большей части аудитории.
Чтобы воспользоваться этим инструментом, в меню выбираем «Карта скроллинга», в правом углу открываем расширенные настройки. Задаем нужный URL (группу), сегментацию аудитории.
Варианты отображения результатов:
Карта ссылок
Позволяет получить статистику количества переходов по всем ссылкам на интернет-ресурсе.
Дополнительные настройки вверху: URL, сегменты ЦА, интервал дат.
Параметр «Точность» позволяет выставить либо значение, при котором подсчет производится быстро с допуском на погрешность. Либо 100%, тогда обработка отчета и пересчет значений потребует времени.
Ссылки подсвечиваются разными цветами в зависимости от их популярности.
На скриншоте видно, что на данной странице пользователей больше всего интересовала информация по адресам магазинов и оплате.
Если кликнуть на любую гиперссылку, откроется окно с двумя графиками и статистикой. Первый график содержит сведения, сколько раз пользователи нажали переход за настроенный в опциях период. Второй иллюстрирует, какой это процент по отношению к другим линкам на той же веб-странице.
Отчет «Аналитика форм»
Это не совсем карты, хотя также дают представление об активности людей при заполнении полей форм обратной связи.
Часто используют, чтобы оценить, насколько удобно и понятно реализована форма. Есть возможность посмотреть, сколько людей дошли до заполнения каждого этапа на вкладке.
Статистика с форм может быть вспомогательной для разностороннего анализа веб-сайта при помощи тепловых карт Яндекс Метрики.
Технические ограничения и настройки
» учитывает данные веб-страниц, адреса которых удовлетворяют указанным условиям, например,
В Яндекс Метрике тепловая карта — это серьезный инструмент, который поможет проработать вопросы дизайна и юзабилити вашего сайта, собрать дополнительную статистику, уточнить портрет посетителя и его предпочтения.
– Только качественный трафик из Яндекса и Google
– Понятная отчетность о работе и о планах работ
– Полная прозрачность работ
Онлайн-сервисы по созданию тепловых карт
Следить за поведением посетителей на своем сайте всегда полезно. Если вы с умом цените полученную информацию, то поймете, какие элементы стоит усилить или совсем убрать, потому что они не получают со стороны посетителей должного внимания, а какие, наоборот, подчеркнуть, дабы усилить и без того высокую их эффективность. Или которые лучше не трогать, чтобы ничего не испортить. Так или иначе, информация бесполезной не будет. Осталось только узнать, какими средствами лучше изучать пользовательскую активность. В этой статье мы разберем, что такое тепловые карты, и где их лучше всего смотреть.
Что такое тепловые карты и для чего они нужны
Пожалуй, лучший способ почувствовать себя в шкуре обычного посетителя сайта – это не прочитать сухи статистические данные о продолжительности визита или количестве просмотренных страниц, а в живую увидеть, какие элементы на странице привлекают больше внимания, на какие чаще кликают, как далеко пролистывают, как по странице перемещается человеческий взгляд. Именно для этого лучше всего и подходят тепловые карты.
Они делятся на три вида:
Надо сказать, что карта движения мыши не обладает максимальной наглядностью, так как чаще всего курсор двигается туда, где человек захочет кликнуть, поэтому куда более достоверную информацию даст карта кликов. Изучив её, вы сможете найти варианты улучшения юзабилити сайта. Например, у вас есть активный элемент, который является ссылкой на внутренний раздел сайта, но тепловая карта говорит, что по нему кликают не часто. Значит, необходимо дать посетителю понять, что на этот элемент можно нажать. Если это текст, то его можно выделить цветом или подчеркнуть; если графический элемент – дать текстовую подсказку, перенести в другое место либо добавить минимальную анимацию. И наоборот, вы можете обнаружить, что посетители могут неправильно понимать предназначение каких-либо элементов дизайна: нажимать на стрелочки или картинки, в ожидании перехода на другую страницу или выпадающего меню. В этом случае можно либо очистить сайт от графического мусора либо наделить его какой-нибудь полезной функцией.
Карта скроллинга особенно полезна на лендингах, где можно оценить, какие блоки не задерживают на себе внимания или не которых у посетителя заканчивается терпение и страницу он закрывает, не дойдя до самой полезной части.
Где посмотреть тепловую карту своего сайта
Сервисов, создающий тепловые карты, можно набрать с пару десятков, но мы вам расскажем только о самых полезных и удобных.
В этом сервисе функционал не ограничивается созданием тепловых карт, но если нас интересуют только они, то SumoMe можно использовать, так как в бесплатной версии тепловые карты представлены в полном объеме. Сервис заработает после установки на сайт скрипта или плагина. Для того, что посмотреть статистику, переходить на внешние страницы не требуется.
Достаточно удобный интерфейс, дающий развернутую статистику по всем страницам сайта. Цена использования составит от 24 долларов в месяц, бесплатный тариф предполагает хранение максим ста сессий.
Использование Hotjar более выгодно в том плане, что он сохраняет до 2000 просмотров в месяц и хранит их в течение трех месяцев. Пятнадцать дней можно использовать бесплатно полный функционал. Понятный и красивый интерфейс.
Для того, чтобы воспользоваться этим сервисом, нужно при регистрации ввести данные своей платежной карты как гарантию того, что вы не будете регистрироваться заново, когда бесплатный период пользования истечет. А в том, что оно вам понравится, можно не сомневаться. Это один из лучший подобных сервисов, так как позволяет проводить сегментацию посетителей и отслеживать поведение различных их групп, в зависимости от источника трафика. Цена платной версии начинается от девяти долларов в месяц.
Наконец, единственный бесплатный и русскоязычный сервис в этом списке, которого всем, скорее всего, будет достаточно. Перейдите в раздел «Карты» и выберите вид отчета, который вас интересует.
Пожалуй, начать исследование тепловых мы рекомендуем именно с Яндекс.Метрики — она предоставляет достаточно информации, она бесплатно и по ней много гайдов на русском языке. Впрочем, пробные версии других сервисов тоже не бесполезны — интересно будет хотя бы сравнить их отчеты.
Тепловая карта — недооцененный инструмент внутренней оптимизации
Как посетители ведут себя на сайте? Какие элементы юзабилити удобны, а какие нет? В какой момент большинство пользователей покидает сайт? Получив ответ на эти вопросы, можно качественно улучшить любой ресурс: увеличить продажи, оптимизировать поведенческие, добиться высоких позиций в выдаче. Стандартные отчеты Яндекс.Метрики и Google Analytics, бесспорно, важны и без них невозможна полноценная веб-аналитика. Но данные о визитах, глубине просмотров, отказах, конверсиях и т.д. — это лишь отдельные показатели, которые упускают из виду то, как пользователи взаимодействуют с сайтом.
Лучше понять поведение посетителей помогают специальные сервисы. Пожалуй, самый недооцененный из них — тепловая карта. Несмотря на то, что в той же Яндекс.Метрике есть несколько разновидностей этого инструмента, его возможностям уделяют незаслуженно мало внимания. Хотя именно тепловые карты лучше других анализаторов способны выявлять уязвимые места в юзабилити и оценивать качество внутренней оптимизации.
Что такое тепловая карта?
Это инструмент, который показывает, в каких зонах сайта сосредотачивается наибольшее внимание посетителей и их основная активность. Данные визуализируются при помощи цветового градиента: теплые тона показывают места, к которым пользователи проявляют наибольший интерес, холодные цвета — места, с наименьшим сосредоточением внимания. Все максимально наглядно и просто. Это отличная возможность посмотреть на сайт глазами пользователей и оценить слабые места в оптимизации.
Тепловая карта наглядно демонстрирует, какие зоны сайта, разделы и формы представляют наибольший интерес для пользователей.
Данные, полученные с помощью тепловых карт — ключ к улучшению продающей способности сайта, снижению количества отказов, увеличению длительности пользовательских сессий. Другими словами, такая аналитика способствует точечной оптимизации поведенческих, которые не только прямо влияют на эффективность сайта, но и остаются ключевым фактором ранжирования в SEO.
Разновидности тепловых карт и их возможности
Существует несколько видов тепловых карт. Несмотря на схожую логику работы, каждый тип инструмента имеет свои особенности. Проводя технический аудит сайта, такие карты используют в комплексе: каждую для решения своего круга задач.
Классическая тепловая карта
В общих чертах принцип ее работы мы рассмотрели выше. С помощью цветовой градации сервис отображает, в каких зонах страницы сосредоточено больше внимания и пользовательской активности, а в каких меньше.
Какие сведения дает тепловая карта
Инструмент определяет общую модель поведения посетителей на сайте. Благодаря наглядной визуализации легко выявить недочеты в юзабилити и исправить имеющиеся ошибки. Например, можно обнаружить, что важные формы, разделы и другие элементы сайта расположены в неподходящих местах с низким уровнем пользовательского внимания. Тепловые карты помогают улучшить рекламные активности на сайте. С их помощью делают важные выводы о том, насколько удачно размещен баннер, где он будет собирать больше кликов, а где просто мешать пользователям.
Представленный инструмент — незаменимый помощник во время редизайна сайта. Отслеживание поведения аудитории на каждом из этапов изменений помогает сделать важные выводы о качестве нового дизайна и «на ходу» улучшить его удобство. Это позволяет не только рационализировать финансовые затраты, но и избежать разочарований, когда новый сайт оказывается хуже старого.
Возможности тепловых карт высоко ценят в eCommerce. Отследив поведение покупателей на каждом из этапов воронки продаж, можно выявить недочеты, которые мешают интернет-магазину продавать более эффективно. Например, с помощью карты легко увидеть, как пользователи взаимодействуют с формами, удачно ли размещены СТА-кнопки, насколько эффективны интерфейсы корзины и каковы истинные причины незавершенных покупок.
Карта скроллинга
Инструмент, который при помощи все того же цветового градиента показывает, в каких зонах прокрутки страницы концентрируется внимание большинства посетителей.
Что можно понять с помощью скролл-карты
На первый взгляд назначение этого сервиса вызывает вопросы, поскольку очевидно, что основной процент пользовательского внимания сосредоточен на первой полосе прокрутки. Все самые важные элементы страницы — от СТА-кнопки до призыва к действию — размещают на первом экране. Это прописная истина UX-дизайна.
Тем не менее, карта скроллинга оказывается незаменимым помощником, когда нужно понять ряд важных моментов внутренней оптимизации, например:
На все эти вопросы, от которых напрямую зависят поведенческие факторы, дает ответы карта скроллинга.
Карта кликов
Инструмент отображает активность кликов: на что и как часто нажимают люди на страницах сайта. Это может быть как простая карта кликов, так и более сложная визуализация с цветовой градацией в зависимости от интенсивности кликов, целевых действий, источников переходов и т.д.
Чем может быть полезна карта кликов
Имея визуализацию кликов и зная, какие кнопки самые популярные, можно решить ряд важных задач внутренней оптимизации.
Карта ссылок
Инструмент, отображающий интенсивность переходов по ссылкам на сайте. Линки, собирающие больше кликов, подсвечиваются красным, менее популярные визуализируются холодными цветами: желтым, зеленым, синим.
Чем может быть полезна карта ссылок
Карта ссылок — хороший помощник при создании перелинковки. О том, почему важно связывать страницы сайта внутренними ссылками и как это делать — мы рассказывали здесь. Если предельно кратко, то логика грамотной перелинковки заключается в том, чтобы связать страницы-доноры (с большим весом) и страницы-акцепторы (с меньшим весом). Карта ссылок существенно упрощает этот процесс, поскольку наглядно отображает авторитетность каждой ссылки: красным подсвечиваются потенциальные доноры, зеленым и синим — потенциальные акцепторы.
Также карту кликов можно использовать для точечного улучшения кликабельности. Например, зная какие ссылки больше всего интересуют пользователей, вы можете сделать их еще лучше: увеличить заметность гиперссылки, переместить ее в более выгодное место, улучшить анкорный текст и т.д.
Создание тепловых карт. Обзор сервисов и их функций
Существует немало инструментов для создания тепловых карт. Они отличаются различным функционалом и предназначены для решения определенного круга задач. Далее мы кратко остановимся на наиболее интересных вариантах.
Карты «Яндекс.Метрики»
Самый популярный инструмент для создания тепловых карт. Причин, по которым он стал абсолютным фаворитом — немало. Во-первых — это сервис на русском языке, во-вторых — полностью бесплатный, в-третьих — здесь сразу несколько инструментов для аналитики.
Карта кликов. Может отображать данные одной страницы или агрегировать статистику по группам страниц, например по разделам. Доступно несколько режимов визуализации.
Карта ссылок. Помимо простого подсвечивания популярных и непопулярных гиперссылок система предоставляет данные о количестве кликов по каждому линку и сравнивает долю переходов. Статистика формируется в виде графиков.
Скролл-карта. Алгоритм рассчитывает среднее время и число просмотров определенной зоны прокрутки. Доступна статистика для групп страниц. Есть несколько режимов визуализации.
Аналитика форм — инструмент «Яндекс.Метрики», позволяющий оценить, как пользователи взаимодействуют с формами заказа, блоками обратной связи, полями поиска и пр.
Crazyegg
Популярный англоязычный сервис для создания нескольких видов тепловых карт. Его алгоритм отличается большой точностью, за что высоко ценится разработчиками. Помимо обычной визуализации кликов и скролл-карты в Crazyegg есть уникальный инструмент Confetti. Он позволяет сегментировать клики по различным параметрам.
Инструмент Confetti показывает, как ведут себя пользователи, попавшие на сайт из разных мест: поисковой выдачи, социальных сетей, перешедшие по рекламе и т.д.
Сервис платный. Бесплатно доступен 30-дневный тестовый период. Crazyegg пользуются такие компании как Yahoo и Dell, что красноречиво свидетельствует об авторитетности продукта.
Heat-map.co
Принципиальное отличие этого сервиса — его не нужно подключать к сайту на уровне скриптов. Вы просто вводите адрес интересующей страницы и получаете ее тепловую карту. Это позволяет эффективно использовать инструмент не только для оптимизации собственных проектов, но и для анализа сайтов конкурентов. Доступ к возможностям сервиса — платный.
Zarget
Многофункциональный сервис для оптимизации сайта. С его помощью можно создавать тепловые и скролл-карты, а также генерировать визуализацию кликов за определенный период. Отдельно предусмотрен функционал для А/В тестирования юзабилити. В отличие от большинства аналогов алгоритм Zarget способен отслеживать веб-активность посетителей даже на динамических элементах сайта. Еще одна особенность сервиса — наличие расширения для быстрого проведения аудита прямо из браузера. Установка скрипта и браузерное расширение — платные.
Feng-GUI
Это инструмент не похож на все вышеописанные программы, тем не менее, он хорошо вписывается в логику нашего разговора. Feng-GUI — сервис для улучшения визуальной производительности. Вы загружаете изображение, макет сайта или просто указываете ссылку на страницу, и программный алгоритм анализирует контент на предмет его визуальной эффективности. Искусственный интеллект оценивает, насколько выгодно расположены конверсионные элементы сайта, как грамотно использованы области, привлекающие больше всего внимания и т.д. В отчете графически представлены сильные и слабые стороны вашего дизайна и даны рекомендации по его улучшению.