Kako deluje MousePlayer

Preprost vodič po naši arhitekturi sledenja, obravnavi ločljivosti zaslonov med napravami in mejah sistema.

1. Zakaj ne uporabljamo videosnemanja

Pogosta zmota je, da orodja za vizualno analitiko snemajo običajne videodatoteke (kot sta MP4 ali WebM) zaslona obiskovalca. To bi porabilo ogromno pasovne širine, močno upočasnilo spletno mesto in ustvarilo zamegljeno, neberljivo besedilo.

MousePlayer namesto tega uporablja lahko tehnologijo, imenovano telemetrija posnetkov stanja DOM. V osnovi deluje takole:

Posnetek načrta strani

Ko obiskovalec odpre stran, naš skript zajame besedilni „načrt“ njenega HTML in slogovne strukture. Zabeleži položaje elementov, ne da bi kopiral slikovne ali videodatoteke strani; predvajalnik med predvajanjem nalaga slike z izvornih naslovov. Izjema so elementi canvas, katerih vsebina se prenese kot slika (glejte spodaj).

Telemetrija koordinat

Med interakcijo uporabnika beležimo tok dogodkov: položaje miške, globino pomikanja, cilje klikov in spremembe velikosti brskalnika ter spremembe same strani, glede na nastavitve pa še sporočila konzole, neuspele ali počasne zahteve in meritve časa nalaganja (Web Vitals). Gibi in kliki so majhni; posnetki stanja in spremembe strani so glede na stran lahko precej večji in se prenašajo stisnjeni.

Predvajanje v gledališkem pogledu

Ko na nadzorni plošči gledate sejo, naš predvajalnik po posnetem načrtu znova ustvari stran in po njej v realnem času premika navidezni kazalec, besedilo pa ostane povsem ostro.

Zasnovano za majhno obremenitev: skript se nalaga asinhrono in namesto videa prenaša majhne številske podatke, zato je njegova lastna obremenitev majhna. Vpliv na Core Web Vitals je odvisen od vaših strani, gostovanja in omrežja obiskovalca, zato ga izmerite na svojem spletnem mestu, namesto da se zanesete na našo številko. Določena hitrost nalaganja ni zajamčena – glejte 20. člen pogojev uporabe.

2. Ločljivosti zaslonov & mobilne naprave

Današnji uporabniki brskajo na vsem od majhnih pametnih telefonov do izredno širokih namiznih monitorjev 4K. Spletna mesta samodejno premikajo, zlagajo in preurejajo postavitev glede na širino zaslona – temu pravimo odzivno spletno oblikovanje.

Kako poustvarimo natančno vidno območje obiskovalca

Da predvajanje ni popačeno, MousePlayer zabeleži natančne mere vidnega območja obiskovalca (npr. 390x844 za pametni telefon ali 1920x1080 za namizni monitor). Ko odprete gledališki predvajalnik, naš pogon ustvari pomanjšano izolirano okolje, ki natančno odraža izvirno razmerje stranic obiskovalčevega zaslona.

Namizni računalniki & prenosniki

Na običajnih računalnikih zajemamo neprekinjeno gibanje miške in navigacijo po več zavihkih iste seje brskalnika. Meniji, ki se odprejo ob prehodu miške, so pri predvajanju vidni, če ob tem spremenijo dokument strani; čisti učinek CSS ob prehodu miške v dokumentu ni viden in se pri predvajanju ne poustvari.

Pametni telefoni & tablice

Zasloni na dotik nimajo lebdečega kazalca miške. MousePlayer se samodejno prilagodi s snemanjem dotikov, pomikanja s potegi in sprememb usmerjenosti (pokončno ali ležeče).

Izziv spremembe velikosti med sejo

Če obiskovalec med sejo obrne tablico ali spremeni velikost okna namiznega brskalnika, se postavitev spletnega mesta dinamično spremeni. MousePlayer zajame te spremembe velikosti okna in sproti prilagodi predvajalno platno, da se ohrani kontekst interakcije.

3. Omejitve sistema & tehnične meje

Zaradi spoštovanja zasebnosti uporabnikov, varnosti brskalnika in hitre obdelave podatkov MousePlayer deluje znotraj določenih tehničnih meja:

Meja sistema Kako jo obravnava MousePlayer
iFrames Okvirji iframe istega izvora kot vaša stran se posnamejo z vsebino in interakcijami v njih. Vdelane vsebine drugega izvora (npr. predvajalnikov YouTube, plačilnih obrazcev Stripe) zaradi varnostnih pravil brskalnika (pravilo istega izvora) ni mogoče posneti od znotraj; pri predvajanju se pokaže nadomestno polje in vsebina se tam ne naloži.
Občutljiva vnosna polja (osebni podatki) Polja za gesla in plačila se pri vsaki ravni zakrivanja zakrijejo na napravi obiskovalca, popolno zakrivanje vseh vnosov pa je privzeto za vsako spletno mesto. Vidite, da je nekdo tipkal, ne pa, kaj. Veljata dve omejitvi: dve šibkejši ravni sta omogočeni samo z našo pisno odobritvijo in zakrivanje nikoli ne zajame tega, kar vaša stran izpiše v dokument – potrditvena stran z naslovom je del posnetka stanja. Obe sta opisani v pogodbi o obdelavi podatkov.
Elementi canvas & WebGL Vsebina platna se posname kot slika: enkrat s posnetkom stanja strani in znova ob vsaki spremembi, največ približno enkrat na sekundo in z omejitvijo velikosti. Gladke animacije so zato prikazane kot zaporedje sličic. Na zakritih območjih ali pri platnih s slikami drugega izvora se slika ne prenese; vsebina WebGL lahko ostane prazna.
Spletne komponente (Shadow DOM) Odprte senčne korenine se posnamejo skupaj z vsebino. Zaprte senčne korenine skriptom niso dostopne; njihova vsebina pri predvajanju manjka.
Prenos & shramba brskalnika Podatki se pošiljajo prek šifrirane povezave WebSocket (HTTPS/WSS). Če je ni mogoče vzpostaviti, na primer zaradi posredniškega strežnika, skript preide na šifrirano pot HTTP; zelo veliki posnetki stanja strani se ločeno naložijo prek HTTPS. MousePlayer ne nastavlja piškotkov; na vašem spletnem mestu uporablja lokalno in sejno shrambo brskalnika.
Obdobja nedejavnosti AFK Če obiskovalec pusti zavihek odprt in za 20 minut odide, naš pogon samodejno zazna nedejavnost ter pri predvajanju skrajša prekinitev, da ne izgubljate časa ob gledanju mirujočih zaslonov.