Hogyan működik a MousePlayer
Közérthető útmutató a követési architektúrához, az eszközök képernyőfelbontásának kezeléséhez és a rendszer korlátaihoz.
1. Miért nem videót rögzítünk
Gyakori tévhit, hogy a vizuális analitikai eszközök szokásos videófájlokat (például MP4 vagy WebM) rögzítenek a látogató képernyőjéről. Ez nagy sávszélességet fogyasztana, jelentősen lassítaná a webhelyet, és elmosódott, olvashatatlan szöveget eredményezne.
Ehelyett a MousePlayer egy kis erőforrás-igényű technológiát használ: DOM-pillanatkép-telemetria. Alapvetően így működik:
Az alaprajz-pillanatkép
Amikor a látogató megnyitja az oldalt, szkriptünk szöveges „alaprajzot” készít a HTML-ről és a stílusszerkezetről. Az elemek helyét rögzíti az oldal kép- és videófájljainak másolása nélkül; visszajátszáskor a lejátszó eredeti címükről tölti be a képeket. Kivételt a canvas elemek jelentenek, amelyek tartalmát képként továbbítjuk (lásd alább).
Koordinátatelemetria
Interakció közben eseményfolyamot rögzítünk: egérpozíciókat, görgetési mélységet, kattintási célokat, böngészőátméretezést és az oldal változásait, valamint beállítástól függően konzolüzeneteket, sikertelen vagy lassú kéréseket és betöltésiidő-méréseket (Web Vitals). A mozgások és kattintások kis méretűek; a pillanatképek és oldalmódosítások oldaltól függően jóval nagyobbak lehetnek, ezeket tömörítve továbbítjuk.
Mozinézetes visszajátszás
Az irányítópulton megtekintett munkamenetnél a lejátszó a rögzített alaprajzból újraépíti az oldalt, és valós időben virtuális kurzort mozgat rajta, miközben a szöveg éles marad.
Kis erőforrásigényre tervezve: a szkript aszinkron töltődik, videó helyett kis numerikus adatpontokat továbbít, ezért saját terhelése alacsony. A Core Web Vitals mutatókra gyakorolt hatás az Ön oldalaitól, tárhelyétől és látogatója hálózatától függ, ezért saját webhelyén mérje, ne tőlünk vegyen át egy számot. Konkrét betöltési sebességet nem garantálunk – lásd a következő dokumentum 20. pontját: Felhasználási feltételek.
2. Képernyőfelbontások & mobileszközök kezelése
A látogatók kompakt okostelefontól ultraszéles 4K asztali monitorig sokféle eszközt használnak. A webhelyek automatikusan átrendezik és összecsukják elemeiket a különböző képernyőszélességekhez — ezt hívjuk reszponzív webdesignnak.
A látogató pontos látható területének visszaadása
A torzulás elkerüléséhez a MousePlayer rögzíti a látogató látható területének pontos méreteit (például 390x844 okostelefonnál vagy 1920x1080 asztali monitornál). A mozinézetes lejátszó megnyitásakor motorunk skálázott, elkülönített környezetet hoz létre, amely pontosan tükrözi az eredeti képernyőarányt.
Asztali gépek & laptopok
Számítógépen a folyamatos egérmozgást és az ugyanazon böngésző-munkameneten belüli többlapos navigációt rögzítjük. A rámutatásra nyíló menük akkor jelennek meg a visszajátszásban, ha közben az oldal dokumentuma módosul; a tisztán CSS-alapú hoverhatás a dokumentumban nem látható, így a visszajátszás nem reprodukálja.
Okostelefonok & táblagépek
Az érintőképernyőkön nincs lebegő egérkurzor. A MousePlayer automatikusan az érintéseket, húzásos görgetést és tájolásváltásokat (álló/fekvő) rögzíti.
A munkamenet közbeni átméretezés kihívása
Ha a látogató elfordítja táblagépét vagy átméretezi asztali böngészőablakát, az oldal elrendezése dinamikusan változik. A MousePlayer rögzíti ezeket az eseményeket, és közben zökkenőmentesen igazítja a lejátszás felületét, megőrizve az interakció kontextusát.
3. Rendszerkorlátok & technikai határok
Az adatvédelem, a böngészőbiztonság és a gyors adatfeldolgozás érdekében a MousePlayer meghatározott technikai korlátok között működik:
| Rendszerkorlát | A MousePlayer kezelése |
|---|---|
| iFrame-ek | Az oldallal azonos eredetű iframe-eket tartalmukkal és belső interakcióikkal együtt rögzítjük. Más eredetű beágyazott tartalmak (például YouTube-lejátszók vagy Stripe-fizetési űrlapok) belseje a böngésző biztonsági szabályai (Same-Origin Policy) miatt nem rögzíthető; a visszajátszásban helyőrzőként jelennek meg, és ott nem töltődnek be. |
| Érzékeny beviteli mezők (személyes adatok) | A jelszó- és fizetési mezők minden maszkolási szinten a látogató eszközén maszkoltak, az összes űrlapbevitel teljes maszkolása pedig minden webhelynél alapértelmezett. A gépelés tényét látja, nem a szövegét. Két korlát érvényes: a két gyengébb szint csak írásos jóváhagyásunkkal engedélyezhető, és a maszkolás nem érinti azt, amit saját oldala a dokumentumba ír – a címet megjelenítő visszaigazoló oldal a pillanatkép része. Mindkettőt rögzíti az Adatfeldolgozási megállapodás. |
| Canvas & WebGL-elemek | A canvas tartalmát képként rögzítjük: egyszer az oldal-pillanatképpel, majd változáskor újra, legfeljebb körülbelül másodpercenként, méretkorláttal. A folytonos animációk ezért képkockasorozatként jelennek meg. Maszkolt területeken és más eredetű képet tartalmazó canvas elemeknél nem továbbítunk képet; a WebGL tartalma üres maradhat. |
| Webkomponensek (Shadow DOM) | A nyitott shadow rootokat tartalmukkal együtt rögzítjük. A zártakhoz a szkriptek nem férnek hozzá; tartalmuk hiányzik a visszajátszásból. |
| Adatátvitel & böngészőtár | Az adatokat titkosított WebSocket-kapcsolaton küldjük (HTTPS/WSS). Ha ez például proxy miatt nem épül fel, a szkript titkosított HTTP-útvonalra vált; a nagyon nagy oldal-pillanatképeket külön, HTTPS-en tölti fel. A MousePlayer nem használ sütiket; a webhelyen a böngésző helyi és munkamenet-tárát használja. |
| Inaktív AFK-időszakok | Ha a látogató 20 percre nyitva hagyja a lapot és elmegy, motorunk felismeri az inaktivitást, és visszajátszáskor lerövidíti a szünetet, így nem kell állóképek nézésére pazarolnia az időt. |