Любой спортсмен знает, как полезно бывает посмотреть запись своего выступления. Она позволяет увидеть оплошности, понять, на что обратить внимание и как не допускать ошибок в будущем. А тренеры на основе видео разрабатывают стратегию, учитывая особенности каждого подопечного.
Теперь представьте, что у вас есть сайт. Каждый день на него заходят люди, что-то нажимают, где-то задерживаются. Было бы неплохо узнать, какие элементы страницы привлекают больше внимания, какие меньше, что следовало бы изменить, переставить и перестроить.
Из таких рассуждений появились тепловые карты сайта и инструменты для воспроизведения сессий.
Как все устроено
Сервисы для воспроизведения сессий нужно предварительно встроить в код сайта — обычно они имеют вид сниппета. Когда пользователь заходит на страницу, код запускается и начинает отслеживать все происходящие во время сессии браузерные события: движения и клики мышью, прокручивание страницы. Любые действия будут записаны с возможностью запустить и просмотреть их так, как тренер просматривает сыгранный матч своей команды.
Такие данные и используются для анализа пользовательского поведения и для создания тепловой карты сайта.
Она выглядит вот так — цветом обозначены места от оранжевого, который обозначает «горячие» или наиболее привлекательные для кликов посетителя места, до голубого, то есть «холодного» цвета и менее интересных элементов:
Главная ее задача — показать, какие элементы страницы наиболее интересны посетителю, с какими они больше взаимодействуют, а какие игнорируют. Затем эти данные можно использовать для того, чтобы переставить элементы для увеличения конверсии и мотивации посетителя смотреть туда, куда вы хотели бы, чтобы он смотрел.
Тепловые карты сайта незаменимы для дизайнеров, маркетологов, SEO-менеджеров.
Среди no-code инструментов есть несколько хороших вариантов для автоматического создания тепловых карт, а также карт кликов и скроллинга. Пользоваться ими довольно легко: они готовые и не требуют умения программировать.
💡 Узнайте о no-code инструментах больше на бесплатном марафоне по разработке без кода от онлайн-университета «Зерокодер»! Мы не только объясняем теорию, но и показываем, как создавать приложения. Старт нового потока совсем скоро — успейте записаться!
Инструменты для создания тепловой карты сайта
Устроены такие сервисы примерно одинаково, по принципу записи и проигрывания сессии пользователя. В код страницы вставляется сниппет, который фиксирует, когда посетитель открывает сайт. Он как бы «накрывает» собой все элементы страницы. Стоит пользователю подвигать мышью, кликнуть на кнопку или покрутить колесиком, как информация сразу же передается сервису. Он ее записывает. Потом владелец ресурса может просмотреть запись поведения посетителя.
У многих сервисов функционал намного шире базового: некоторые инструменты создают тепловую карту, карту кликов, аналитические дашборды и многое другое, чтобы владелец ресурса мог увидеть слабые и сильные места своего проекта. Конечно, программировать для этого не нужно — существуют готовые зерокодинговые сервисы. Их нужно просто настроить и запустить.
Поговорим о нескольких из них, которые точно помогут улучшить конверсию.
Лидер: Hotjar
Из всех инструментов для создания тепловой карты сайта Hotjar — самый популярный, и он же скорее всего станет первым, который вы обнаружите во время поиска. Ничего удивительного, у него крутой функционал: он записывает сессии пользователей, с его помощью можно проводить опросы среди посетителей и получать фидбек. Для улучшения функционала сайта нет ничего лучше, чем попросить совета у целевой аудитории.
Hotjar предлагает исследовать мнение общественности разными способами:
- составляя тепловые карты;
- делая записи сессий посетителей;
- получая фидбек от пользователей;
- проводя интервью.
Проведение опросов — одна из сильных сторон сервиса, еще и довольно эффективная с точки зрения маркетинга. И не страшно, если нет идей, о чем спросить целевую аудиторию: Hotjar предлагает готовые шаблоны, например, исследование рынка или юзабилити сайта.
Другая интересная фича инструмента — возможность работать с записью сессии в режиме реального времени. Во время просмотра можно сразу помечать проблемные места, чтобы впоследствии их исправить.
Сколько стоит. У Hotjar есть бесплатный план на 35 ежедневных сессий, дальше начинаются платные тарифы от $39 в месяц. Интервью, исследования и фидбек оплачиваются отдельно, базовые тарифы касаются только записи сессий и создания тепловых карт сайта.
Для техподдержки: Lucky Orange
Инструкция по установке и настройке Lucky Orange есть по ссылке — вот тут.
Как и другие сервисы, о которых мы говорим, он помогает составлять тепловую карту сайта. И кое-что еще, а именно организовывать нечто вроде техподдержки — онлайн-чаты с пользователями, у которых возникли вопросы или трудности.
Запустить чат несложно:
- нажмите на кнопку Chat (Чат) справа, чтобы начать кастомизацию;
- установите рабочие часы (опционально);
- установите необходимые к заполнению поля для старта чата (опционально);
- покажите или скройте информацию о сотруднике техподдержки;
- нажмите на кнопку Available to Chat (Готов к общению).
Lucky Orange начнет вести себя как любой инструмент для техподдержки, только с функциями записи сессии и последующего анализа поведения пользователя. Разговоры с пользователями тоже будут записаны — как и их контактные данные, которые можно отправить в CRM для дальнейшей работы.
Сколько стоит. У Lucky Orange есть бесплатный план, который ограничен 500 просмотрами в месяц. Платные начинаются от $18 со значительным повышением лимита до 10 000 просмотров.
Для A/B-тестирования: Crazy Egg
Особенность Crazy Egg — в возможности проводить быстрые, простые и эффективные A/B-тестирования: то есть сравнения двух версий продукта. С его помощью можно легко понять, какой из вариантов страницы работает лучше и почему.
Crazy Egg позволяет в пару кликов создать несколько вариантов страницы, которые различаются отдельными фичами, а потом проверить, насколько изменения улучшают или ухудшают показатели. Важный момент: тестировать лучше какие-то небольшие поправки, потому что так проще понять, что влияет на конверсию.
Однако A/B-тесты — не все, что может предложить сервис. У него есть дашборд, который показывает активность пользователей в режиме онлайн. Crazy Egg также показывает:
- скорость загрузки страниц;
- основные ошибки, которые возникают при загрузке;
- количество кликов на неактивные элементы и кликов ярости — это когда пользователь нажимает несколько раз подряд на одну и ту же кнопку, потому что она не работает сразу;
- тепловые карты сразу трех типов: классическую с «теплыми» и «холодными» зонами, с изолированными кликами на элементы и с рейтингом популярности кнопок.
Есть и возможность проводить опросы, в том числе по шаблонам с возможностью добавить столько вопросов, сколько нужно.
Сколько стоит. Базовый тариф обойдется в $29 в месяц. В него включены 30 000 просмотров страниц и 100 записей сессий.
Для создания воронок: Smartlook
Конкурентное преимущество Smartlook — возможность создавать воронки, или действия, которые ведут пользователя к желаемой цели, например, к добавлению товара в корзину, подписке или заполнению формы.
Программу придется настроить: показать ей, с какой страницы начнется путь пользователя, на что ему нужно будет нажать. Последовательность создается с учетом используемой информации и личной интуиции — ничего страшного, потом ее можно подкорректировать.
После окончания работы появится график вроде того, который есть на скриншоте выше. Он выглядит как холм: слева выше, потом вниз. Так в Smartlook обозначаются этапы, которые проходит пользователь. Визуализация помогает понять, на каком из этапов происходит заминка, и исправить проблему. Возможно, нужно сделать кнопку побольше, или подумать над более эффективным призывом к действию.
Также Smartlook записывает сессии, создает тепловую карту сайта и отслеживает события. У него есть страница с дашбордами, где находится вся релевантная информация. Дашборды можно кастомизировать в зависимости от того, какой отдел компании подключен к работе.
Сколько стоит. Бесплатный тариф предлагает 3 000 сессий ежемесячно. Платные начинаются от $55 в месяц — это дополнительные фичи и увеличение количества сессий до 5 000.
Для персонализированного опыта: Zoho PageSense
PageSense — это инструмент внутри инструмента, который предлагают разработчики Zoho для расширения функционала продукта. Тут есть все о чем мы говорили выше: A/B-тесты, запись сессий, аналитика и тепловые карты. И кое-что еще — возможность сразу протестировать альтернативную раскладку элементов на сайте. Zoho PageSense позволяет создать дубликат сайта и провести A/B-тестирование с использованием старого и нового вариантов.
Другая интересная функция — персонализация, основанная на источнике трафика. То есть, инструмент может определить, откуда пришел пользователь, и предложить ему релевантный контент. У пользователей LinkedIn и Twitter запросы могут быть разными — и Zoho PageSense это учтет.
Способов настройки у инструмента два:
- синхронный: функции подгружаются вместе с загрузкой страницы пользователем, из-за чего сайт может работать медленнее. Зато можно проводить A/B-тесты и персонализировать контент;
- асинхронный: загрузка страницы и PageSense происходят не одновременно, за счет чего сайт грузится быстрее, но возможны сложности с персонализацией и тестированием.
Можно попробовать оба варианта — это поможет определиться, какой будет лучше для проекта.
Сколько стоит. Самый дешевый тариф начинается с $20 в месяц — он рассчитан на 10 000 пользователей. Чем дороже, тем больше функций.
Тепловые карты помогут увеличить конверсию и улучшить производительность, но тут есть и негативная сторона. Во-первых, не стоит вставлять в код страницы незнакомые или подозрительные сниппеты — пользоваться нужно только проверенными инструментами. Больше об этом читайте в статье «Как защитить свой проект от киберугроз».
Во-вторых, слишком большое количество аналитики и трекинговых инструментов ухудшает производительность — страницы начинают грузиться медленнее, что раздражает посетителей. Лучше тестировать понемногу, исправляя не все сразу, а отдельные функции.
