Jak działa MousePlayer

Przystępny przewodnik po naszej architekturze śledzenia, obsłudze różnych rozdzielczości ekranu oraz ograniczeniach systemowych.

1. Dlaczego nie nagrywamy tradycyjnego wideo?

Częstym błędnym przekonaniem jest to, że narzędzia analityki wizualnej nagrywają standardowy film (np. w formacie MP4 lub WebM) z ekranu odwiedzającego. Takie podejście zużywałoby gigantyczne ilości transferu, drastycznie spowalniało ładowanie strony i generowało niewyraźny, rozmyty obraz.

Zamiast tego MousePlayer wykorzystuje lekką technologię telemetrii zrzutów DOM (DOM Snapshot Telemetry). Oto jak działa to od podstaw:

Cyfrowy plan struktury

Gdy użytkownik otwiera stronę, nasz skrypt tworzy lekki, tekstowy „plan” struktury HTML i stylów CSS. Rejestruje układ elementów bez kopiowania plików graficznych i wideo Twojej strony; obrazy odtwarzacz wczytuje podczas odtwarzania z ich oryginalnego adresu. Wyjątkiem są elementy canvas, których zawartość przesyłana jest jako obraz (zob. niżej).

Strumień współrzędnych

Podczas interakcji użytkownika zapisujemy strumień zdarzeń: pozycje kursora myszy, głębokość skrolowania, kliknięcia i zmiany rozmiaru okna, a także zmiany samej strony oraz – zależnie od ustawień – komunikaty konsoli, nieudane lub wolne żądania i pomiary czasu ładowania (Web Vitals). Ruchy i kliknięcia są niewielkie; zrzuty i zmiany strony mogą być – zależnie od strony – znacznie większe i są przesyłane w postaci skompresowanej.

Odtwarzacz kinowy (Theatre)

Gdy oglądasz nagranie w panelu, odtwarzacz odbudowuje stronę na podstawie zapisanego planu i porusza po niej wirtualnym kursorem w czasie rzeczywistym, zachowując ostrość czcionek.

Zbudowany tak, aby był lekki: skrypt ładuje się asynchronicznie i przesyła małe pakiety danych liczbowych zamiast wideo, dzięki czemu jego własny ślad pozostaje niewielki. Co to oznacza dla Twoich wskaźników Core Web Vitals, zależy od Twoich stron, hostingu i sieci odwiedzającego – zmierz to na własnej witrynie, zamiast przyjmować liczbę od nas. Określona szybkość ładowania nie jest zapewniana; zobacz pkt 20 Regulaminu.

2. Obsługa rozdzielczości ekranu i urządzeń mobilnych

Współcześni użytkownicy przeglądają internet na najróżniejszych sprzętach – od małych smartfonów po szerokie monitory 4K. Strony internetowe automatycznie zmieniają układ, zwijają kolumny i przemieszczają elementy, aby dopasować się do szerokości ekranu (Responsive Web Design).

Jak dopasowujemy się do dokładnego ekranu gościa

Aby nagranie nie było zniekształcone, MousePlayer precyzyjnie zapisuje wymiary obszaru roboczego (tzw. viewport, np. 390x844 dla smartfona lub 1920x1080 dla monitora). Odtwarzacz Theatre automatycznie buduje wyskalowaną ramkę, która idealnie odzwierciedla oryginalne proporcje ekranu użytkownika.

Komputery stacjonarne i laptopy

Na tradycyjnych komputerach rejestrujemy ciągłe ścieżki ruchu myszy oraz nawigację w wielu kartach tej samej sesji. Menu rozwijane po najechaniu kursorem pojawiają się w odtworzeniu, jeżeli strona zmienia przy tym swój dokument; czysty efekt hover w CSS nie jest widoczny w dokumencie i nie jest odtwarzany.

Smartfony i tablety

Ekrany dotykowe nie posiadają kursora myszy. MousePlayer automatycznie dostosowuje się do środowiska mobilnego, rejestrując gesty dotknięć (tap), przewijanie palcem oraz zmiany orientacji (pion/poziom).

Wyzwanie zmiany rozmiaru okna w trakcie sesji

Jeśli użytkownik obróci tablet lub zmieni szerokość okna przeglądarki na komputerze w trakcie wizyty, układ strony zmieni się dynamicznie. MousePlayer wykrywa te zdarzenia i w lot dopasowuje obszar odtwarzacza, aby zachować kontekst interakcji.

3. Limity systemowe i granice techniczne

W trosce o prywatność użytkowników, bezpieczeństwo przeglądarek oraz optymalną prędkość przetwarzania, MousePlayer działa w określonych ramach technicznych:

Granica systemowa Jak obsługuje to MousePlayer
Ramki iFrame Ramki iframe z tego samego źródła co Twoja strona są nagrywane wraz z zawartością i obsługą wewnątrz nich. Treści osadzone z innego źródła (np. odtwarzacze YouTube, formularze płatności Stripe) nie mogą być nagrywane od wewnątrz ze względu na politykę bezpieczeństwa przeglądarek (Same-Origin Policy); w odtwarzaniu pojawiają się jako bloki zastępcze i nie są tam wczytywane.
Pola z danymi wrażliwymi (PII) Pola haseł i danych płatniczych są maskowane na urządzeniu odwiedzającego na każdym poziomie maskowania, a pełne maskowanie wszystkich wpisów formularzy jest ustawieniem domyślnym każdego projektu. Widzisz sam fakt pisania, nie jego treść. Obowiązują dwie granice: dwa słabsze poziomy włączamy wyłącznie po pisemnej zgodzie, a maskowanie nigdy nie sięga tego, co Twoja strona sama wypisuje do dokumentu – strona potwierdzenia z adresem jest częścią obrazu. Oba opisuje DPA.
Animacje Canvas i WebGL Zawartość elementu canvas jest nagrywana jako obraz: raz wraz ze zrzutem strony, a potem ponownie przy każdej zmianie, najwyżej mniej więcej raz na sekundę i z ograniczonym rozmiarem. Płynne animacje widać więc jako sekwencję klatek. W obszarach maskowanych oraz dla elementów canvas zawierających obrazy z innego źródła obraz nie jest przesyłany; treści WebGL mogą pozostać puste.
Komponenty webowe (Shadow DOM) Otwarte shadow rooty są nagrywane wraz z zawartością. Zamknięte shadow rooty są niedostępne dla skryptów; ich zawartości brakuje w odtwarzaniu.
Przesyłanie i pamięć przeglądarki Dane są przesyłane szyfrowanym połączeniem WebSocket (HTTPS/WSS). Jeśli nie da się go nawiązać, np. z powodu serwera proxy, skrypt przechodzi na szyfrowaną drogę HTTP; bardzo duże zrzuty strony są wysyłane osobno przez HTTPS. MousePlayer nie ustawia plików cookie; korzysta z pamięci lokalnej i pamięci sesji przeglądarki na Twojej stronie.
Długie okresy bezczynności (AFK) Jeśli użytkownik zostawi otwartą kartę i odejdzie od komputera na 20 minut, nasz silnik wykryje brak aktywności i skompresuje ten czas podczas odtwarzania, abyś nie tracił czasu na oglądanie statycznego ekranu.