MousePlayer necə işləyir

İzləmə arxitekturamıza, müxtəlif cihazlarda ekran ölçülərinin emalına və sistem sərhədlərinə dair sadə təlimat.

1. Niyə video qeydindən istifadə etmirik

Vizual analitika alətlərinin ziyarətçi ekranını standart video faylları (MP4 və ya WebM kimi) şəklində qeydə aldığı geniş yayılmış yanlış fikirdir. Bu, böyük ötürmə qabiliyyəti tələb edər, saytınızı ciddi yavaşladar və bulanıq, oxunmaz mətn yaradardı.

Əvəzində MousePlayer yüngül bir texnologiyadan istifadə edir: DOM anlıq görüntü telemetriyası. Onun əsas iş prinsipi belədir:

Strukturun anlıq görüntüsü

Ziyarətçi səhifənizi açanda skriptimiz HTML və üslub strukturunun mətn əsaslı “planını” çıxarır. Səhifənizin şəkil və video fayllarını kopyalamadan elementlərin yerini qeydə alır; pleyer təkrar oynatma zamanı şəkilləri ilkin ünvanlarından yükləyir. İstisna məzmunu şəkil kimi ötürülən canvas elementləridir (aşağıya baxın).

Koordinat telemetriyası

İstifadəçi qarşılıqlı əlaqədə olduqca hadisə axınını qeydə alırıq: siçan mövqeləri, sürüşdürmə dərinliyi, klik hədəfləri və brauzer ölçüsünün dəyişməsi, həmçinin səhifənin özündəki dəyişikliklər və parametrlərdən asılı olaraq konsol mesajları, uğursuz və ya yavaş sorğular və yükləmə vaxtı ölçmələri (Web Vitals). Hərəkət və kliklər kiçikdir; səhifənin anlıq görüntüləri və dəyişiklikləri səhifədən asılı olaraq xeyli böyük ola bilər və sıxılmış ötürülür.

Teatrda təkrar oynatma

İdarə panelinizdə seansa baxanda pleyerimiz qeydə alınmış struktur əsasında səhifəni yenidən qurur və virtual göstəricini real vaxtda onun üzərində hərəkət etdirir, mətn isə tam aydın qalır.

Yüngül qalmaq üçün qurulub: skript asinxron yüklənir və video əvəzinə kiçik rəqəmli məlumat nöqtələri ötürür, bu da öz yükünü az saxlayır. Bunun Core Web Vitals göstəricilərinizə təsiri səhifələrinizdən, hostinqinizdən və ziyarətçinin şəbəkəsindən asılıdır, buna görə bizdən rəqəm götürmək əvəzinə öz saytınızda ölçün. Konkret yüklənmə sürətinə zəmanət verilmir – 20-ci bölməyə baxın: Xidmət şərtləri.

2. Ekran ölçüləri & mobil cihazlarla iş

Bu gün istifadəçilər kiçik smartfonlardan ultraenli 4K masaüstü monitorlaradək hər şeydə gəzir. Saytlar müxtəlif ekran enlərinə uyğunlaşmaq üçün tərtibatını avtomatik dəyişir, yığır və yenidən düzür — buna adaptiv veb dizayn deyilir.

Ziyarətçinin dəqiq görünüş sahəsini necə təkrarlayırıq

Təkrar oynatmanın təhrif olunmaması üçün MousePlayer ziyarətçinin dəqiq görünüş sahəsi ölçülərini qeydə alır (məsələn, 390x844 smartfon üçün və ya 1920x1080 masaüstü monitor üçün). Teatr pleyerini açanda mühərrikimiz ziyarətçinin ilkin ekran nisbətini dəqiq əks etdirən miqyaslanmış təcrid olunmuş mühit yaradır.

Masaüstü & noutbuk ekranları

Standart kompüterlərdə eyni brauzer seansı daxilində fasiləsiz siçan hərəkətini və çoxvərəqli naviqasiyanı qeydə alırıq. Üzərinə gəldikdə açılan menyular səhifə bununla sənədini dəyişirsə, təkrar oynatmada görünür; sırf CSS hover effekti sənəddə görünmür və təkrar oynatmada canlandırılmır.

Smartfonlar & planşetlər

Toxunma ekranlarında üzərində hərəkət edən siçan göstəricisi yoxdur. MousePlayer toxunuş jestlərini, sürüşdürmələri və istiqamət dəyişikliklərini (şaquli və üfüqi) qeydə alaraq avtomatik uyğunlaşır.

Seans ortasında ölçü dəyişməsinin çətinliyi

Ziyarətçi seans ortasında planşetini döndərsə və ya masaüstü brauzer pəncərəsinin ölçüsünü dəyişsə, saytın tərtibatı dinamik dəyişir. MousePlayer bu ölçü dəyişmə hadisələrini qeydə alır və qarşılıqlı əlaqənin kontekstini qorumaq üçün oynatma sahəsini dərhal, fasiləsiz uyğunlaşdırır.

3. Sistem limitləri & texniki sərhədlər

İstifadəçi məxfiliyinə hörmət etmək, brauzer təhlükəsizliyini qorumaq və məlumat emalını sürətli saxlamaq üçün MousePlayer müəyyən texniki sərhədlərdə işləyir:

Sistem sərhədi MousePlayer bunu necə emal edir
iFrame-lər Səhifənizlə eyni mənbəli iframe-lər məzmunları və daxili qarşılıqlı əlaqələri ilə birlikdə qeydə alınır. Başqa mənbəli yerləşdirilmiş məzmun (məsələn, YouTube pleyerləri, Stripe ödəniş formaları) brauzer təhlükəsizlik siyasətləri (Same-Origin Policy) səbəbilə daxilən qeydə alına bilmir; təkrar oynatmada yer tutucu kimi görünür və orada yüklənmir.
Həssas daxiletmə sahələri (şəxsi məlumatlar) Parol və ödəniş sahələri hər maskalama səviyyəsində ziyarətçinin cihazında maskalanır və bütün forma daxiletməsinin tam maskalanması hər resurs üçün standartdır. Nəyin yazıldığını deyil, yazmanın baş verdiyini görürsünüz. İki məhdudiyyət var: iki zəif maskalama səviyyəsi yalnız yazılı təsdiqimizlə aktivləşir və maskalama öz səhifənizin sənəddə göstərdiyi məzmuna heç vaxt çatmır – ünvan göstərən təsdiq səhifəsi anlıq görüntünün bir hissəsidir. Hər ikisi burada izah olunur: DPA.
Canvas & WebGL elementləri Canvas məzmunu şəkil kimi qeydə alınır: bir dəfə səhifənin anlıq görüntüsü ilə və sonra hər dəyişdikdə, ən çox təxminən saniyədə bir dəfə və ölçü limiti ilə. Buna görə hamar animasiyalar kadr ardıcıllığı kimi görünür. Maskalanmış sahələrdə və ya başqa mənbəli şəkilləri olan canvas elementlərində şəkil ötürülmür; WebGL məzmunu boş qala bilər.
Veb komponentləri (Shadow DOM) Açıq shadow root-lar məzmunları ilə birlikdə qeydə alınır. Bağlı shadow root-lar skriptlər üçün əlçatmazdır; məzmunları təkrar oynatmada yoxdur.
Ötürmə & brauzer yaddaşı Məlumat şifrələnmiş WebSocket bağlantısı (HTTPS/WSS) ilə göndərilir. Məsələn, proksi səbəbilə bağlantı qurula bilməzsə, skript şifrələnmiş HTTP yoluna keçir; çox böyük səhifə görüntüləri ayrıca HTTPS ilə yüklənir. MousePlayer kuki təyin etmir; saytınızdakı brauzerin yerli yaddaşı və seans yaddaşından istifadə edir.
Qeyri-aktiv AFK dövrləri Ziyarətçi vərəqi açıq qoyub 20 dəqiqə uzaqlaşarsa, mühərrikimiz qeyri-aktivliyi avtomatik aşkarlayır və statik ekranlara baxmaqla vaxt itirməməyiniz üçün təkrar oynatma zamanı boşluğu sıxır.