Как это работает: технология, разрешения и ограничения

1. Почему мы не записываем видео

Частое заблуждение: инструменты визуальной аналитики записывают обычные видеофайлы (MP4 или WebM) экрана посетителя. Это требовало бы огромного трафика, сильно замедляло сайт и давало размытый нечитаемый текст.

Вместо этого MousePlayer использует лёгкую технологию телеметрии снимков DOM. Вот основные принципы:

Снимок-чертёж

При открытии страницы скрипт делает текстовый «чертёж» HTML и стилей. Записывает расположение элементов, не копируя файлы изображений и видео; плеер загружает изображения по исходным адресам при воспроизведении. Исключение — canvas, содержимое которого передаётся картинкой (ниже).

Телеметрия координат

При взаимодействии записывается поток событий: позиции мыши, глубина прокрутки, цели кликов и размеры браузера, а также изменения страницы и, по настройкам, сообщения консоли, неудачные или медленные запросы и показатели загрузки (Web Vitals). Движения и клики малы; снимки и изменения страницы могут быть значительно объёмнее и передаются сжатыми.

Воспроизведение в театре

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

Создан для лёгкой работы: скрипт загружается асинхронно и передаёт небольшие числовые точки вместо видео, сохраняя малый собственный расход. Влияние на Core Web Vitals зависит от страниц, хостинга и сети посетителя: измеряйте на своём сайте, не полагаясь на наше число. Конкретная скорость загрузки не гарантируется – см. раздел 20 Условий использования.

2. Разрешения экранов & мобильные устройства

Сегодня пользуются всем: от компактных смартфонов до сверхшироких мониторов 4K. Сайты автоматически сдвигают, сворачивают и перестраивают макеты под ширину экрана — это адаптивный веб-дизайн.

Как мы воспроизводим точную область просмотра

Чтобы избежать искажений, MousePlayer записывает точные размеры области просмотра (например, 390x844 для смартфона или 1920x1080 для монитора). При открытии плеера театра движок создаёт масштабированную изолированную среду с исходными пропорциями экрана посетителя.

Компьютеры & ноутбуки

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

Смартфоны & планшеты

У сенсорных экранов нет наведённого указателя мыши. MousePlayer адаптируется, записывая касания, прокрутку жестами и изменения ориентации (портретная и альбомная).

Изменение размера посреди сеанса

Если посетитель поворачивает планшет или меняет размер окна, макет меняется. MousePlayer записывает эти события и плавно корректирует область воспроизведения на лету, сохраняя контекст взаимодействия.

3. Ограничения системы & технические границы

Для конфиденциальности пользователей, безопасности браузера и быстрой обработки MousePlayer действует в определённых технических границах:

Граница системы	Как действует MousePlayer
iFrames	iframe с тем же источником, что страница, записываются с содержимым и взаимодействиями. Встраивания другого источника (YouTube, формы Stripe) нельзя записать изнутри из-за политики браузера Same-Origin Policy; в записи это заглушки, и там они не загружаются.
Конфиденциальные поля ввода (PII)	Пароли и платёжные поля скрываются на устройстве посетителя при любом уровне, а полное маскирование ввода — стандарт для всех ресурсов. Видно факт ввода, но не текст. Два ограничения: ослабленные уровни включаются лишь с нашим письменным одобрением, а маскирование не затрагивает напечатанное самой страницей в документ – страница подтверждения с адресом входит в снимок. Оба условия описаны в DPA.
Элементы Canvas & WebGL	Содержимое canvas записывается картинкой со снимком страницы и при изменении, не чаще примерно раза в секунду и с ограничением размера. Поэтому плавная анимация выглядит серией кадров. В скрытых областях и canvas с изображениями другого источника картинки не передаются; WebGL может оставаться пустым.
Веб-компоненты (Shadow DOM)	Открытые теневые корни записываются с содержимым. Закрытые недоступны скриптам; их содержимого в записи нет.
Передача & хранилище браузера	Данные передаются по зашифрованному WebSocket (HTTPS/WSS). Если соединение невозможно, например из-за прокси, скрипт использует зашифрованный HTTP; очень большие снимки отправляются отдельно по HTTPS. MousePlayer не ставит cookie, используя local storage и session storage браузера на вашем сайте.
Периоды неактивности AFK	Если посетитель оставит вкладку и уйдёт на 20 минут, движок распознает неактивность и сожмёт паузу при воспроизведении, чтобы не тратить время на неподвижный экран.

Чем мы можем помочь?