Kako radi MousePlayer
Jednostavan vodič kroz arhitekturu praćenja, obradu rezolucija zaslona na različitim uređajima i granice sustava.
1. Zašto ne koristimo videosnimanje
Česta je zabluda da alati za vizualnu analitiku snimaju standardne videodatoteke (poput MP4 ili WebM) zaslona posjetitelja. To bi trošilo golemu propusnost, znatno usporilo web-mjesto i stvorilo zamućen, nečitljiv tekst.
Umjesto toga MousePlayer koristi laganu tehnologiju poznatu kao telemetrija snimki stanja DOM-a. Ovako radi na osnovnoj razini:
Snimka nacrta stranice
Kad posjetitelj otvori stranicu, naša skripta izrađuje tekstualni „nacrt“ HTML-a i strukture stilova. Bilježi položaje elemenata bez kopiranja slikovnih ili videodatoteka stranice; reproduktor pri reprodukciji učitava slike s njihove izvorne adrese. Iznimka su elementi canvas, čiji se sadržaj prenosi kao slika (vidi ispod).
Telemetrija koordinata
Tijekom interakcije korisnika bilježimo tok događaja: položaje miša, dubinu pomicanja, ciljeve klikova i promjene veličine preglednika, kao i promjene same stranice te, ovisno o postavkama, poruke konzole, neuspjele ili spore zahtjeve i mjerenja vremena učitavanja (Web Vitals). Pokreti i klikovi mali su; snimke stanja i promjene stranice mogu biti znatno veće, ovisno o stranici, pa se prenose komprimirane.
Kazališna reprodukcija
Kad gledate sesiju na nadzornoj ploči, naš reproduktor ponovno izrađuje stranicu prema snimljenom nacrtu i pomiče virtualni pokazivač po njoj u stvarnom vremenu, dok tekst ostaje potpuno oštar.
Izrađeno da ostane lagano: skripta se učitava asinkrono i prenosi male brojčane podatkovne točke umjesto videa, čime zadržava mali vlastiti utjecaj. Što to znači za vaše Core Web Vitals ovisi o stranicama, hostingu i mreži posjetitelja, zato to izmjerite na vlastitom web-mjestu umjesto da prihvatite našu brojku. Ne jamči se određena brzina učitavanja – pogledajte odjeljak 20 dokumenta Uvjeti korištenja.
2. Rezolucije zaslona & mobilni uređaji
Današnji korisnici pregledavaju sadržaj na svemu, od malih pametnih telefona do ultraširokih 4K monitora. Web-mjesta automatski pomiču, prelamaju i preuređuju raspored kako bi odgovarao različitim širinama zaslona — to se naziva responzivni web-dizajn.
Kako usklađujemo točno vidljivo područje posjetitelja
Kako reprodukcija ne bi izgledala izobličeno, MousePlayer bilježi točne dimenzije vidljivog područja posjetitelja (npr. 390x844 za pametni telefon ili 1920x1080 za stolni monitor). Kad otvorite kazališni reproduktor, naš sustav izrađuje skalirano izolirano okruženje koje točno odražava izvorni omjer zaslona posjetitelja.
Zasloni stolnih & prijenosnih računala
Na standardnim računalima bilježimo neprekidne pokrete miša i navigaciju kroz više kartica unutar iste sesije preglednika. Izbornici koji se otvaraju prelaskom pokazivača pojavljuju se u reprodukciji ako stranica pritom mijenja svoj dokument; čisti CSS efekt prelaska nije vidljiv u dokumentu i ne reproducira se.
Pametni telefoni & tableti
Dodirni zasloni nemaju pokazivač miša koji lebdi iznad sadržaja. MousePlayer se automatski prilagođava bilježenjem dodira, pomicanja povlačenjem i promjena orijentacije (okomito ili vodoravno).
Izazov promjene veličine usred sesije
Ako posjetitelj usred sesije okrene tablet ili promijeni veličinu prozora preglednika na računalu, raspored web-mjesta dinamički se mijenja. MousePlayer bilježi te događaje i u hodu prilagođava površinu reprodukcije kako bi očuvao kontekst interakcije.
3. Ograničenja sustava & tehničke granice
Kako bi poštovao privatnost korisnika, održavao sigurnost preglednika i brzu obradu podataka, MousePlayer radi unutar definiranih tehničkih granica:
| Granica sustava | Kako je MousePlayer obrađuje |
|---|---|
| iFrames | iframe elementi istog podrijetla kao vaša stranica snimaju se zajedno sa sadržajem i interakcijom unutar njih. Ugrađeni sadržaj drugog podrijetla (npr. reproduktori YouTubea, Stripe obrasci za plaćanje) ne može se interno snimati zbog sigurnosnih pravila preglednika (Same-Origin Policy); u reprodukciji se pojavljuje zamjenski element i ondje se ne učitava. |
| Osjetljiva polja unosa (osobni podaci) | Polja lozinke i plaćanja maskiraju se na uređaju posjetitelja na svakoj razini maskiranja, a potpuno maskiranje svih unosa u obrasce zadano je za svako web-mjesto. Vidite da se tipkalo, a ne što je upisano. Vrijede dvije granice: dvije slabije razine maskiranja omogućuju se samo uz naše pisano odobrenje, a maskiranje nikad ne obuhvaća ono što vaša stranica sama ispisuje u dokument – stranica potvrde koja prikazuje adresu dio je snimke stanja. Obje su navedene u dokumentu Ugovor o obradi podataka. |
| Elementi canvas & WebGL | Sadržaj elementa canvas snima se kao slika: jednom uz snimku stanja stranice i ponovno pri svakoj promjeni, 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 područjima ni za elemente canvas sa slikama drugog podrijetla; sadržaj WebGL-a može ostati prazan. |
| Web-komponente (Shadow DOM) | Otvoreni korijeni Shadow DOM-a snimaju se zajedno sa sadržajem. Zatvoreni korijeni nedostupni su skriptama; njihov sadržaj nedostaje u reprodukciji. |
| Prijenos & pohrana preglednika | Podaci se šalju šifriranom WebSocket vezom (HTTPS/WSS). Ako je nije moguće uspostaviti, primjerice zbog proxyja, skripta prelazi na šifriranu HTTP rutu; vrlo velike snimke stanja stranice zasebno se prenose putem HTTPS-a. MousePlayer ne postavlja kolačiće; koristi lokalnu pohranu i pohranu sesije preglednika na vašem web-mjestu. |
| Razdoblja neaktivnosti AFK | Ako posjetitelj ostavi karticu otvorenom i ode na 20 minuta, naš sustav automatski otkriva neaktivnost i sažima prazninu u reprodukciji kako ne biste gubili vrijeme gledajući nepomične zaslone. |