Настройка записи контента сайта с помощью Вебвизора

В этой публикации детально разбираются примеры настроек, относящихся к записи контента сайта с помощью Вебвизора 2.0, включая, содержимое отдельных полей и различных элементов сайта с помощью классов ym-record-keys, ym-disable-keys, ym-hide-content и ym-show-content, а также iframe.

Вебвизор 2.0

Вебвизор - это инструмент, который регистрирует различные действия посетителей на вашем сайте (просмотры страниц, достижения целей, движения курсора мыши, клики по кнопкам, ссылкам, прокрутку страниц, нажатие на клавиатуру, заполнение полей форм и другие события) и показывает их в Яндекс.Метрике в формате видео.

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

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

Первая версия Вебвизора появилась в Яндекс.Метрике в 2011 году, а в 2016 году произошло его обновление до версии Вебвизор 2.0. Он стал работать без каких-либо дополнительных настроек. Активировав Вебвизор 2.0 при настройке счетчика, он будет корректно записывать:

• контент, который подгружается динамически, без перезагрузки страницы (изменения DOM-дерева страницы), включая персонализированный контент для конкретного посетителя или группы пользователей + данные сайтов Single Page Application (SPA);
• информацию от подключаемых к сайту сторонних сервисов (онлайн-чаты, скрипты и блоки рекомендуемых товаров и т.д.);
• переходы с мобильных устройств;
• отображение страницы при повороте экрана, визуальное представление (контуры телефона и планшета).

Однако, помимо активации опции Вебвизор, карта скроллинга, аналитика форм, в Яндекс.Метрике существует еще две настройки Вебвизора, которые активны по умолчанию после установки счетчика вне зависимости от того, включили ли вы его или нет:

1. Вебвизор 2.0
2. Записывать все поля

Они находятся в настройках счетчика на вкладке Вебвизор. Но если включение опции Вебвизор 2.0 (последней версии) понятно исходя из описания его функционала, то что такое Записывать все поля? Как работает эта функция в случае ее включения и отключения? Давайте разбираться.

Требования и ограничения Вебвизора 2.0

Когда вы просматриваете запись, ее содержимое может отличаться от отображения сайта в этот момент, так как Вебвизор записывает HTML-содержимое сайта на момент визита, а не на момент просмотра записи.

• Вебвизор не записывает содержимое сайта, если оно отображается с помощью элемента canvas.
• Данные Вебвизора в Яндекс.Метрике хранятся 15 дней, включая текущий день;
• Вебвизор не записывает содержимое HTML-элементов audio и video и взаимодействие с ним посетителя, если внутри этих элементов изменяются объекты Audio и Video;
• Вебвизор не поддерживает Flash-контент и не может корректно обрабатывать записи сайтов с таким содержимым;
• Вебвизор не поддерживает технологии Shadow DOM;
• Вебвизор записывает посещения в большинстве современных браузеров для компьютера: Яндекс Браузер, Google Chrome, Firefox, Safari, Opera, Microsoft Edge. Ограниченно поддерживается запись в бета-версиях и некоторых мобильных браузерах. Также ограниченно могут записываться и воспроизводиться посещения в любой версии Internet Explorer. Разные браузеры могут обрабатывать одну и ту же страницу по-разному. Поэтому чтобы наиболее точно воспроизвести посещение, используйте тот же браузер, в котором оно изначально было записано;
• Если на сайте используются рантайм-стили (стили, которые генерируются в момент загрузки страницы, в том числе из серии Data Styled Components), то Вебвизор не запишет или запишет некорректно визиты;
• Вебвизор не имеет возможности обрабатывать медиафайлы формата WebP;
• Вебвизор может некорректно записывать информацию о вкладках в приватном режиме браузера (например, Инкогнито в Яндекс Браузере);
• Вебвизор может неточно записывать посещения на страницах с версткой, не соответствующей стандартам W3C;
• Метрика может некорректно обработать некоторые медиа-запросы.

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

Существует несколько вариантов управления записями содержимого сайта:

• запись отдельных полей для ввода в ваших формах на сайте (как правило, это HTML-элементы textarea и input);
• запись любых других элементов (кнопки, блоки, абзацы, изображения и другие HTML-элементы на странице).

Запись всех полей для ввода

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

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

Вот так выглядит запись моего визита и значения полей во время заполнения формы на тестовом сайте graphanalytics.ru:

При этом опция Записывать все поля в настройках счетчика была активна. Как видите, Вебвизор скрыл конфиденциальную информацию (поле Имя, Телефон и E-mail) и записал только значение одного поля Ссылка на сайт или мобильное приложение, которое не является приватным.

Не записывать все поля

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

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

Таким образом, если у вас включена опция Записывать все поля в настройках счетчика Яндекс.Метрики, то Вебвизор будет записывать и отображать в видео значения всех полей, за исключением конфиденциальной информации пользователя. Но если вы выключаете опцию Записывать все поля, тогда Вебвизор содержимое всех полей textarea и input заменит на звездочки.

Однако есть еще несколько настроек, о которых, возможно, вы не знали.

Разрешить запись отдельных полей (ym-record-keys)

Если вы не хотите записывать все поля, а желаете регистрировать значения только конкретных полей формы, то вы можете использовать специальный класс Вебвизора ym-record-keys для выбранного HTML-элемента. Для этого в исходном коде сайта вам надо прометить это поле специальной конструкцией, предварительно отключив опцию Записывать все поля в настройках счетчика Метрики.

В качестве примера разберем форму на тестовом сайте graphanalytics.ru. Для формы бесплатного аудита, которую я заполнял ранее, для всех полей формы, включая имя, телефон, e-mail и сайт, я укажу специальный класс ym-record-keys. Чтобы это сделать, вам необходимо иметь доступ к исходному коду страницы и этой формы, а также обладать навыками работы с HTML/CSS и знать, что такое CSS-селекторы.

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

Итак, для того, чтобы отслеживать содержимое конкретных полей формы, вам нужно добавить специальный класс ym-record-keys в этот элемент. Например, чтобы отслеживать значение поля Имя в форме, необходимо найти код этого HTML-элемента и добавить дополнительно к нему новый класс. Чтобы увидеть, как вообще выглядеть тот или иной элемент в структуре DOM-дерева, вы можете воспользоваться консолью разработчика (клавиша F12 для Google Chrome или вызов контекстного меню правой кнопкой мыши - Просмотреть код) и вкладкой Elements. Выделив нужное поле мышкой, вы увидите как оно подсветится:

Именно в эту часть кода требуется добавить класс ym-record-keys. Для этого у вас должен быть доступ к хостингу и возможность редактировать HTML.

Примечание: класс ym-record-keys необходимо использовать для HTML-элементов textarea и input.

Поскольку все поля формы являются input'ами, то мы можем это сделать. Найдя в исходном коде страницы этого сайта нужный элемент, я добавил класс ym-record-keys к полю Имя. Выглядит это так:

Если у вас в элементе уже присутствует class, то поставьте пробел после последнего значения и в самом конце допишите ym-record-keys. Если у записываемого вами поля нет класса (class), тогда вам необходимо прописать его вручную, добавив к input или textarea конструкцию:

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

Сохранив изменения, я обновил исходный код, загрузив новую версию страницы на хостинг. А открыв повторно консоль разработчика, убедился, что в текущем поле присутствует новый класс ym-record-keys:

Вебвизор после регистрации визита показал информацию как нужно:

Поскольку опция Записывать все поля в настройках счетчика выключена, все остальные поля он отобразил звездочками. А поле Имя, в котором был добавлен специальный класс ym-record-keys, он записал без шифрования, как нужно, даже несмотря на то, что имя пользователя является конфиденциальными данными. Приоритет был отдан именно классу ym-record-keys, который задается вручную.

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

Заполнив еще раз форму, Вебвизор отобразил в Яндекс.Метрике визит с таким содержимым:

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

Таким образом, Вебвизор будет записывать поля, отмеченные классом ym-record-keys, кроме полей для ввода пароля (<input type="password" ...>). Содержимое полей, не отмеченных классом ym-record-keys, заменится на звездочки.

Запретить запись отдельных полей (ym-disable-keys)

Если вы не хотите запрещать отслеживание всех полей, а желаете сделать это только для конкретных, то вы можете использовать другой специальный класс Вебвизора ym-disable-keys. Для этого в исходном коде сайта вам надо прометить это поле специальной конструкцией, предварительно включив опцию Записывать все поля в настройках счетчика Метрики.

В качестве примера оставим для всех полей из предыдущего отслеживания класс ym-record-keys, а ym-disable-keys добавим только к полю E-mail, чтобы запретить его отслеживание:

Таким образом, Вебвизор должен записать содержимое поля Имя, Сайт и Телефон, а поле E-mail отметить звездочками:

Если при активной опции Записывать все поля Метрика ошибочно определила поле конфиденциальным, отметьте вручную это поле классом ym-record-keys.

Запрет записи других элементов сайта (ym-hide-content)

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

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

В качестве примера на тестовом проекте graphanalytics.ru рассмотрим окно онлайн-чата JivoSite, которое по умолчанию в Вебвизоре будет отображаться со всем содержимым, включая весь блок и текстовые сообщения, введенные в нем. Если пользователь обращается к вам в чат, то и само окно, и его обращение будет записано в Вебвизоре:

Но если вы хотите сделать запрет на запись данных онлайн-чата (чтобы они не отображались в Вебвизоре), то вы можете добавить класс ym-hide-content к коду JivoSite. Просто вставьте скрипт JivoSite в HTML-элемент div и назначьте ему специальный класс. В результате конструкция кода будет выглядеть так:

А в самом коде страницы:

Вебвизор не запишет содержимое, которое будут вводить пользователи в чате - контент будет отображаться со звездочками:

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

Поэтому в качестве примера рассмотрим другой запрет на запись содержимого. Пусть на сайте graphanalytics.ru это будет целый блок с информацией о моей электронной книге Google Analytics.

В исходном коде страницы необходимо найти родительский элемент, отвечающий за весь блок с содержимым, и назначить ему класс ym-hide-content:

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

Так оно и есть на самом деле:

Разрешить запись других отдельных элементов сайта (ym-show-content)

Иногда может возникнуть противоположная ситуация, когда необходимо записать отдельные элементы, размещенные внутри элемента, скрытого с помощью ym-hide-content. Например, так вы можете управлять записью блока с отзывами на сайте: скрыть имя пользователя и аватар, но записать текст отзыва. В результате аватар заменится на серый блок, имя пользователя заменится на произвольный набор символов и будет размытым, а текст отзыва запишется так, как видел его посетитель сайта во время визита (пример из документации Яндекса).

Если вы хотите разрешить запись произвольного элемента, который не является полем для ввода, внутри скрытого элемента, выполните следующее:

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

В качестве примера добавим класс ym-show-content отдельно для кнопки СКАЧАТЬ, находящейся в блоке с электронной книгой Google Analytics. Сам блок при этом будет иметь тот же класс ym-hide-content:

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

Если внутри элемента, скрытого с помощью ym-hide-content, находится поле для ввода (например, на сайте есть блок с отзывом и ему задан ym-hide-content, а внутри этого блока находится форма для ввода отзыва), то Вебвизор не запишет эту информацию (блок отзывов), а содержимое полей заменится на звездочки. Чтобы Вебвизор записал содержимое поля, задайте для него класс ym-show-content. Если во время записи визита Метрика распознает поле как конфиденциальное, то его содержимое заменится на звездочки.

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

Запись содержимого iframe

Вебвизор 2.0 поддерживает запись содержимого, которое встроено на сайт с помощью элемента iframe. Iframe - веб-сайт (страница, документ или конкретный элемент), который загружается внутри другого веб-сайта. Тег <iframe> используется, преимущественно, для встраивания другого HTML-документа в текущий. Поскольку не все решения, которые существуют на рынке, необходимо разрабатывать с нуля, мы можем взять уже готовое и внедрить к себе на сайт через iframe. Это безопасный способ для ваших пользователей взаимодействовать со сторонними веб-сайтами, не покидая ваш сайт.

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

Можно ли отслеживать действия в iframe? Все зависит от того, есть ли у вас доступ к этому iframe или нет. Поэтому существует всего два варианта:

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

Итак, Вебвизор 2.0 поддерживает запись содержимого, встроенного с помощью iframe, но при соблюдении одного из следующих условий

• если домены родительского и дочернего окон совпадают;
• если домены родительского и дочернего окон не совпадают.

Если домены родительского и дочернего окон совпадают

Например, на сайте graphanalytics.ru контент одного из блоков размещен в iframe:

При этом данный контент находится на том же домене, что и основной сайт, то есть домены родительского и дочернего окон совпадают. Это можно определить по атрибуту src внутри iframe и соответствующей ссылке, в которой указан тот же домен graphanalytics.ru:

При настройках по умолчанию даже в таком случае Вебвизор не сможет корректно записать содержимое контента iframe, и в записи самой Метрики будет отображаться такая надпись:

Но раз контент iframe находится на том же, что и сам сайт, значит у вас есть доступ ко всему содержимому. И вы можете изменить текущие настройки записи Вебвизора, чтобы отображение содержимого внутри фрейма поддерживалось. Для этого на родительском домене (основном сайте) должен быть установлен счетчик Яндекс.Метрики с включенным в настройках Вебвизором 2.0. При этом в дочернем окне (в iframe) счетчик необязателен, или в нем может быть установлен другой счетчик.

В код счетчика, который установлен в родительском окне, добавьте параметр childIframe:true (по умолчанию он принимает значение false):

, где XXXXXX - номер вашего счетчика Яндекс.Метрики.

Если ваш код Яндекс.Метрики установлен через Google Tag Manager, то параметр childIframe:true добавьте в контейнере:

Не забудьте сохранить изменения и опубликовать контейнер.

После этого Вебвизор корректно зафиксирует содержимое iframe:

Если домены родительского и дочернего окон не совпадают

Например, на сайте graphanalytics.ru в самом низу страницы добавлена карта Google Maps:

Она размещена через iframe и домен родительского окна graphanalytics.ru не совпадает с дочерним окном Google, поскольку эти карты размещаются через домен google.com:

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

Когда у вас есть доступ к исходному коду iframe -> вы можете отслеживать события и записывать Вебвизором то, что происходит внутри него. Но поскольку внутрь Google Maps вы не имеете возможности вставить код счетчика Яндекс.Метрики, чтобы начать регистрировать события, то и действия внутри такого iframe Вебвизор записывать не будет.

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

Но давайте предположим, что у нас есть доступ к стороннему домену (другому сайту), на котором размещен контент, который через iframe добавлен на страницу graphanalytics.ru. В качестве примера разберем блок с формой консультации:

При этом данный контент находится на другом (стороннем) домене, который отличается от основного сайта, то есть домены родительского и дочернего окон не совпадают. Это можно определить по атрибуту src внутри iframe и соответствующей ссылке, в которой указан другой домен (не graphanalytics.ru):

При настройках по умолчанию Вебвизор не сможет корректно записать содержимое контента iframe, и в записи самой Метрики не будет ничего отображаться:

Чтобы это исправить, сделайте следующее:

• в дочернее окно (в моем примере - mylittlewish.ru) добавьте тот же код Яндекс.Метрики, что установлен и на основном домене (graphanalytics.ru);
• в код счетчика, установленного в дочернем окне (в моем примере - mylittlewish.ru), добавьте параметр trustedDomains:

, где:

• XXXXXX - номер вашего счетчика Яндекс.Метрики;
• example.com - домен родительского окна (в моем примере - graphanalytics.ru).

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

В коде дочернего окна это будет выглядеть так:

Если ваш код Яндекс.Метрики установлен через Google Tag Manager, то параметр trustedDomains добавьте там. Не забудьте сохранить изменения и опубликовать контейнер.

После этого Вебвизор начнет записывать содержимое iframe даже на стороннем домене:

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