Kako MousePlayer radi
Jednostavan vodič kroz arhitekturu praćenja, obradu rezolucija ekrana na uređajima i granice sistema.
1. Zašto ne koristimo video snimanje
Česta zabluda je da alati vizuelne analitike snimaju standardne video datoteke (poput MP4 ili WebM) ekrana posjetioca. To bi trošilo ogroman mrežni kapacitet, drastično usporavalo sajt i stvaralo mutan, nečitljiv tekst.
Umjesto toga MousePlayer koristi laganu tehnologiju poznatu kao telemetrija DOM snimaka. Evo kako radi na osnovnom nivou:
Strukturni snimak
Kad posjetilac otvori stranicu, skripta pravi tekstualni „nacrt“ HTML-a i strukture stilova. Bilježi položaje elemenata bez kopiranja slika ili video datoteka stranice; plejer učitava slike s izvornih adresa tokom reprodukcije. Izuzetak su canvas elementi čiji se sadržaj šalje kao slika (pogledajte ispod).
Telemetrija koordinata
Tokom interakcije korisnika bilježimo tok događaja: položaje miša, dubinu skrolanja, odredišta klikova i promjene veličine preglednika, uz promjene same stranice i, zavisno od postavki, poruke konzole, neuspjele ili spore zahtjeve i mjerenja učitavanja (Web Vitals). Pokreti i klikovi su mali; snimci i promjene stranica mogu biti znatno veći zavisno od stranice i šalju se komprimirani.
Kino reprodukcija
Kad gledate sesiju na kontrolnoj ploči, plejer ponovo stvara stranicu iz snimljenog nacrta i pomjera virtualni pokazivač preko nje u stvarnom vremenu, uz kristalno oštar tekst.
Napravljeno da ostane lagano: skripta se učitava asinhrono i šalje male brojčane tačke umjesto videa, pa njen vlastiti utjecaj ostaje mali. Šta to znači za Core Web Vitals zavisi od vaših stranica, hostinga i mreže posjetioca, pa izmjerite na vlastitom sajtu umjesto da prihvatite našu brojku. Ne garantira se određena brzina učitavanja – pogledajte odjeljak 20 Uslova korištenja.
2. Rezolucije ekrana & mobilni uređaji
Današnji korisnici pregledaju na svemu, od malih pametnih telefona do ultraširokih 4K monitora. Sajtovi automatski pomjeraju, prelamaju i preuređuju rasporede za različite širine ekrana — to je responzivni web-dizajn.
Kako odgovaramo tačnom vidljivom dijelu posjetioca
Da reprodukcija ne bi bila izobličena, MousePlayer bilježi tačne dimenzije vidljivog dijela posjetioca (npr. 390x844 za pametni telefon ili 1920x1080 za monitor računara). Kad otvorite kino plejer, mehanizam stvara skalirano izolirano okruženje koje savršeno odražava izvorni omjer ekrana posjetioca.
Ekrani računara & laptopa
Na standardnim računarima snimamo kontinuirano pomjeranje miša i navigaciju kroz više kartica unutar iste sesije preglednika. Meniji koji se otvaraju prelaskom pokazivača pojavljuju se u reprodukciji ako pritom mijenjaju dokument stranice; čisti CSS efekat prelaska nije vidljiv u dokumentu i ne reproducira se.
Pametni telefoni & tableti
Dodirni ekrani nemaju pokazivač miša koji lebdi. MousePlayer se automatski prilagođava snimanjem dodira, skrolanja prevlačenjem i promjena orijentacije (uspravno i vodoravno).
Izazov promjene veličine usred sesije
Ako posjetilac okrene tablet ili promijeni veličinu prozora preglednika tokom sesije, raspored sajta se dinamički mijenja. MousePlayer snima te događaje i neprimjetno prilagođava platno reprodukcije u hodu, čuvajući kontekst interakcije.
3. Ograničenja sistema & tehničke granice
Da poštuje privatnost korisnika, održi sigurnost preglednika i brzu obradu podataka, MousePlayer radi unutar definiranih tehničkih granica:
| Granica sistema | Kako je MousePlayer obrađuje |
|---|---|
| iFrames | Iframeovi istog porijekla kao vaša stranica snimaju se sa sadržajem i interakcijama u njima. Ugrađeni sadržaj drugog porijekla (npr. YouTube plejeri, Stripe obrasci plaćanja) ne može se snimati iznutra zbog sigurnosnih pravila preglednika (Same-Origin Policy); u reprodukciji se prikazuje zamjenski prikaz i tamo se ne učitava. |
| Osjetljiva polja unosa (lični podaci) | Polja lozinke i plaćanja maskiraju se na uređaju posjetioca na svakom nivou maskiranja, a potpuno maskiranje svih unosa u obrasce podrazumijevano je za svako svojstvo. Vidite da je bilo kucanja, ne šta je upisano. Važe dvije granice: dva slabija nivoa uključuju se samo uz naše pismeno odobrenje, a maskiranje nikad ne obuhvata ono što vaša stranica ispiše u dokument – stranica potvrde koja pokazuje adresu dio je snimka stranice. Obje granice navedene su u DPA-u. |
| Canvas & WebGL elementi | Sadržaj canvasa snima se kao slika: jednom sa snimkom stranice, zatim pri svakoj promjeni, najviše otprilike jednom u sekundi i uz ograničenje veličine. Glatke animacije zato izgledaju kao niz kadrova. U maskiranim područjima ili canvas elementima sa slikama drugog porijekla ne šalje se slika; WebGL sadržaj može ostati prazan. |
| Web-komponente (Shadow DOM) | Otvoreni shadow rootovi snimaju se sa sadržajem. Zatvoreni shadow rootovi nisu dostupni skriptama i njihov sadržaj nedostaje u reprodukciji. |
| Prijenos & pohrana preglednika | Podaci se šalju šifriranom WebSocket vezom (HTTPS/WSS). Ako se ne može uspostaviti, naprimjer zbog proxyja, skripta prelazi na šifrirani HTTP put; vrlo veliki snimci stranica prenose se odvojeno putem HTTPS-a. MousePlayer ne postavlja kolačiće; koristi lokalnu i sesijsku pohranu preglednika na vašem sajtu. |
| Periodi AFK neaktivnosti | Ako posjetilac ostavi karticu otvorenu i ode na 20 minuta, mehanizam automatski otkriva neaktivnost i sažima prazninu tokom reprodukcije da ne gubite vrijeme gledajući nepomične ekrane. |