Paano Gumagana ang MousePlayer
Simpleng gabay sa arkitektura ng aming pagsubaybay, paghawak ng screen resolution sa iba’t ibang device at mga hangganan ng system.
1. Bakit Hindi Kami Gumagamit ng Video Recording
Karaniwang maling akala na nagre-record ang mga tool ng biswal na analytics ng karaniwang video file (gaya ng MP4 o WebM) ng screen ng bisita. Mangangailangan iyon ng napakalaking bandwidth, labis na magpapabagal sa inyong website at lilikha ng malabo at hindi mabasang teksto.
Sa halip, gumagamit ang MousePlayer ng magaan na teknolohiyang tinatawag na DOM Snapshot Telemetry. Ganito ito gumagana sa pinakapundasyon:
Ang Blueprint Snapshot
Kapag binuksan ng bisita ang inyong pahina, kumukuha ang aming script ng tekstong “blueprint” ng istruktura ng HTML at styling. Nire-record nito ang lokasyon ng mga elemento nang hindi kinokopya ang mga image o video file ng pahina; nilo-load ng player ang mga larawan mula sa orihinal nilang address sa replay. Ang eksepsiyon ay mga canvas element, na ipinapadala ang nilalaman bilang larawan (tingnan sa ibaba).
Telemetry ng Coordinate
Habang nakikipag-ugnayan ang user, nagre-record kami ng daloy ng mga event: posisyon ng mouse, lalim ng scroll, target ng click at pagbabago ng laki ng browser, kasama ang mga pagbabago sa pahina mismo at, ayon sa setting, mga mensahe ng console, nabigo o mabagal na request at sukat ng oras ng pag-load (Web Vitals). Maliit ang mga galaw at click; maaaring mas malaki ang snapshot at pagbabago ng pahina ayon sa pahina, at ipinapadala nang compressed.
Ang Theatre Replay
Kapag nanonood kayo ng session sa inyong dashboard, binubuo muli ng aming player ang pahina gamit ang na-record na blueprint at ginagalaw ang virtual na cursor dito sa totoong oras habang nananatiling napakalinaw ang teksto.
Ginawang manatiling magaan: asynchronous na naglo-load ang script at nagpapadala ng maliliit na numerong data point sa halip na video, kaya maliit ang sarili nitong footprint. Ang epekto nito sa inyong Core Web Vitals ay nakadepende sa inyong mga pahina, hosting at network ng bisita, kaya sukatin sa sarili ninyong site sa halip na tanggapin ang bilang mula sa amin. Walang garantisadong partikular na bilis ng pag-load – tingnan ang seksiyon 20 ng Mga Tuntunin ng Serbisyo.
2. Paghawak sa mga Screen Resolution & Mobile Device
Gumagamit ang mga user ngayon ng lahat mula sa maliit na smartphone hanggang sa napakalapad na 4K desktop monitor. Awtomatikong gumagalaw, natitiklop at naaayos muli ng mga website ang kanilang layout para magkasya sa iba’t ibang lapad ng screen—isang konseptong tinatawag na Responsive Web Design.
Paano Namin Tinutumbasan ang Eksaktong Viewport ng Bisita
Para hindi magmukhang baluktot ang replay, nire-record ng MousePlayer ang eksaktong sukat ng viewport ng bisita (hal., 390x844 para sa smartphone o 1920x1080 para sa desktop monitor). Kapag binuksan ninyo ang Theatre player, lumilikha ang aming engine ng scaled na sandbox na eksaktong tumutugma sa orihinal na ratio ng screen ng bisita.
Mga Desktop & Laptop Screen
Sa karaniwang computer, kinukuha namin ang tuloy-tuloy na galaw ng mouse at navigation sa maraming tab sa loob ng iisang browser session. Lumalabas sa replay ang mga menu na bumubukas sa hover kung binabago nito ang dokumento ng pahina; hindi nakikita sa dokumento ang purong CSS hover effect at hindi ito nabubuo muli sa replay.
Mga Smartphone & Tablet
Walang naka-hover na mouse cursor ang touchscreen. Awtomatikong umaangkop ang MousePlayer sa pamamagitan ng pag-record ng mga tap gesture, swipe scroll at pagbabago ng orientation (portrait laban sa landscape).
Ang Hamon ng Pagbabago ng Laki sa Gitna ng Session
Kung iikot ng bisita ang tablet o babaguhin ang laki ng desktop browser window sa gitna ng session, nagbabago nang dynamic ang layout ng website. Kinukuha ng MousePlayer ang mga event na ito ng pagbabago ng laki ng window at maayos na inaangkop agad ang playback canvas para mapanatili ang konteksto ng interaction.
3. Mga Limitasyon ng System & Hangganang Teknikal
Para igalang ang privacy ng user, panatilihin ang seguridad ng browser at mabilis na pagproseso ng datos, gumagana ang MousePlayer sa loob ng mga tinukoy na teknikal na hangganan:
| Hangganan ng System | Paano Ito Hinahawakan ng MousePlayer |
|---|---|
| iFrames | Nire-record ang mga iframe na kapareho ng origin ng inyong pahina kasama ang nilalaman at interaction sa loob. Hindi mare-record sa loob ang naka-embed na nilalamang iba ang origin (hal. YouTube player, form ng bayad sa Stripe) dahil sa mga patakaran sa seguridad ng browser (Same-Origin Policy); lumalabas itong placeholder sa replay at hindi nilo-load doon. |
| Mga Sensitibong Input Field (PII) | Naka-mask ang mga password at payment field sa device ng bisita sa bawat antas ng masking, at buong masking ng lahat ng input ng form ang default para sa bawat site. Nakikita ninyong may nag-type, hindi kung ano ang tina-type. May dalawang limitasyon: ang dalawang mas mahinang antas ng masking ay nae-enable lamang sa nakasulat naming pag-apruba, at hindi naaabot ng masking ang mismong inilalagay ng inyong pahina sa dokumento – bahagi ng snapshot ang pahina ng kumpirmasyong nagpapakita ng address. Pareho silang nakasaad sa DPA. |
| Mga Elementong Canvas & WebGL | Nire-record ang nilalaman ng canvas bilang larawan: isang beses kasama ng snapshot ng pahina at muli tuwing magbabago, hanggang humigit-kumulang isang beses bawat segundo at may limitasyon ng laki. Kaya sunod-sunod na frame ang makikita sa makinis na animation. Walang ipinapadalang larawan sa mga naka-mask na bahagi o canvas element na may larawan mula sa ibang origin; maaaring manatiling blangko ang WebGL content. |
| Mga Web Component (Shadow DOM) | Nire-record ang mga bukas na shadow root kasama ang kanilang nilalaman. Hindi naaabot ng script ang mga saradong shadow root; wala sa replay ang kanilang nilalaman. |
| Transport & Browser Storage | Ipinapadala ang datos sa encrypted na WebSocket connection (HTTPS/WSS). Kung hindi ito maitatag, halimbawa dahil sa proxy, gumagamit ang script ng encrypted na HTTP route bilang fallback; hiwalay na ina-upload sa HTTPS ang napakalaking snapshot ng pahina. Hindi nagtatakda ng cookie ang MousePlayer; ginagamit nito ang local storage at session storage ng browser sa inyong site. |
| Mga Hindi Aktibong Panahong AFK | Kung iwang bukas ng bisita ang tab at lumayo nang 20 minuto, awtomatikong tinutukoy ng aming engine ang kawalan ng aktibidad at pinaiikli ang puwang sa replay para hindi kayo mag-aksaya ng oras sa hindi gumagalaw na screen. |