Инструмент записи экранов в аналитических сервисах представляет собой мощный ресурс для повышения качества вашего сайта, лендинга или приложения. Основная проблема состоит в том, чтобы научиться эффективно использовать этот инструмент. В данной статье мы рассмотрим постараемся изучить данный вопрос.
Функциональность записи экранов доступна сразу в нескольких популярных инструментах, таких как Hotjar, Microsoft Clarity, Webvisor и т.д. Не будем подробно останавливаться на нюансах каждого из них, а сосредоточимся на общем описании правильного подхода к работе с этими инструментами.
Итак, в рамках каких основных сценариев мы можем применять инструменты записи экранов?
Просмотр случайных сессий
Как ни странно, такой примитивный подход, как просмотр случайных сессий, может оказаться крайне полезным. Просто просматривая значительное количество сессий, вы можете обнаружить множество и мелких, и значимых проблем, которые могли бы остаться незамеченными даже при использовании более "осознанного" и профессионального подхода.
Фактически, здесь начинает работать теория вероятности: чем больше различных сессий вы просмотрите, тем выше шанс найти "что-то интересное". В большинстве случаев это будут проблемы с UX-оптимизацией страниц или определенные технические проблемы.
Разумеется, данный метод трудоемок, но и потенциальный эффект от исправления обнаруженных проблем может быть значительным.
В ряде случаев все же рекомендуется использовать определенную фильтрацию сессий; обычно фильтрация происходит по типам устройств, операционным системам и браузерам. Какой сегмент изучать, решается специалистом в каждом конкретном случае.
Приведем примеры алгоритма просмотра сессий для двух бесплатных систем аналитики: от Microsoft (MS Clarity) и Яндекс (Webvisor).
Microsoft Clarity
В системе аналитики Microsoft Clarity (https://clarity.microsoft.com/), которая, разумеется, должна быть предварительно настроена, для перехода к просмотру записей экранов перейдите в раздел "Recordings":
![](https://habrastorage.org/getpro/habr/upload_files/51f/436/bad/51f436bad248d1205edd695d224663ef.png)
Далее просматриваем список записей, каждая из которых доступна для детального анализа.
Чтобы отфильтровать записи по определенному сегменту, необходимо нажать на соответствующий пункт меню:
![](https://habrastorage.org/getpro/habr/upload_files/241/3fb/1c1/2413fb1c1e8f16ac3a786b594c5464c2.png)
В появившемся окне фильтрации в меню слева находим и выбираем целевой тип фильтра; например, “Операционная система”:
![](https://habrastorage.org/getpro/habr/upload_files/fb7/e1d/799/fb7e1d7990d584d17cedf36e8726aa35.png)
Правее увидим выбранную категорию фильтра, выделенную соответствующей рамкой. Теперь можем выбрать необходимое значение в фильтре:
![](https://habrastorage.org/getpro/habr/upload_files/04f/a19/5b8/04fa195b85460e9ae278879e114e63ca.png)
Применяем изменения:
![](https://habrastorage.org/getpro/habr/upload_files/c58/31a/392/c5831a39298bc6dd962e4f137d006073.png)
После этого мы можем ознакомиться с записями, оставшимися после применения фильтра.
Для просмотра записи достаточно нажать на соответствующий пункт:
![](https://habrastorage.org/getpro/habr/upload_files/f0e/3f6/142/f0e3f6142e8f3ccd63c068aff7cf395b.png)
Далее на основном экране отобразится запись с простым и понятным меню управления.
Обнаружив проблемы, с которыми столкнулся пользователь во время сеанса, следует провести более глубокое исследование. Если проблема является массовой, её необходимо оперативно устранить.
Webvisor
Входим в существующий (уже настроенный) аккаунт Яндекс Метрики (https://metrika.yandex.ru/) и в левом меню переходим к разделу "Вебвизор":
![](https://habrastorage.org/getpro/habr/upload_files/7c1/f6b/a4a/7c1f6ba4aab705a252fc25729831457e.png)
Собственно, мы можем сразу перейти к просмотру записей, нажав на символ “Play” рядом с любой из них:
![](https://habrastorage.org/getpro/habr/upload_files/60a/932/fc5/60a932fc5c0381900d5713480061a07d.png)
В случае необходимости можно отфильтровать записи, например, по определённым операционным системам. Для этого нажимаем на кнопку “+” рядом с пунктом “Визиты, в которых” в верхней части основного экрана:
![](https://habrastorage.org/getpro/habr/upload_files/2ac/55f/b43/2ac55fb43e75e83d72af9cde63fc64b8.png)
Далее устанавливаем соответствующий фильтр. Например, чтобы отфильтровать сеансы по операционной системе iOS, устанавливаем следующие параметры:
![](https://habrastorage.org/getpro/habr/upload_files/1e9/2f0/cb3/1e92f0cb39a0b51aead0d67196827e9a.png)
Для применения фильтра нажимаем на соответствующую кнопку:
![](https://habrastorage.org/getpro/habr/upload_files/fd7/86f/822/fd786f8222ccf6dd51c97c197247ce1e.png)
После этого увидим отфильтрованный список записей, соответствующий установленным ограничениям.
Изучение поведения пользователей, не достигших целевой конверсии или микроконверсии
Этот метод является наиболее полезным для анализа записей экрана. Его суть заключается в том, что мы фильтруем записи по наличию или отсутствию определённых событий или по комбинации условий. Чаще всего используемые фильтры направлены на выявление значимых проблем с сайтом, отбирая для дальнейшего анализа определённые сеансы.
Примеры возможных фильтров:
Начал оформления заказа в корзине, но не завершил (могут быть проблемы на этапе оформления заказа).
Добавил товары в корзину, но не начал процесс оформления (проблемы с авторизацией или регистрацией).
Долго пробыл на сайте, достиг множество промежуточных конверсий, но не начал оформление заказа (проблемы с UX).
Начал заполнение формы заявки, но не завершил (технические проблемы с формой).
Нажал кнопку отправки формы, но успешно так и не отправил (проблемы с валидацией полей).
Существует множество вариантов фильтрации, выше приведены лишь основные.
Допустим, мы хотим проанализировать поведение пользователей, которые провели на лендинге более 5 минут, но не совершили целевое действие.
Microsoft Clarity
Если для просмотра записей сеансов мы используем Microsoft Clarity, следует действовать согласно следующим шагам.
Как и в примере выше, выбираем пункт “Filters”:
![](https://habrastorage.org/getpro/habr/upload_files/337/15c/131/33715c131c64e845d87eaac041efa89d.png)
В меню слева находим пункт “Session duration”:
![](https://habrastorage.org/getpro/habr/upload_files/5ad/0c3/50c/5ad0c350c6aed7751b84d63026c8c813.png)
Выбрав данный пункт, в основном окне фильтрации можно настроить фильтр, как показано на скриншоте ниже:
![](https://habrastorage.org/getpro/habr/upload_files/455/748/f61/455748f616f4787cbedb373e73722c4e.png)
Далее необходимо добавить в фильтр условие "не оставил заявку". Для этого находим пункт "Customised tags":
![](https://habrastorage.org/getpro/habr/upload_files/5dc/f99/e82/5dcf99e8254ed873b1e13486fd80c61e.png)
Выбираем параметры целевого события (в большинстве случаев они должны быть настроены заранее), после чего нажимаем на пункт “Exclude selection”:
![](https://habrastorage.org/getpro/habr/upload_files/e06/0f9/1ab/e060f91aba5ec8b383b809195c6ab203.png)
Примечание:
Для отслеживания определенного события необходимо отправлять событие с кодом по следующему шаблону:
clarity("set", "key", "value");
В примере из скриншота выше использован следующий код:
clarity("set", "leadevent", "landinglead");
Подробнее можно ознакомиться в справке MS Clarity (https://learn.microsoft.com/en-us/clarity/custom-tags).
После установки условий фильтрации применяем настройки:
![](https://habrastorage.org/getpro/habr/upload_files/bfe/017/5ce/bfe0175ceef896bb6667270d5a18694e.png)
Далее можем ознакомиться с перечнем отфильтрованных сессий и провести исследование поведения пользователей.
При необходимости можем корректировать настройки непосредственно из строки параметров фильтрации.
![](https://habrastorage.org/getpro/habr/upload_files/178/349/dbd/178349dbd7b01e85f6ec34a27f53b31b.png)
Как уже отмечалось выше, анализ сеансов на проблемных моментах поведения пользователей, является самым важным и крайне полезным.
В связи с этим рекомендуется тщательно готовиться к будущему использованию Microsoft Clarity, создавая максимальный перечень конверсий и микроконверсий. В зависимости от конкретного случая, это могут быть:
Заполнения форм
Нажатия на кнопки
Просмотр определённых экранов
Определённые паттерны взаимодействия с полями форм
Заранее подготовив максимально полный перечень конверсий и микроконверсий, мы сможем эффективно работать с записями сессий в будущем.
При этом следует учитывать, что значительное количество событий MS Clarity отслеживает автоматически. В основном, такие события находятся в блоке фильтрации в секции “User actions”.
![](https://habrastorage.org/getpro/habr/upload_files/2a1/e73/dd9/2a1e73dd948026e7e71eb1a1699dafce.png)
Webvisor
Как и в примере ранее, для фильтрации нажимаем на кнопку “+” около соответствующего пункта:
![](https://habrastorage.org/getpro/habr/upload_files/600/a19/a1b/600a19a1b8f2e1d2e728449fae148b00.png)
Далее переходим к непосредственной установке фильтра.
Для условия “более 5 минут на сайте” настройка фильтра выглядит следующим образом:
![](https://habrastorage.org/getpro/habr/upload_files/681/def/902/681def902ff4dec5c1f27ff7c0ff1307.png)
Для фильтрации по факту недостижения цели снова нажимаем на кнопку “+” и выбираем пункт “Достижение цели”:
![](https://habrastorage.org/getpro/habr/upload_files/9f2/43c/fcf/9f243cfcf6441dd8c6757c5e10f5652f.png)
Далее нажимаем на пункт “Исключить” для того, чтобы исключить цель:
![](https://habrastorage.org/getpro/habr/upload_files/158/19c/a38/15819ca38ba08025a6b04d030d519234.png)
Ниже увидим перечень целей, отмечаем галочкой необходимую:
![](https://habrastorage.org/getpro/habr/upload_files/fb0/7e2/f0c/fb07e2f0cc086ec8500c6c5c90a9f6e5.png)
Применяем изменения:
![](https://habrastorage.org/getpro/habr/upload_files/2c0/0b3/aeb/2c00b3aeb8b13727cb86bc6383c3c831.png)
Контролировать и удобно корректировать настройки фильтра можно прямо из панели фильтров над списком записей:
![](https://habrastorage.org/getpro/habr/upload_files/a3c/d36/a19/a3cd36a19e2e91dd79f75f115d99b186.png)
Примечание:
В большинстве случаев цели, используемые для фильтрации, необходимо создать заранее согласно указаниям справки (https://yandex.ru/support/metrica/general/goal-js-event.html).
Это довольно простая настройка, и в общем случае код цели, отправляемый в Метрику с веб-страницы, выглядит следующим образом:
ym(XXXXXX, 'reachGoal', 'my_event_name');
где:
XXXXXX — номер вашего счётчика Метрики
my_event_name — уникальный идентификатор цели
Как и в случае с MS Clarity, после установки фильтра переходим к просмотру записей, стараясь выявить проблемные места, негативно влияющие на конверсию.
Кроме того, в Яндекс Метрике автоматически регистрируется большое количество событий. Такие события помечены как “Автоцель”, и мы можем также использовать их для целей фильтрации:
![](https://habrastorage.org/getpro/habr/upload_files/5bc/d0f/b14/5bcd0fb147ab775ded90b5bbfdc44874.png)
Просмотр записей успешного достижения событий
В данном методе анализа осуществляется подход, который обратен описанному в предыдущем пункте. Если ранее мы фильтровали пользователей, которые, по нашему мнению, должны были совершить целевое действие, но так и не сделали этого, то здесь мы анализируем поведение успешных пользователей, достигших полезных для нас конверсий или микроконверсий.
В большинстве случаев такой анализ полезен, когда мы хотим выявить паттерны успешного поведения пользователей и в дальнейшем способствовать тому, чтобы большее количество пользователей действовали по этим паттернам.
Например, мы можем отфильтровать пользователей, успешно совершивших заказ, и, просмотрев записи сеансов, обнаружить, что они часто просматривали определенные рекомендации или посещали определенные разделы сайта, что способствовало тому, чтобы они оставили заявку. Соответственно, необходимы корректировки, которые будут способствовать более частому просмотру рекомендаций и разделов, положительно влияющих на конверсию в заказ.
В большинстве случаев гипотезы, сгенерированные при просмотре сеансов, рекомендуется подтверждать более "твёрдой" статистикой. Если гипотеза подтвердилась статистически, можем внедрять на сайте изменения.
В целом, фильтрация при анализе схожа с описанной в предыдущем пункте; единственная разница состоит в том, что если там мы, как правило, исключали целевое действие, то здесь в большинстве случаев этого делать не нужно.
В MS Clarity мы, соответственно, не отмечаем пункт "Exclude selection".
![](https://habrastorage.org/getpro/habr/upload_files/cb3/77d/9d0/cb377d9d00cb43cf5a8cc2d171406526.png)
В Вебвизоре при выборе целей мы выбираем не пункт “Исключить”, а оставляем пункт по умолчанию, “Включить”:
![](https://habrastorage.org/getpro/habr/upload_files/a88/e79/203/a88e792039172ee464bc26afdcbfbef6.png)
Заключение
Итак, выше мы рассмотрели три основных сценария, по которым рекомендуется использовать записи сеансов для улучшения UX сайта и увеличения коэффициента конверсии.
Каждый бизнес, исходя из своих потребностей, может определять собственные уникальные сценарии использования записей.
В связи с этим мы рекомендуем постоянно углублять знания в работе с инструментом записей экранов, периодически возвращаться к нему и с каждой итерацией дорабатывать сценарий использования, делая его всё более эффективным с точки зрения финального результата.
Главное — это постоянство исследований записей. В этом случае они станут практически бесконечным источником генерации идей по улучшению вашего лендинга. Если же вы вам необходима корректная настройка систем, позволяющих работать с записями экранов, либо нужен более широкий спектр работ по веб-аналитике, обращайтесь к нам:)