Як працює MousePlayer
Простий посібник з архітектури відстеження, роботи з розмірами екранів на різних пристроях та обмежень системи.
1. Чому ми не використовуємо відеозапис
Поширена помилка — вважати, що візуальна аналітика записує екран відвідувача у звичайні відеофайли MP4 чи WebM. Це потребувало б величезного трафіку, різко сповільнювало сайт і створювало розмитий нечитабельний текст.
Натомість MousePlayer використовує легку технологію телеметрії знімків DOM. Ось як вона працює на базовому рівні:
Знімок-схема
Коли відвідувач відкриває сторінку, скрипт знімає текстову «схему» HTML і структури стилів. Записує розташування елементів без копіювання файлів зображень чи відео; під час відтворення плеєр завантажує зображення з початкової адреси. Виняток — елементи canvas, вміст яких передається зображенням (див. нижче).
Телеметрія координат
Під час взаємодії ми записуємо потік подій: позиції миші, глибину прокручування, цілі кліків і зміну розміру браузера, а також зміни сторінки й залежно від налаштувань повідомлення консолі, невдалі чи повільні запити та вимірювання завантаження (Web Vitals). Рухи й кліки малі; знімки й зміни сторінки можуть бути значно більшими залежно від сторінки й передаються стисненими.
Відтворення в театральному режимі
Коли ви дивитеся сеанс на панелі показників, плеєр відтворює сторінку із записаної схеми й рухає віртуальний вказівник наживо, залишаючи текст чітким.
Створено залишатися легким: скрипт завантажується асинхронно й передає малі числові точки замість відео, тож власне навантаження невелике. Вплив на Core Web Vitals залежить від сторінок, хостингу та мережі відвідувача, тому вимірюйте на своєму сайті, а не беріть число від нас. Конкретної швидкості завантаження не гарантовано – див. розділ 20 Умов надання послуг.
2. Робота з роздільністю екрана & мобільними пристроями
Сьогодні переглядають усе — від компактних смартфонів до надшироких настільних 4K-моніторів. Сайти автоматично зсувають, згортають і перебудовують макети під різну ширину — це адаптивний вебдизайн.
Як ми відтворюємо точну область перегляду відвідувача
Щоб уникнути спотворень, MousePlayer записує точні розміри області перегляду (наприклад, 390x844 для смартфона або 1920x1080 для настільного монітора). Коли ви відкриваєте театральний плеєр, рушій створює масштабоване ізольоване середовище, що точно повторює початкове співвідношення екрана.
Настільні комп’ютери & ноутбуки
На звичайних комп’ютерах ми записуємо безперервний рух миші й переходи між вкладками одного сеансу браузера. Меню за наведенням видно, якщо при цьому сторінка змінює документ; суто CSS-ефект наведення не видно в документі, і він не відтворюється.
Смартфони & планшети
Сенсорні екрани не мають вказівника миші з наведенням. MousePlayer автоматично пристосовується, записуючи дотики, прокручування свайпом і зміну орієнтації (портретна чи альбомна).
Зміна розміру посеред сеансу
Якщо відвідувач повертає планшет або змінює розмір браузера посеред сеансу, макет змінюється динамічно. MousePlayer записує ці зміни вікна й плавно коригує полотно відтворення на льоту, зберігаючи контекст взаємодії.
3. Межі системи & технічні обмеження
Для приватності, безпеки браузера й швидкої обробки даних MousePlayer працює в певних технічних межах:
| Межа системи | Як MousePlayer її обробляє |
|---|---|
| iFrames | iframe того самого джерела, що й сторінка, записуються разом із вмістом і взаємодією. Убудований вміст іншого джерела (наприклад, YouTube чи платіжні форми Stripe) не можна записати всередині через політики безпеки браузера (Same-Origin Policy); у відтворенні він є заповнювачем і не завантажується. |
| Чутливі поля введення (PII) | Паролі й платіжні поля маскуються на пристрої відвідувача на кожному рівні; повне маскування форм типове для кожного сайту. Видно факт введення, а не текст. Є дві межі: два слабші рівні вмикаються лише за нашого письмового схвалення, а маскування не охоплює те, що сам сайт виводить у документ – сторінка підтвердження з адресою входить до знімка. Обидві межі описано в угоді про обробку даних. |
| Елементи Canvas & WebGL | Вміст canvas записується як зображення: зі знімком сторінки й щоразу за зміни, максимум приблизно раз на секунду та з обмеженням розміру. Тому плавна анімація виглядає як послідовність кадрів. У маскованих ділянках і canvas із зображеннями іншого джерела зображення не передається; WebGL може залишитися порожнім. |
| Вебкомпоненти (Shadow DOM) | Відкриті тіньові корені записуються з вмістом. Закриті недоступні скриптам; їхнього вмісту немає у відтворенні. |
| Передавання & сховище браузера | Дані надсилаються зашифрованим WebSocket-з’єднанням (HTTPS/WSS). Якщо його не встановити, наприклад через проксі, скрипт переходить на зашифрований HTTP-маршрут; дуже великі знімки окремо завантажуються через HTTPS. MousePlayer не встановлює cookie; використовує локальне й сеансове сховище браузера на вашому сайті. |
| Періоди неактивності AFK | Якщо відвідувач залишить вкладку й піде на 20 хвилин, рушій автоматично виявить неактивність і стисне проміжок у відтворенні, щоб ви не витрачали час на нерухомі екрани. |