Kako MousePlayer radi
Jednostavan vodič kroz našu arhitekturu praćenja, obradu rezolucija ekrana na različitim uređajima i granice sistema.
1. Zašto ne koristimo video-snimanje
Česta zabluda je da alati za vizuelnu analitiku snimaju standardne video-datoteke (poput MP4 ili WebM) ekrana posetioca. To bi trošilo ogromnu propusnost, znatno usporilo vaš veb-sajt i stvorilo zamućen, nečitljiv tekst.
Umesto toga, MousePlayer koristi laganu tehnologiju poznatu kao telemetrija DOM snimaka. Ovako radi u osnovi:
Snimak nacrta
Kada posetilac otvori stranicu, naša skripta pravi tekstualni „nacrt“ HTML-a i strukture stilova. Beleži položaje elemenata bez kopiranja datoteka slika ili videa stranice; plejer učitava slike sa njihovih izvornih adresa tokom reprodukcije. Izuzetak su canvas elementi, čiji se sadržaj prenosi kao slika (pogledajte ispod).
Telemetrija koordinata
Dok korisnik komunicira sa stranicom, beležimo tok događaja: položaje miša, dubinu skrolovanja, odredišta klikova i promene veličine pregledača, kao i promene same stranice i, zavisno od podešavanja, poruke konzole, neuspele ili spore zahteve i merenja učitavanja (Web Vitals). Pomeranja i klikovi su mali; snimci stranice i promene stranice mogu biti znatno veći, zavisno od stranice, i prenose se komprimovani.
Bioskopska reprodukcija
Kada gledate sesiju na kontrolnoj tabli, naš plejer ponovo stvara stranicu prema snimljenom nacrtu i pomera virtuelni pokazivač preko nje u realnom vremenu, uz savršeno oštar tekst.
Napravljeno da ostane lagano: skripta se učitava asinhrono i prenosi male numeričke tačke podataka umesto videa, čime njen sopstveni uticaj ostaje mali. Šta to znači za vaše Core Web Vitals zavisi od stranica, hostinga i mreže posetioca, pa merite na svom sajtu umesto da prihvatite našu brojku. Ne garantuje se određena brzina učitavanja – pogledajte odeljak 20 dokumenta Uslovi korišćenja.
2. Rad sa rezolucijama ekrana & mobilnim uređajima
Današnji korisnici koriste sve od kompaktnih pametnih telefona do ultraširokih 4K monitora računara. Veb-sajtovi automatski pomeraju, prelamaju i preuređuju raspored prema različitim širinama ekrana — koncept poznat kao prilagodljiv veb dizajn.
Kako usklađujemo tačan vidljivi deo ekrana posetioca
Da snimak ne bi izgledao izobličeno, MousePlayer beleži tačne dimenzije vidljivog dela ekrana posetioca (npr. 390x844 za pametni telefon ili 1920x1080 za monitor računara). Kada otvorite bioskopski plejer, naš sistem pravi skalirano izolovano okruženje koje verno odražava izvorni odnos stranica ekrana posetioca.
Ekrani desktop & prenosivih računara
Na standardnim računarima beležimo neprekidno pomeranje miša i navigaciju kroz više kartica unutar iste sesije pregledača. Meniji koji se otvaraju prelaskom miša prikazuju se na snimku ako stranica pritom menja svoj dokument; čisti CSS efekat prelaska nije vidljiv u dokumentu i ne reprodukuje se na snimku.
Pametni telefoni & tableti
Ekrani osetljivi na dodir nemaju lebdeći pokazivač miša. MousePlayer se automatski prilagođava beležeći dodire, skrolovanje prevlačenjem i promene orijentacije (uspravna naspram vodoravne).
Izazov promene veličine usred sesije
Ako posetilac okrene tablet ili promeni veličinu prozora pregledača računara usred sesije, raspored sajta se dinamički menja. MousePlayer beleži ove događaje promene veličine i odmah neprimetno prilagođava platno reprodukcije, tako da kontekst interakcije ostaje sačuvan.
3. Ograničenja sistema & tehničke granice
Radi poštovanja privatnosti korisnika, očuvanja bezbednosti pregledača i brze obrade podataka, MousePlayer radi unutar definisanih tehničkih granica:
| Granica sistema | Kako MousePlayer postupa |
|---|---|
| iFrames | iframe-ovi istog porekla kao vaša stranica snimaju se zajedno sa sadržajem i interakcijama u njima. Ugrađeni sadržaj drugog porekla (npr. YouTube plejeri, Stripe obrasci plaćanja) ne može da se snima iznutra zbog bezbednosnih pravila pregledača (Same-Origin Policy); na snimku se pojavljuje kao zamenski prikaz i tamo se ne učitava. |
| Osetljiva polja unosa (lični podaci) | Polja lozinki i plaćanja maskiraju se na uređaju posetioca na svakom nivou maskiranja, a potpuno maskiranje svih unosa obrazaca podrazumevano je za svaki sajt. Vidite da je bilo kucanja, a ne šta je otkucano. Važe dve granice: dva slabija nivoa maskiranja uključuju se samo uz naše pismeno odobrenje, a maskiranje nikada ne dopire do onoga što vaša stranica ispisuje u dokument – stranica potvrde koja prikazuje adresu deo je snimka. Obe granice opisane su u DPA-u. |
| Canvas & WebGL elementi | Sadržaj canvas-a snima se kao slika: jednom uz snimak stranice i ponovo pri svakoj promeni, najviše otprilike jednom u sekundi i uz ograničenje veličine. Glatke animacije zato se pojavljuju kao niz kadrova. Slika se ne prenosi u maskiranim oblastima niti za canvas elemente koji sadrže slike drugog porekla; WebGL sadržaj može ostati prazan. |
| Veb komponente (Shadow DOM) | Otvoreni shadow koreni snimaju se zajedno sa sadržajem. Zatvoreni shadow koreni su nedostupni skriptama; njihov sadržaj nedostaje na snimku. |
| Prenos & skladište pregledača | Podaci se šalju šifrovanom WebSocket vezom (HTTPS/WSS). Ako ne može da se uspostavi, na primer zbog proksija, skripta prelazi na šifrovani HTTP put; veoma veliki snimci stranice zasebno se otpremaju preko HTTPS-a. MousePlayer ne postavlja kolačiće; koristi lokalno skladište i skladište sesije pregledača na vašem sajtu. |
| AFK periodi neaktivnosti | Ako posetilac ostavi karticu otvorenu i ode na 20 minuta, naš sistem automatski otkriva neaktivnost i skraćuje prazan interval tokom reprodukcije, da ne trošite vreme gledajući statične ekrane. |