Hotjar for Developers

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

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

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

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

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

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

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

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

• Карта кликов;
• Карта скроллинга;
• Карта активности мышки;

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

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

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

Это помогает:

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

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

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

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

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

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

Пример использования карт скролла на сайте интернет-магазина Intertop 

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

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

Карта активности мышки для интернет-магазина ARGO

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

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

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

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

Пример rage clicks: Скриншот записи, когда пользователь не может найти интересующий его товар.

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

Даже на бесплатном тарифе есть масса вариантов фильтрации

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

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

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

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

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

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

Обратная связь от пользователей интернет-магазина Intertop помогла определить баги 

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

5. Опросники

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

Так, например такой небольшой опрос в интернет-магазине 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: полное руководство по инструменту – Elit-Web

Easy Improvements to my Website with Hotjar