Как сделать свой вебвизор

Добавил пользователь Cypher
Обновлено: 05.10.2024

Качественная веб-аналитика — важная часть интернет-маркетинга. Без неё невозможно до конца понять, почему покупают именно у нас и где мы теряем клиентов. Вебвизор частично решает эту проблему и позволяет посмотреть на свой сайт глазами посетителей.

Для справки Webvisor — один из инструментов Яндекс.Метрики. Как установить и настроить Метрику, мы уже писали. Сегодня расскажем о том, как включить и настроить Вебвизор в Яндекс.Метрике. Как смотреть записи и что на них можно увидеть. А также почему Вебвизор может не работать или не записывать отдельные элементы страницы.

Более 2000 рекламных агентств и фрилансеров уже работают с сервисом.
Подключиться можно самому за 1 день.
Зарабатывайте с первого потраченного рубля, без начальных ограничений, без входного барьера.
Выплаты на WebMoney, на карту физическому лицу, реинвестирование в рекламу.
У вас остаются прямые доступы в рекламные кабинеты, рай для бухгалтерии по документообороту и оплатам.

Вебвизор — что это такое и что записывает

Вебвизор — инструмент, который записывает на видео посещения Вашего сайта. Видеозаписи посещения можно посмотреть в счётчике Метрики. Записи хранятся не более 15 дней, а в течении суток записывается не более 120 000 визитов.

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

Вебвизор записывает визиты, независим от того, с какого устройства пользователь смотрит сайт — с мобильного или ПК. Записывается видимая область экрана. При воспроизведении вы будете видеть в точности то, что видел посетитель сайта.

Зайдя в раздел Вебвизор в Яндекс.Метрике Вы увидите примерно следующее.

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

Как включить и настроить Вебвизор в Яндекс.Метрике

При создании счётчика в Яндекс.Метрике, Вебвизор по умолчанию выключен. Поэтом, перед тем, как приступить к его настройке, нужно его включить.

Обратите внимание! При включение Вебвизора или изменении его настроек, в уже существующем счётчике, нужно заново установить код на сайт. Это необходимо, потому что при изменении настроек, обновится и код счётчика.

Как посмотреть записи в Вебвизоре

Чтобы запустить воспроизведение, нажимаем на кнопку Play и в всплывающем окне открывается запись.

Навигация по Webvisor Yandex

1. Оставить/воспроизвести
2. Включить заново
3. Перейти к следующему/предыдущему видео
4. Хронология записи (цветами отмечается активность или отсутствие активности)
5. Ускорить/замедлить воспроизведение
6. Выбор страницы для анализа
7. Флажок — это добавить в избранное
8. Посмотреть данные по визиту
9. Показать нажатие клавиш на странице

Как анализировать поведение пользователей

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

В первую очередь обратите внимание на поведение посетителей на ключевых страницах сайта. Это страницы, на которых посетитель осуществляет ключевое действие (цель из Метрики) или принимает важное решение

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

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

Почему не работает Вебвизор

Проблема 1. Не работает вебвизор в етрике по причине блокировки.

Проблема 2. Запрет на показ страницы во фрейме.

Решение: Определить на каком уровне установлен запрет (сайт, сервер). Снять запрет. Обратите внимание, что снимая запрет, вы подвергаете свой сайт риску.

Примечание. Вебвизор может отключиться, если вы не просматривали записи в течение последних 6 месяцев. Чтобы возобновить запись визитов, включите опцию снова.

Настройка записи контента сайта

Вы можете управлять записью содержимого сайта:

Настройка записи полей для ввода данных

Вебвизор записывает действия посетителей на сайте, в том числе заполнение полей, например заполнение формы. При этом Яндекс.Метрика распознает поля, в которые посетитель может вводить конфиденциальную информацию, например имя и фамилию. Содержимое таких полей автоматически заменяется на звездочки.

Если вы не хотите, чтобы Вебвизор записывал содержимое полей, отключите опцию Записывать все поля на странице Настройка , на вкладке Вебвизор . После этого содержимое всех полей заменится на звездочки.

Также вы можете влиять на запись полей с помощью CSS-классов (атрибут class).

Название CSS-класса	Описание
ym-record-keys	Позволяет разрешить запись содержимого поля. Используйте этот класс для элементов textarea и input.
ym-disable-keys	Позволяет запретить запись содержимого поля. Используйте этот класс для элементов textarea и input. Содержимое поля заменится на звездочки.

Название CSS-класса	Описание
ym-record-keys	Позволяет разрешить запись содержимого поля. Используйте этот класс для элементов textarea и input.
ym-disable-keys	Позволяет запретить запись содержимого поля. Используйте этот класс для элементов textarea и input. Содержимое поля заменится на звездочки.

Вебвизор будет записывать поля, отмеченные CSS-классом ym-record-keys , кроме полей для ввода пароля. Содержимое полей, не отмеченных CSS-классом ym-record-keys заменится на звездочки.

Содержимое отмеченных CSS-классом ym-disable-keys полей заменится на звездочки.

Кроме этого, вы можете настраивать запись содержимого полей внутри скрытых от записи элементов сайта.

Настройка записи других элементов сайта

По умолчанию Вебвизор записывает все содержимое страниц сайта, кроме полей, в которые посетитель может вводить конфиденциальную информацию, например имя и фамилию. Вы можете влиять на запись контента сайта с помощью CSS-классов (атрибут class). Например, запретить запись содержимого окна чата. Правила, определенные для класса, срабатывают для самого элемента и всех дочерних элементов, если не указано другое.

Название CSS-класса	Описание
ym-hide-content	Позволяет запретить запись произвольного элемента сайта. Графический элемент будет отображаться серым, текст будет заменен на произвольный набор символов и отобразится размытым.
ym-show-content	Позволяет разрешить запись произвольного элемента сайта. Этот класс можно использовать только для тех элементов, которые расположены внутри элементов, отмеченных CSS-классом ym-hide-content .

Название CSS-класса	Описание
ym-hide-content	Позволяет запретить запись произвольного элемента сайта. Графический элемент будет отображаться серым, текст будет заменен на произвольный набор символов и отобразится размытым.
ym-show-content	Позволяет разрешить запись произвольного элемента сайта. Этот класс можно использовать только для тех элементов, которые расположены внутри элементов, отмеченных CSS-классом ym-hide-content .

Задайте CSS-класс ym-hide-content для элемента, содержимое которого не нужно записывать.

Вебвизор будет записывать все элементы сайта, кроме тех, которые отмечены CSS-классом ym-hide-content . Если классом отмечен графический блок, то он заменится на серый блок, если классом отмечен текст, он заменится на произвольный набор символов и будет отображаться размытым.

Разрешить запись отдельного элемента, размещенного внутри элемента, скрытого с помощью ym-hide-content

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

Например, для блока отзывов задан CSS-класс ym-hide-content , внутри этого блока находится форма для ввода отзыва. В этом случае Вебвизор не запишет блок отзывов, а содержимое полей заменится на звездочки.

Чтобы Вебвизор записал содержимое поля, задайте для него CSS-класс ym-show-content . Если во время записи визита Метрика распознает поле как конфиденциальное, то его содержимое заменится на звездочки.

Если вы задали для поля, расположенного внутри скрытого элемента, CSS-класс ym-record-keys , то содержимое поля также заменится на звездочки.

Выберите вопрос, чтобы найти решение.

Содержимое страницы в записи может отличаться от реального. Вероятно, на сайте часто меняются CSS. В этом случае добавьте в имена стилевых файлов хеш от содержимого. Тогда при изменении содержимого файла изменится его имя, например style.390b32d4d49d5e7d.css будет изменено на style.0c573d460df87d4de5a4.css . Это позволит Вебвизору при записи визита использовать именно тот стиль, который видит посетитель сайта.

Выполните следующие действия:

Проверьте настройки файрвола — возможно, они блокируют работу скрипта счетчика Метрики. Также счетчик может быть заблокирован расширением Adblock Plus .

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

Подключение

Настройка записи контента сайта

Вы можете управлять записью содержимого сайта:

Настройка записи полей для ввода данных

Также вы можете влиять на запись полей с помощью CSS-классов (атрибут class).

Название CSS-класса	Описание
ym-record-keys	Позволяет разрешить запись содержимого поля. Используйте этот класс для элементов textarea и input.
ym-disable-keys	Позволяет запретить запись содержимого поля. Используйте этот класс для элементов textarea и input. Содержимое поля заменится на звездочки.

Название CSS-класса	Описание
ym-record-keys	Позволяет разрешить запись содержимого поля. Используйте этот класс для элементов textarea и input.
ym-disable-keys	Позволяет запретить запись содержимого поля. Используйте этот класс для элементов textarea и input. Содержимое поля заменится на звездочки.

Содержимое отмеченных CSS-классом ym-disable-keys полей заменится на звездочки.

Кроме этого, вы можете настраивать запись содержимого полей внутри скрытых от записи элементов сайта.

Настройка записи других элементов сайта

Название CSS-класса	Описание
ym-hide-content	Позволяет запретить запись произвольного элемента сайта. Графический элемент будет отображаться серым, текст будет заменен на произвольный набор символов и отобразится размытым.
ym-show-content	Позволяет разрешить запись произвольного элемента сайта. Этот класс можно использовать только для тех элементов, которые расположены внутри элементов, отмеченных CSS-классом ym-hide-content .

Название CSS-класса	Описание
ym-hide-content	Позволяет запретить запись произвольного элемента сайта. Графический элемент будет отображаться серым, текст будет заменен на произвольный набор символов и отобразится размытым.
ym-show-content	Позволяет разрешить запись произвольного элемента сайта. Этот класс можно использовать только для тех элементов, которые расположены внутри элементов, отмеченных CSS-классом ym-hide-content .

Задайте CSS-класс ym-hide-content для элемента, содержимое которого не нужно записывать.

Разрешить запись отдельного элемента, размещенного внутри элемента, скрытого с помощью ym-hide-content

Создать сайт не такая сложная задача, а вот сделать его работающим, приносящим прибыль - другая. Даже имея хорошо работающий ресурс, всегда можно повысить его показатели. Проанализировать свой ресурс, увидеть недочеты позволяет Вебвизор. Это бесплатный инструмент, который входит в Яндекс.Метрику. Он поможет вам посмотреть сайт глазами пользователя. Так вы сможете найти технические ошибки, понять почему нет продаж или с чем связано резкое их сокращение и многое другое.

Есть несколько бесплатных инструментов, которые позволяют собрать определенную статистику с сайта. К таким инструментам относятся:

Знакомство с Вебвизором

Вебвизор позволяет записать действия юзеров в видео. Хранятся эти записи на Яндекс сервере. Владелец сайта в любое время может просмотреть эти записи в вебвизоре.

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

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

Также вебвизор позволяет просмотреть:

Клики. Куда именно заходил (кликал) пользователь при посещении сайта.
Ввод клавиатуры. Какие клавиши нажимает пользователь.
То, как заполняется форма. Иногда бывают случаи, когда пользователи интуитивно начинают сначала писать не имя, а телефон. Это позволяет сделать выводы об удобстве располагаемых полей для ввода и внести корректировки.
Прокрутку страниц, перемещение мышки. Позволяет узнать, какие блоки информации не интересны пользователям.
Для многостраничных сайтов можно просмотреть переходы по страницам.
Копирование информации.

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

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

Настройка Вебвизора

При настройте Яндекс Вебвизора следует знать, что:

В Метрике вебвизор позволяет записать за сутки 150 тысяч посещений. Данная информация хранится на сервисе в течение 2-х недель. Поэтому периодически рекомендуется выгружать отчет с результатами.
Сайт должен содержать кодировку UTF-8.

Чтобы установить вебвизор Яндекс Метрики, выполните следующее:

зарегистрируйтесь на Яндексе;
поставьте метрику;
включите вебвизор.

Рассмотрим как настроить вебвизор.

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

1. Запись страниц при просмотре посетителем

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

2. Список страниц для сохранения. Укажите страницы, которые вы хотите просматривать. Помните, код метрики должен присутствовать на всех страницах.

Инструкции для пользователей Яндекс Вебвизора

Рассмотрим примеры использования данных, собранных с помощью Вебвизора.

1. Продолжительные сеансы. Вам необходимо отсортировать пользователей по времени их нахождения на сайте и просмотреть активные сеансы. Вы сможете увидеть:

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

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

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

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

4. Незавершенные целевые действия пользователей. Это незаполненные формы, незаконченное бронирование и т. д. В данном случае надо просматривать не только аналитику форм, но и анализировать что оттолкнуло юзера от формы.

5. Оценка элементов навигации. Сюда можно отнести быструю навигацию по странице, страницы со слайдерами, меню и т. д.

6. Нахождение проблем на различных устройствах. Чтобы оценить существование проблемы, вам необходимо посмотреть время на сайте и выбрать отчеты (Яндекс.Метрика — Отчеты — Стандартные отчеты — Технологии — Браузеры, Разрешения дисплея, Операционные системы, Устройства). Это дает возможность найти проблему с определенным вебраузером или ОС. Чтобы увидеть саму проблему, необходимо установить фильтры Вебвизора и анализировать.

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

8. Вебвизор позволяет проанализировать поведение пользователей после того, как был редизайн ресурса. Если на вашем сайте большинство пользователей это новички, то вы сможете сразу можете увидеть эффект. Если же у вас большинство пользователей постоянные, то сложно сразу будет ответить на вопрос удобно ли им работать на таком ресурсе. Поэтому необходимо сравнивать KPI до и после изменений.

Не работает Вебвизор

Иногда бывает, что вебвизор не работает. Перечислим причины, из-за которых это может произойти:

Сайт закодирован не в UTF-8.
Код метрики с вебвизором расположен не на всех страницах ресурса.
Некоторые браузеры не отображают плеер вебвизора. Такие проблемы часто случаются с браузерами от Линукс.

Часто сбои работы вебвизора случаются из-за большой нагрузки на Яндекс. Он обрабатывает и хранить большие объемы данных. В связи с этим бывают небольшие перебои в работе. Если же у вас все в порядке, а система работает не корректно более 2 часов, вам следует обратиться в техподдержку Яндекса.

Минусом является то, что Яндекс Метрику можно использовать не везде. Например, в англоязычных странах не предпочитают данную разработку, так как она ведется в России и анализирует пользовательское поведение нашими сервисами. Также внедренная метрика в небольшие сайты, размещенные на дешевых хостингах США, влияет на загрузку сайта. Он начинает загружаться долго. Мы предлагаем использовать аналог, например, hotjar.

Сервисом можно пользоваться бесплатно до 2 000 пользовательских визитов за 24 часа. У сервиса есть платный тариф, стоимость которого не высока. Функции сервиса аналогичны функциям рассмотренных выше инструментов. Сервис позволяет вести ресурсы, ориентированные на европейские страны и Америку.

Начнем сначала

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

Отправляемся в настройки счетчика.

Рис. 1. Настройка вебвизора.

Собственно всё, что нужно сделать — поставить галочку у вебвизора, она еще добавить маааленькую строку кода в счетчик (подчеркнута на рисунке), ну и если код уже стоит, то ручками уже самим дописать. После чего нужно лишь только указать, каким образом ему сохранять записи (перемещаемся во вкладку Вебвизор):

Рис. 2. Настройка вебвизора. Часть вторая, заключительная.

Общее же ограничение — 1 000 записей в день, а по давности — всего две недели.

Куда смотреть?

И вот, что мы увидим:

Рис. 3. Таблица записей посещений.

По порядку:

Все это дело можно сортировать, по интересному вам столбцу, щелкнув на его название.

Смотрим записи

Для этого мы нажимаем на кнопочку Play и получаем:

Рис. 4. Просмотр записи.

Собственно вот — смотрим, как пользователи ведут себя на сайте. Делаем выводы, ставим гипотезы, работаем с контентом.

Читайте также: