Как использовать Hotjar для оптимизации конверсии интернет-магазина

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

Почему как минимум бесплатную версию Hotjar стоит подключить к вашему проекту?

Hotjar — это один из топовых онлайн-сервисов анализа юзабилити сайта, который помогает изучить ваших пользователей, получить обратную связь и оптимизировать сайт для увеличения конверсии. На данный момент более 350 000 организаций используют Hotjar для анализа юзабилити и в 2021 году этот инструмент был признан одним из ведущих сервисов в EMEA. Его активно используют такие компании как Ryanair и Tomtom. Наш  кейс об увеличении конверсии на 55% для Интертоп вы также можете прочитать в разделе клиентов Хотжар.

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

Возможности Hotjar:

• Heatmaps (тепловые карты): карты кликов, скролла, движения мышью;
• Сбор обратной связи;
• Просмотр записей при A/B-тестировании;
• Отслеживание и запись поведения пользователей;
• Анализ воронки конверсий;
• Аналитика форм;
• Создание различных опросников;
• Сравнение кликов.

Основные функции Hotjar для проектов e-commerce с наглядными примерами использования

Команда Турум-бурум активно использует Hotjar при изменении дизайна сайтов по ESR и RSR подходам. Вот основные срезы, которые вам точно стоит самостоятельно использовать на вашем сайте.

1. Тепловые карты (Heatmaps)

Выделяют 3 вида тепловых карт, которые пользуются наибольшей популярностью для проектов e-commerce:

1. Карта кликов;
2. Карта скроллинга;
3. Карта активности мышки;

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

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

• Карта кликов: отражает все элементы и области страниц, на которые пользователи кликают, а также показывает частотность кликов.
Это помогает:

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

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

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

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

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

• Движение курсора (карта активности мышки): позволяет отследить точки и области на странице, на которые пользователь больше всего фокусирует свое внимание (изображение, пространство вокруг ссылок, и прочее). Курсор всегда следует за взглядом человека, поэтому используется как eye-tracker, что позволяет понять какие элементы на сайте больше всего привлекают внимание пользователя и правильно ли расставлены акценты в дизайне сайта.

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

2. Записи сеансов

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

• Точку входа на сайт;
• Переходы со страницы на страницу;
• Вводит ли пользователь данные;
• Ошибается ли и если да, то где ошибается;
• Показывает точку отказа и выхода;
• Показывает где происходят rage clicks (когда пользователи постоянно нажимают или щелкают мышью, потому что они разочарованы или обозлены), и т.д.

Видео можно отфильтровать в зависимости от страниц, устройств, стран и т.д.

3. Просмотр записей при A/B-тестировании

С помощью Hotjar есть возможность подключить heatmaps к экспериментам. Это помогает:

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

4. Сбор обратной связи

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

Выглядит на сайте это примерно так: небольшая плашка Feedback раскрывается при клике. У пользователя есть возможность оценить интерфейс по 5-бальной шкале из эмодзи и, по желанию, оставить свой комментарий.

Внешний вид такого окошка можно оформить в стилистике вашего сайта.

5. Опросники

Это один из наиболее значимых инструментов для оптимизации конверсии. Мы особенно рекомендуем внедрять его в чекауте, если показатель выходов со страницы оформления заказа необъяснимо высок. Так, для Intertop, например, это помогло увеличить конверсию на 55%.
Так, например такой небольшой опрос в интернет-магазине Intertop помог выявить причины и послужил решающим фактором для значительных изменений всей воронки.
При выходе со страницы чекаута пользователя спрашивали “Почему вы покидаете оформление заказа?”

Как подключить Hotjar?

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

Но установить Хотжар можно и самостоятельно.
Если у вас установлен Google Tag Manager, то для этого даже не нужно дергать разработчика.

Способ №1
Можно воспользоваться интеграцией с Google Tag Manager через интерфейс Hotjar, просто нажмите Start Setup и следуйте инструкциям. Вам нужно быть залогиненым в том Google аккаунте, где создан ваш Tag Manager и указать необходимый контейнер при установке. Тег создастся автоматически, причем даже для публикации тега не нужно будет заходить в Tag Manager.

Способ №2
Создать тег через Google Tag Manager, прописав при этом ID, которое можно взять в аккаунте Hotjar.

Просто найдите нужный тег и пропишите в нем ID.

Способ №3
Код можно залить напрямую в Head и Body.
Просто скопируйте его из аккаунта Hotjar и передайте разработчику.

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

Как правильно трактовать данные Hotjar?

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

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

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