Cum funcționează MousePlayer
Un ghid simplu despre arhitectura urmăririi, gestionarea rezoluțiilor pe dispozitive și limitele sistemului.
1. De ce nu folosim înregistrare video
O concepție greșită frecventă este că instrumentele de analiză vizuală înregistrează fișiere video obișnuite (MP4 sau WebM) ale ecranului vizitatorului. Ar consuma mult trafic, ar încetini drastic site-ul și ar produce text neclar, ilizibil.
MousePlayer folosește în schimb o tehnologie ușoară numită Telemetrie prin capturi DOM. Iată principiul de funcționare:
Captura structurii
La deschiderea paginii, scriptul nostru face o „schiță” textuală a structurii HTML și stilurilor. Înregistrează poziția elementelor fără a copia imaginile sau videoclipurile paginii; playerul încarcă imaginile de la adresa originală în timpul redării. Excepția sunt elementele canvas, transmise ca imagine (mai jos).
Telemetrie de coordonate
În timpul interacțiunii înregistrăm un flux de evenimente: poziții ale mouse-ului, adâncimea derulării, țintele clicurilor și redimensionarea browserului, plus modificările paginii și, în funcție de setări, mesaje de consolă, cereri eșuate sau lente și măsurători de încărcare (Web Vitals). Mișcările și clicurile sunt mici; capturile și modificările paginii pot fi mult mai mari și sunt transmise comprimat.
Redarea în modul teatru
Când vizionați sesiunea în tabloul de bord, playerul reconstruiește pagina din schița înregistrată și mișcă un cursor virtual în timp real, păstrând textul perfect clar.
Conceput să rămână ușor: scriptul se încarcă asincron și transmite date numerice mici, nu video, păstrând un consum redus. Impactul asupra Core Web Vitals depinde de pagini, găzduire și rețeaua vizitatorului; măsurați pe propriul site, nu preluați o cifră de la noi. Nu garantăm o viteză anume de încărcare – vedeți secțiunea 20 din Condițiile de utilizare.
2. Rezoluții de ecran & dispozitive mobile
Utilizatorii navighează de pe smartphone-uri compacte până la monitoare desktop 4K foarte late. Site-urile își modifică și rearanjează automat aspectul pentru lățimi diferite — concept numit design web adaptiv.
Cum reproducem exact zona vizibilă a vizitatorului
Pentru o redare fără distorsiuni, MousePlayer înregistrează dimensiunile exacte ale zonei vizibile (de ex. 390x844 pentru smartphone sau 1920x1080 pentru monitor desktop). La deschiderea playerului în modul teatru, motorul creează un mediu izolat scalat care reproduce exact raportul ecranului original.
Ecrane desktop & laptop
Pe computerele obișnuite capturăm continuu mișcarea mouse-ului și navigarea între file în aceeași sesiune de browser. Meniurile deschise la trecerea mouse-ului apar în redare dacă modifică documentul; un efect pur CSS nu este vizibil în document și nu este reprodus.
Smartphone-uri & tablete
Ecranele tactile nu au cursor de mouse. MousePlayer se adaptează automat înregistrând atingeri, derulare prin glisare și schimbări de orientare (portret sau peisaj).
Redimensionarea în timpul sesiunii
Dacă vizitatorul rotește tableta sau redimensionează fereastra browserului în timpul sesiunii, aspectul se schimbă dinamic. MousePlayer înregistrează aceste evenimente și ajustează imediat suprafața de redare pentru a păstra contextul interacțiunii.
3. Limite ale sistemului & restricții tehnice
Pentru a respecta confidențialitatea, securitatea browserului și viteza de prelucrare, MousePlayer funcționează în limite tehnice definite:
| Limită de sistem | Cum o gestionează MousePlayer |
|---|---|
| iFrame-uri | Cadrele iframe de aceeași origine cu pagina se înregistrează cu conținutul și interacțiunile lor. Conținutul încorporat de altă origine (de ex. playere YouTube, formulare Stripe) nu poate fi înregistrat în interior din cauza politicilor browserului (Same-Origin Policy); apare ca substituent în redare și nu se încarcă acolo. |
| Câmpuri sensibile (date personale) | Câmpurile de parolă și plată sunt mascate pe dispozitivul vizitatorului la orice nivel, iar mascarea completă a tuturor formularelor este implicită pentru fiecare site. Vedeți că s-a tastat, nu textul. Două limite: nivelurile mai slabe necesită aprobarea noastră scrisă, iar mascarea nu acoperă ce afișează pagina în document – o confirmare cu adresă face parte din captură. Ambele sunt explicate în DPA. |
| Elemente canvas & WebGL | Conținutul canvas se înregistrează ca imagine: o dată cu captura paginii și apoi la schimbări, cel mult aproximativ o dată pe secundă și cu limită de dimensiune. Animațiile fluide apar ca succesiuni de cadre. Nu se transmit imagini în zone mascate sau pentru canvas cu imagini de altă origine; WebGL poate rămâne gol. |
| Componente web (Shadow DOM) | Rădăcinile shadow deschise se înregistrează cu conținutul lor. Cele închise sunt inaccesibile scripturilor; conținutul lipsește din redare. |
| Transport & stocare în browser | Datele se trimit prin conexiune WebSocket criptată (HTTPS/WSS). Dacă nu se poate stabili, de exemplu din cauza unui proxy, scriptul folosește o rută HTTP criptată; capturile foarte mari se încarcă separat prin HTTPS. MousePlayer nu setează cookie-uri; folosește stocarea locală și de sesiune a browserului pe site. |
| Perioade de inactivitate AFK | Dacă vizitatorul lasă fila deschisă și pleacă 20 de minute, motorul detectează automat inactivitatea și comprimă pauza la redare, fără timp pierdut privind ecrane statice. |