Вебвизор — это инструмент аналитики, который позволяет отслеживать поведение пользователей на сайте, визуализируя их клики, прокрутку и взаимодействие с элементами. В статье вы узнаете, как использовать вебвизор для улучшения юзабилити, повышения конверсии и выявления слабых мест дизайна.
Клиент пришел к нам в Maximus Media с типичной проблемой. Рекламу настроили, трафик идет, бюджет тратится, а заявок — три в неделю. Маркетолог клиента говорил: «Наверное, нужно больше трафика». Мы сказали: «Давайте сначала посмотрим, что происходит с тем трафиком, который уже есть».
Открыли Вебвизор. Включили первую запись. Человек заходит на сайт, смотрит на первый экран, пытается кликнуть по номеру телефона — а он некликабельный. Пытается нажать на кнопку «Заказать звонок» — она ведет на страницу 404. Закрывает сайт.
Вторая запись. Человек с мобильного. Полстраницы не помещается на экране, текст наезжает на кнопки, форму заявки невозможно заполнить — поля слишком маленькие. Закрывает.
Третья. Человек дошел до каталога, нажимает «Подробнее» — и ничего не происходит. Кнопка просто не работает.
За 15 минут просмотра записей мы нашли восемь критических ошибок. Клиент тратил 200 000 рублей в месяц на рекламу, которая приводила людей на сломанный сайт. Все равно что приглашать гостей в ресторан, где не работает входная дверь.
Вебвизор — это инструмент Яндекс Метрики, который записывает сессии посетителей. Не видео с веб-камеры, конечно. Он фиксирует все действия пользователя на сайте: куда кликают, как двигают мышь, что прокручивают, где останавливаются, а где уходят. А потом вы можете посмотреть это как видеозапись.
По сути, вы смотрите на свой сайт глазами реального посетителя. Видите, куда он кликает, где задерживается, что прокручивает, а что пропускает. Это как установить камеру в магазине и наблюдать за покупателями: кто-то подходит к полке и не находит ценник, кто-то не замечает акцию, кто-то не может найти кассу. Разница только в том, что в онлайне все это происходит за секунды, а не минуты.
Разница с обычной аналитикой — принципиальная. Метрика говорит вам: «60% посетителей уходят со страницы за 15 секунд». Вебвизор показывает почему. Не догадки, не гипотезы — реальное поведение реальных людей. Конкретные действия конкретных посетителей.
Для работы Вебвизора нужна Яндекс Метрика. Если она у вас не установлена, начните с этого. Создайте счетчик на metrika.yandex.ru, добавьте код на все страницы сайта. Обычно это делает разработчик за полчаса. Если сайт на WordPress — есть плагины, которые установят счетчик за пару минут.
Если Метрика уже стоит, включить Вебвизор можно за минуту:
Записи начнут появляться через несколько часов. Метрика хранит записи за последние две недели, поэтому не ленитесь заходить регулярно. Пропустили две недели — старые записи потеряны навсегда.
Одна деталь, которую многие упускают: после включения Вебвизора обновите код счетчика на сайте, если он вставлен не через автоматический скрипт. Без обновления записи могут не появиться. Также проверьте, что Вебвизор работает на всех страницах, а не только на главной — иногда код установлен не везде.
Получить бизнес-план
За 450+ проектов наша команда в Maximus Media просмотрела десятки тысяч записей. Одни и те же паттерны повторяются снова и снова. Вот что мы находим чаще всего.
Люди не могут найти то, что ищут. Это видно по характерному поведению: быстрые хаотичные движения мыши по странице, клики по элементам, которые не являются ссылками, возврат на главную и попытка найти другой путь. Человек буквально «тыкает» по странице в надежде, что что-то произойдет.
У одного клиента каталог товаров был спрятан в меню третьего уровня. Нужно было навести на «Продукция», потом на «Каталог», потом выбрать категорию. Из записей было видно, что 40% посетителей тратят 20-30 секунд на поиск каталога, а потом уходят. Мы вынесли каталог на первый уровень меню — время на поиск сократилось до 3 секунд, а конверсия в просмотр товаров выросла на 45%.
Вебвизор показывает, как люди взаимодействуют с формами. И часто картина удручающая. Человек начинает заполнять форму, доходит до поля «ИНН» или «Юридический адрес» — и бросает. Или вводит телефон, но форма его не принимает из-за неправильной валидации. Или нажимает «Отправить», а ничего не происходит — нет визуального подтверждения, что заявка ушла.
Одна из лучших находок у нашего клиента — интернет-магазин с формой заказа из 11 полей. Одиннадцать! Имя, фамилия, отчество, телефон, email, город, улица, дом, квартира, комментарий, промокод. Из записей было видно, что до конца формы доходит один человек из двадцати. Остальные бросали на третьем-четвертом поле.
Мы сократили форму до трех полей: имя, телефон, адрес доставки. Конверсия в заказ выросла в четыре раза за одну неделю. Четыре раза. Без единого рубля дополнительного бюджета на рекламу.
Самое распространенное открытие: люди не прокручивают страницу. Заходят, смотрят 3-5 секунд на первый экран, и если не видят ответа на свой вопрос — уходят. Никаких «они же прочитают, если интересно». Не прочитают. Не прокрутят. Уйдут.
В записях это выглядит так: курсор стоит на месте, прокрутки нет, через несколько секунд — закрытие вкладки. Если такая картина повторяется у большинства посетителей, проблема в первом экране. Либо заголовок непонятный, либо нет ясного предложения, либо дизайн отталкивает, либо страница грузится слишком долго.
Мы для своих клиентов ввели правило: главное предложение, основная выгода и кнопка действия — на первом экране. Без исключений. Баннеры-слайдеры, красивые видео-фоны и приветственные тексты «Добро пожаловать на наш сайт» — все это можно убрать. Человеку нужен ответ: что здесь для меня, и что мне делать дальше.
Больше 60% трафика в большинстве ниш идет с мобильных устройств. И именно мобильную версию сайта владельцы проверяют в последнюю очередь (или не проверяют вообще). Они смотрят сайт с рабочего компьютера, видят, что все красиво — и успокаиваются. А 60% их аудитории видят совсем другую картину.
В записях Вебвизора с мобильных мы регулярно видим: текст не помещается на экране и нужно скроллить горизонтально, кнопки слишком маленькие (палец промахивается и попадает на соседний элемент), формы не адаптированы под сенсорный ввод, всплывающие окна перекрывают весь экран и их невозможно закрыть.
Один наш клиент терял 70% мобильного трафика из-за попапа с подпиской, который появлялся через 2 секунды после входа на сайт. Крестик закрытия был настолько маленький, что попасть по нему с телефона было почти невозможно. Человек пытался закрыть, промахивался, нажимал куда-то еще — и просто закрывал сайт целиком. Мы убрали этот попап на мобильных, и показатель отказов упал с 78% до 52%. За один день.
Иногда Вебвизор показывает вещи, о которых никто на стороне клиента не подозревал. Кнопка, которая перестала работать после последнего обновления сайта. Форма, которая отправляет данные в никуда. Картинка, которая не загружается у половины посетителей. Ссылка, которая ведет на несуществующую страницу.
У одного клиента кнопка «Добавить в корзину» работала на всех товарах, кроме одной категории. Баг появился после обновления плагина и никто его не заметил — потому что тестировали только главную страницу. Из Вебвизора мы увидели, что люди кликают, ничего не происходит, кликают снова, и уходят. Потери за месяц — больше 200 несостоявшихся заказов.
Помимо записей, Метрика предлагает карту кликов. Она показывает, какие элементы страницы кликают чаще всего. Тепловая карта: красные зоны — много кликов, синие — мало.
Зачем это нужно? Чтобы понять, чего хотят посетители. Если люди кликают по элементу, который не является ссылкой (например, по картинке или тексту), — значит, они ожидают, что там что-то произойдет. Это сигнал: сделайте этот элемент активным. Люди сами подсказывают, что им нужно.
Обратная ситуация: у вас есть важная кнопка «Оставить заявку», но по карте кликов ее почти никто не нажимает. Значит, она либо плохо видна, либо расположена не там, где люди ее ищут, либо текст на кнопке не мотивирует кликнуть.
В нашей практике карта кликов помогла одному клиенту обнаружить, что люди пытаются кликнуть по логотипу компании на странице товара, ожидая попасть на главную. Логотип не был ссылкой. После исправления количество просмотренных страниц за сессию выросло на 20% — люди просто стали комфортнее перемещаться по сайту.
Карта скроллинга показывает, какой процент посетителей дочитал страницу до определенного места. Обычно картина такая: первый экран видят 100%, до середины страницы доходят 40-50%, до конца — 10-20%.
Это критически важно для размещения ключевой информации. Если ваш номер телефона или кнопка заказа находятся внизу страницы, их увидят только 10-20% посетителей. Девять из десяти потенциальных клиентов просто не дойдут до того места, где вы предлагаете им связаться с вами.
Мы используем карту скроллинга для оптимизации длинных страниц. Если видим, что 80% аудитории «отваливаются» на определенном месте, анализируем — что там расположено. Может быть, блок неинтересен. Может, текст стал скучным. Может, человек уже получил ответ и уходит довольным (это, кстати, не всегда плохо).
На практике это выглядит так: у клиента была страница услуги длиной 5 000 слов. Подробная, экспертная, с примерами. Но карта скроллинга показала, что 75% людей не проходят дальше второго экрана. Мы перекомпоновали страницу: ключевую информацию подняли вверх, блок с ценами перенесли на первый экран, длинные описания убрали в аккордеон (раскрывающиеся блоки). Результат: глубина скроллинга выросла на 35%, конверсия — на 18%.
Фильтруйте. Вебвизор позволяет отобрать записи по параметрам: источник трафика, устройство, страница входа, длительность визита, достигнутые цели. Самые полезные записи — визиты с отказом (менее 15 секунд) на коммерческих страницах. Именно там деньги утекают. Начинайте всегда с них.
Мобильный трафик — это другой мир. Маленький экран, палец вместо мыши, нестабильный интернет, отвлекающие факторы. Проблемы, которых нет на десктопе, на мобильных расцветают. Минимум раз в месяц выделяйте час на просмотр мобильных записей. Особенно если у вас больше 50% мобильного трафика.
Один человек закрыл сайт через 3 секунды — это не повод паниковать. Может, он случайно зашел. Может, его отвлек телефонный звонок. Но если 30 из 50 посетителей демонстрируют одно и то же поведение (например, пытаются кликнуть по некликабельному элементу), — это паттерн. И его нужно исправлять. Паттерн — это закономерность. Единичный случай — это шум.
Создайте простую таблицу: дата, что заметили, на какой странице, приоритет, статус исправления. Без такого лога находки забываются через неделю. А ведь каждая из них — потенциальный рост конверсии. Мы ведем такие логи для всех клиентов и пересматриваем их раз в месяц.
Один просмотр записи, где пользователь мучается с формой, убеждает разработчика лучше, чем десять докладов о проблемах UX. Визуальное доказательство — самый сильный аргумент. Мы часто делаем нарезку из самых показательных записей и присылаем команде разработки клиента. Проблемы исправляются в тот же день.
Внесли изменения на сайт? Через пару дней просмотрите записи на измененной странице. Поведение стало лучше? Люди стали быстрее находить нужное? Конверсия выросла? Вебвизор дает визуальное подтверждение, что ваши изменения работают. Или не работают — и тогда нужно пробовать другой вариант.
Вместе с Вебвизором включается аналитика форм. Она показывает статистику по всем формам на сайте: сколько людей увидели форму, сколько начали заполнять, сколько отправили, на каком поле бросили.
Это мощный инструмент, которым почти никто не пользуется. Если у вас форма заявки, и из 100 человек, которые начали ее заполнять, отправляют только 15 — это проблема формы, а не трафика. Не нужно больше рекламы. Нужно проще сделать форму.
В нашей практике мы сталкивались с ситуацией, когда 40% пользователей бросали форму на поле «email». Причина оказалась банальной: поле было обязательным, а людям не хотелось давать свою почту для простого запроса на обратный звонок. Зачем email, если они хотят, чтобы им позвонили? Сделали поле необязательным — и конверсия формы выросла на 60%.
Еще частая проблема — валидация. Форма требует телефон в формате +7(XXX)XXX-XX-XX, а человек вводит 89161234567. Форма не принимает, выдает ошибку, человек не понимает, что не так, и уходит. Мы рекомендуем принимать телефон в любом формате — пусть менеджер разберется, а клиент не потерян.
Вебвизор — не панацея. Он показывает «что происходит», но не всегда объясняет «почему». Человек ушел с сайта через 5 секунд. Может, ему не понравился дизайн. А может, его отвлек телефонный звонок. Или он нашел ответ на свой вопрос за 5 секунд и ушел довольным. Из записи этого не узнать.
Также Вебвизор не записывает содержимое полей ввода (пароли, данные карт). Это важно с точки зрения безопасности и соответствия законам о персональных данных. Но иногда мешает аналитике — например, нельзя увидеть, какой поисковый запрос человек вводил во внутренний поиск сайта. Хотя этот запрос можно отследить другими способами в Метрике.
И еще: записи хранятся 14 дней. Если вы не заходили в Метрику две недели — старые записи пропали безвозвратно. Для серьезной аналитики стоит выделить регулярное время на просмотр. Поставьте напоминание в календаре — раз в неделю, полчаса на просмотр записей.
Помимо примеров, которые я уже привел, вот еще пара историй из нашей работы.
Клиент — онлайн-школа английского языка. Записались на пробный урок 2% посетителей. После анализа Вебвизора обнаружили: кнопка «Записаться» была зеленой на зеленом фоне. Буквально сливалась с оформлением страницы. Люди ее не видели. Поменяли цвет кнопки на контрастный оранжевый, добавили анимацию при наведении и подпись «Первый урок бесплатно» — конверсия выросла до 4,5%. Рост в два с лишним раза от одной правки.
Другой клиент — стоматологическая клиника. Трафик хороший, но форма записи заполнялась редко. Из записей увидели: люди читают страницу до блока с ценами, видят цены — и уходят. Оказалось, цены на сайте были выше, чем в рекламном объявлении. Рекламу давно обновили с акционными ценами, а сайт — нет. Несоответствие ожиданий. Привели цены в порядок, добавили информацию о рассрочке и акциях, — и заявки начали расти.
Третий кейс — интернет-магазин одежды. Карточки товаров просматривали много, но в корзину добавляли редко. Вебвизор показал: люди пытались увеличить фото товара кликом, а фото не увеличивалось. На мобильных пробовали «развести» пальцами — тоже не работало. Для одежды фото — критический фактор выбора. Добавили зум на фото, галерею из 4-5 ракурсов — добавления в корзину выросли на 55%.
Зависит от трафика и задач. Наши рекомендации для клиентов Maximus Media:
Не нужно просматривать все записи. 20-30 записей за сессию дают достаточную картину. Фильтруйте по страницам, которые вас интересуют, и смотрите целенаправленно.
Вебвизор работает в связке с другими отчетами Метрики, и именно в этой связке раскрывается его полный потенциал. Например, вы видите в отчете «Страницы входа», что у конкретной страницы высокий процент отказов. Переходите в Вебвизор, фильтруете записи по этой странице — и смотрите, что не так.
Или вы настроили цели в Метрике (отправка формы, клик по телефону, добавление в корзину). Вебвизор позволяет посмотреть записи визитов, в которых цель достигнута — и визитов, в которых нет. Сравниваете поведение — и понимаете, чем «успешные» посетители отличаются от «неуспешных». Что они делают иначе? На что обращают внимание? Какой путь по сайту проходят?
Мы в Maximus Media всегда анализируем Вебвизор в связке с данными рекламных кампаний. Если рекламная кампания приносит трафик с высоким процентом отказов, смотрим записи именно этого трафика. Иногда проблема в рекламе (не тот посыл, не та аудитория). Иногда — в посадочной странице (реклама обещает одно, страница показывает другое). Без Вебвизора понять причину можно только методом проб и ошибок. С Вебвизором — за час.
Яндекс обновил Вебвизор до версии 2.0, и изменения существенные. Старая версия записывала не полноценное видео, а последовательность действий, которую потом «воспроизводила» на загруженной странице. Из-за этого были искажения: если страница менялась после записи, запись выглядела некорректно.
Вебвизор 2.0 записывает реальный рендер страницы — то, что видел пользователь. Записи стали точнее, проблемы видны яснее. Также появилась возможность записывать действия на динамических сайтах (SPA — single page applications), которые раньше Вебвизор почти не поддерживал.
Для перехода на Вебвизор 2.0 нужно обновить код счетчика. Если у вас старый код — рекомендуем обновить. Разница в качестве записей заметная.
Если у вас есть сайт и Яндекс Метрика — включите Вебвизор. Это бесплатно и занимает минуту. Через сутки появятся первые записи.
Потратьте час на просмотр. Начните с записей на тех страницах, которые приносят вам деньги — страницы услуг, товаров, форм заказа. Смотрите с фильтром «отказы» — именно там прячутся самые очевидные проблемы.
Запишите все, что заметили. Приоритизируйте: сначала исправляйте то, что влияет на конверсию (нерабочие кнопки, проблемы с формами, невидимые CTA). Потом — проблемы навигации. Потом — дизайнерские нюансы.
Если не хотите разбираться самостоятельно или нужен опытный взгляд — обращайтесь в Maximus Media. Мы проведем аудит вашего сайта с помощью Вебвизора, найдем точки потери конверсии и подготовим план исправлений с приоритетами. Часто одна сессия аудита окупается за первую неделю после внедрения правок. Результат: среднее увеличение конверсии после нашего UX-аудита — +35% за первый месяц.
Мы используем cookies для улучшения вашего опыта на сайте. Для продолжения, пожалуйста, примите нашу политику обработки cookies.
Маркетинговое агентство полного цикла
Маркетинговое агентство полного цикла