Как работать с тепловыми картами в маркетинге

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

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

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

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

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

При анализе сайтов и мобильных приложений heat map помогает: 

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

Главная функция тепловых карт в digital-маркетинге — отследить и зафиксировать действия пользователей на разных веб-ресурсах.

Как работают heat maps

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

1. Владелец добавляет в код сайта небольшой фрагмент кода на JavaScript, сгенерированный в выбранном сервисе. 
2. Добавленный скрипт собирает HTML-код страницы и отправляет его в сервис для анализа. 
3. На основе проанализированной информации сервис создаёт карту, на которой отмечены все элементы интерфейса, с которыми могут взаимодействовать пользователи. 
4. Сервис отслеживает поведение и действия пользователей. Каждый раз, когда посетитель проявляет какую-то активность на странице, она фиксируется.
5. По итогам сервис формирует тепловую карту. На ней отображены элементы сайта/приложения и отмечены цветом точки взаимодействия. К примеру, красный цвет показывает фрагменты, которые вызывают наибольший интерес, а синий — зоны, по которым меньше всего кликают. 

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

Виды тепловых карт

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

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

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

С помощью тепловой карты кликов можно:

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

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

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

Тепловые карты скроллинга

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

Тепловая карта скроллинга помогает: 

• Определить оптимальную длину страницы. К примеру, большинство пользователей уходит с середины страницы и не докручивает до важной информации внизу. Возможно, стоит сократить объём материалов и поднять выше важные элементы. 
• Понять, дочитывают ли посетители ваши тексты. Может быть нужно, изменить объём, подачу, структуру страницы или сайта. 
• Найти наилучшее место для размещения призыва к действию, кнопки или баннера. Можно выявить область, до которой доходит большая часть пользователей, и добавить там CTA. 
• Узнать, на каком именно этапе посетители уходят. К примеру, в области выхода можно разместить интересный оффер, который привлечёт и удержит посетителей.

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

Карта отслеживания активности мыши

Heat map активности мыши показывает области, на которые пользователь наводит курсор. Это помогает:

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

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

Пример тепловой карты движения мыши

Тепловая карта внимания

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

При помощи тепловой карты внимания можно: 

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

Минус в том, что этот вид heat map не отображает последовательность взгляда. То есть нельзя сказать, куда посмотрели раньше, а куда позже. Частично может помочь создание карт с разной длительностью просмотра. Например, по одной минуте просмотра, по двум-пяти минутам просмотра и т.д. 

Пример карты внимания

Когда полезно применять тепловые карты

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

А/В-тестирование. Если нужно сравнить несколько вариантов посадочной страницы, heat map поможет оценить глубину прокрутки, области наибольшего внимания, уровень кликабельности. 

Редизайн сайта. Тепловая карта поможет проанализировать интерфейс и взаимодействие с ним, а также оценить, насколько эффективно работают изменённые или недавно добавленные элементы. 

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

Контент-маркетинг. Оценивая поведение пользователей, можно понять, как улучшить контент. 

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

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

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