Kā darbojas MousePlayer

Vienkāršs ceļvedis mūsu izsekošanas arhitektūrā, ekrāna izšķirtspējas apstrādē dažādās ierīcēs un sistēmas ierobežojumos.

1. Kāpēc mēs neizmantojam videoierakstu

Izplatīts maldīgs priekšstats ir, ka vizuālās analītikas rīki ieraksta apmeklētāja ekrānu parastos videofailos (piemēram, MP4 vai WebM). Tas patērētu milzīgu datu pārraides apjomu, būtiski palēninātu vietni un radītu izplūdušu, nesalasāmu tekstu.

Tā vietā MousePlayer izmanto vieglu tehnoloģiju, ko sauc par DOM momentuzņēmumu telemetriju. Tās darbības pamati:

Struktūras momentuzņēmums

Kad apmeklētājs atver lapu, mūsu skripts izveido jūsu HTML un noformējuma struktūras teksta „rasējumu“. Tas ieraksta elementu novietojumu, nekopējot lapas attēlu vai video failus; atskaņotājs atskaņošanas laikā ielādē attēlus no to sākotnējās adreses. Izņēmums ir canvas elementi, kuru saturs tiek nosūtīts kā attēls (skatiet tālāk).

Koordinātu telemetrija

Lietotāja mijiedarbības laikā ierakstām notikumu plūsmu: peles pozīcijas, ritināšanas dziļumu, klikšķu mērķus un pārlūka izmēra maiņu, kā arī pašas lapas izmaiņas un atkarībā no iestatījumiem konsoles ziņojumus, neveiksmīgus vai lēnus pieprasījumus un ielādes laika mērījumus (Web Vitals). Kustību un klikšķu dati ir mazi; lapu momentuzņēmumi un izmaiņas atkarībā no lapas var būt ievērojami lielāki un tiek nosūtīti saspiesti.

Atskaņojums teātra režīmā

Kad informācijas panelī skatāties sesiju, atskaņotājs atjauno lapu no ierakstītās struktūras un pārvieto virtuālu kursoru reāllaikā, saglabājot pilnīgi asu tekstu.

Veidots nelielai slodzei: skripts ielādējas asinhroni un video vietā nosūta mazus skaitlisku datu punktus, tā mazinot savu resursu patēriņu. Ietekme uz Core Web Vitals ir atkarīga no jūsu lapām, mitināšanas un apmeklētāja tīkla, tādēļ izmēriet to savā vietnē, nevis paļaujieties uz mūsu skaitli. Konkrēts ielādes ātrums netiek garantēts – skatiet Pakalpojuma noteikumu 20. sadaļu.

2. Ekrāna izšķirtspēja & mobilās ierīces

Mūsdienās lietotāji pārlūko visu, sākot ar kompaktiem viedtālruņiem un beidzot ar īpaši platiem 4K datoru monitoriem. Vietnes automātiski pārvieto, sakļauj un pārkārto izkārtojumu atbilstoši ekrāna platumam — to sauc par responsīvu tīmekļa dizainu.

Kā atveidojam precīzu apmeklētāja redzamo laukumu

Lai atskaņojums nebūtu izkropļots, MousePlayer ieraksta precīzus apmeklētāja redzamā laukuma izmērus (piemēram, 390x844 viedtālrunim vai 1920x1080 datora monitoram). Atverot atskaņotāju teātra režīmā, dzinējs izveido mērogotu izolētu vidi, kas precīzi atbilst apmeklētāja sākotnējā ekrāna proporcijām.

Datoru & klēpjdatoru ekrāni

Parastos datoros vienas pārlūka sesijas ietvaros ierakstām nepārtrauktas peles kustības un navigāciju vairākās cilnēs. Izvēlnes, kas atveras, uzvedot peli, atskaņojumā parādās, ja tas maina lapas dokumentu; tikai CSS radīts uzvedes efekts dokumentā nav redzams un atskaņojumā netiek atkārtots.

Viedtālruņi & planšetdatori

Skārienekrāniem nav virs elementiem novietota peles kursora. MousePlayer automātiski pielāgojas, ierakstot pieskārienus, ritināšanu ar vilkšanu un orientācijas maiņu (portrets vai ainava).

Izmēra maiņas izaicinājums sesijas laikā

Ja apmeklētājs sesijas laikā pagriež planšetdatoru vai maina datora pārlūka loga izmēru, lapas izkārtojums dinamiski mainās. MousePlayer uztver šos notikumus un nekavējoties pielāgo atskaņošanas laukumu, saglabājot mijiedarbības kontekstu.

3. Sistēmas ierobežojumi & tehniskās robežas

Lai cienītu lietotāju privātumu, saglabātu pārlūka drošību un nodrošinātu ātru datu apstrādi, MousePlayer darbojas noteiktās tehniskās robežās:

Sistēmas robeža Kā to apstrādā MousePlayer
iFrames iframe elementi ar tādu pašu izcelsmi kā jūsu lapa tiek ierakstīti kopā ar saturu un mijiedarbību tajos. Citas izcelsmes iegultu saturu (piemēram, YouTube atskaņotājus, Stripe maksājumu veidlapas) pārlūka drošības politiku (vienādas izcelsmes politikas) dēļ nevar ierakstīt no iekšpuses; atskaņojumā tas parādās kā vietturis un netiek ielādēts.
Sensitīvi ievades lauki (PII) Paroļu un maksājumu lauki apmeklētāja ierīcē tiek maskēti visos maskēšanas līmeņos, un visu veidlapas ievadu pilnīga maskēšana ir noklusējums katram objektam. Jūs redzat, ka notika rakstīšana, nevis ierakstīto tekstu. Ir divas robežas: divi vājākie maskēšanas līmeņi tiek atļauti tikai ar mūsu rakstisku apstiprinājumu, un maskēšana neskar to, ko pati lapa izvada dokumentā – apstiprinājuma lapa ar adresi ir daļa no momentuzņēmuma. Abi nosacījumi izklāstīti datu apstrādes līgumā.
Canvas & WebGL elementi Canvas saturs tiek ierakstīts kā attēls: vienreiz kopā ar lapas momentuzņēmumu un atkārtoti pēc izmaiņām, ne biežāk kā aptuveni reizi sekundē un ar izmēra ierobežojumu. Tāpēc vienmērīgas animācijas redzamas kā kadru secība. Maskētās zonās un canvas elementos ar citas izcelsmes attēliem attēls netiek nosūtīts; WebGL saturs var palikt tukšs.
Web Components (Shadow DOM) Atvērtas shadow root struktūras tiek ierakstītas kopā ar saturu. Slēgtas shadow root struktūras skriptiem nav pieejamas; to saturs atskaņojumā trūkst.
Datu pārraide & pārlūka krātuve Dati tiek sūtīti pa šifrētu WebSocket savienojumu (HTTPS/WSS). Ja to nevar izveidot, piemēram, starpniekservera dēļ, skripts izmanto rezerves šifrētu HTTP ceļu; ļoti lieli lapu momentuzņēmumi tiek augšupielādēti atsevišķi pa HTTPS. MousePlayer neiestata sīkdatnes; tas jūsu vietnē izmanto pārlūka lokālo un sesijas krātuvi.
AFK dīkstāves periodi Ja apmeklētājs atstāj cilni atvērtu un aiziet uz 20 minūtēm, dzinējs automātiski nosaka neaktivitāti un saīsina dīkstāves posmu atskaņojumā, lai jums nebūtu jātērē laiks nekustīgu ekrānu vērošanai.