Jak to funguje: technologie, rozlišení a limity

1. Proč nenahráváme video

Rozšířenou mylnou představou je, že nástroje vizuální analytiky nahrávají obrazovku návštěvníka jako běžné video (třeba MP4 nebo WebM). To by spotřebovalo obrovské množství dat, výrazně zpomalilo váš web a výsledkem by byl rozmazaný, nečitelný text.

MousePlayer místo toho používá odlehčenou technologii, které říkáme telemetrie snímků DOM. Takto funguje v základu:

Snímek plánu stránky

Když návštěvník otevře vaši stránku, náš skript pořídí textový „plán“ struktury vašeho HTML a stylů. Zaznamená, kde jsou jednotlivé prvky umístěné, aniž by kopíroval obrázky nebo videa vaší stránky; přehrávač při přehrávání načítá obrázky z jejich původní adresy. Výjimkou jsou prvky canvas, jejichž obsah se přenáší jako obrázek (viz níže).

Telemetrie souřadnic

Během interakce uživatele zaznamenáváme proud událostí: polohy myši, hloubku posunutí, cíle kliknutí a změny velikosti okna prohlížeče, k tomu změny samotné stránky a podle nastavení také zprávy z konzole, neúspěšné či pomalé požadavky a měření doby načítání (Web Vitals). Pohyby a kliknutí jsou malé; snímky stránky a změny stránky mohou být podle stránky podstatně větší a přenášejí se komprimované.

Přehrávání v režimu kina

Když si v dashboardu pustíte relaci, náš přehrávač sestaví stránku znovu podle zaznamenaného plánu a v reálném čase po ní pohybuje virtuálním kurzorem – text přitom zůstává dokonale ostrý.

Navrženo, aby zůstalo lehké: skript se načítá asynchronně a místo videa přenáší malé číselné údaje, takže sám o sobě zatěžuje stránku jen málo. Co to znamená pro vaše Core Web Vitals, závisí na vašich stránkách, hostingu a síti návštěvníka – změřte to proto na vlastním webu, místo abyste přebírali čísla od nás. Žádnou konkrétní rychlost načítání nezaručujeme – viz článek 20 Podmínek služby.

2. Rozlišení obrazovky & mobilní zařízení

Dnešní uživatelé prohlížejí web na všem od kompaktních chytrých telefonů po ultraširoké 4K monitory. Weby své rozvržení automaticky posouvají, skládají a přeskupují podle šířky obrazovky – tomuto přístupu se říká responzivní webdesign.

Jak přesně napodobujeme viewport návštěvníka

Aby přehrávání nevypadalo zkresleně, MousePlayer zaznamenává přesné rozměry viewportu návštěvníka (např. 390x844 u chytrého telefonu nebo 1920x1080 u monitoru). Když otevřete přehrávač v režimu kina, náš engine vytvoří zmenšené izolované prostředí, které přesně odpovídá původnímu poměru stran obrazovky návštěvníka.

Obrazovky počítačů & notebooků

Na běžných počítačích zaznamenáváme plynulý pohyb myši i přecházení mezi více kartami v rámci téže relace prohlížeče. Nabídky, které se otevírají při najetí myší, se v přehrávání objeví tam, kde stránka při tom mění svůj dokument; čistě CSS efekt při najetí myší v dokumentu vidět není, a proto se v přehrávání nezobrazí.

Chytré telefony & tablety

Dotykové obrazovky nemají kurzor myši, který by se nad stránkou vznášel. MousePlayer se automaticky přizpůsobí a zaznamenává klepnutí, posouvání tažením a změny orientace (na výšku a na šířku).

Změna velikosti během relace

Když návštěvník během relace otočí tablet nebo změní velikost okna prohlížeče na počítači, rozvržení webu se dynamicky změní. MousePlayer tyto změny velikosti okna zaznamená a plochu přehrávání plynule přizpůsobí, takže kontext interakce zůstane zachován.

3. Limity systému & technické hranice

Aby respektoval soukromí uživatelů, zachoval bezpečnost prohlížeče a zpracovával data rychle, pracuje MousePlayer v jasně vymezených technických hranicích:

Hranice systému	Jak to MousePlayer řeší
Prvky iframe	Prvky iframe se stejným původem jako vaše stránka se zaznamenávají včetně obsahu a interakcí uvnitř nich. Vložený obsah z jiného původu (např. přehrávače YouTube, platební formuláře Stripe) nelze kvůli bezpečnostním pravidlům prohlížeče (Same-Origin Policy) zaznamenat zevnitř; v přehrávání se zobrazí jako zástupný prvek a nenačítá se.
Citlivá vstupní pole (osobní údaje)	Pole pro hesla a platební údaje se maskují přímo v zařízení návštěvníka na každé úrovni maskování a úplné maskování všech vstupů ve formulářích je výchozím nastavením každého webu. Vidíte, že se psalo, ne co se psalo. Platí dvě omezení: dvě slabší úrovně maskování zapínáme jen s naším písemným schválením a maskování nikdy nezasáhne to, co vaše vlastní stránka vypíše do dokumentu – potvrzovací stránka se zobrazenou adresou je součástí snímku. Obojí upravuje DPA.
Prvky Canvas & WebGL	Obsah prvku canvas se zaznamenává jako obrázek: jednou spolu se snímkem stránky a znovu při každé změně, nejvýše zhruba jednou za sekundu a s omezením velikosti. Plynulé animace se proto zobrazí jako sled snímků. V maskovaných oblastech a u prvků canvas s obrázky z jiného původu se žádný obrázek nepřenáší; obsah WebGL může zůstat prázdný.
Webové komponenty (Shadow DOM)	Otevřené shadow rooty se zaznamenávají včetně svého obsahu. Uzavřené shadow rooty jsou pro skripty nepřístupné; jejich obsah v přehrávání chybí.
Přenos & úložiště prohlížeče	Data se odesílají přes šifrované spojení WebSocket (HTTPS/WSS). Pokud ho nelze navázat, například kvůli proxy, přejde skript na šifrovanou cestu přes HTTP; velmi velké snímky stránky se nahrávají zvlášť přes HTTPS. MousePlayer nenastavuje žádné cookies; na vašem webu používá local storage a session storage prohlížeče.
Období nečinnosti (AFK)	Když návštěvník nechá kartu otevřenou a na 20 minut odejde, náš engine nečinnost automaticky rozpozná a při přehrávání tuto mezeru zkrátí, abyste neztráceli čas sledováním nehybné obrazovky.

Jak vám můžeme pomoci?