Nasıl Çalışır: Teknoloji, Çözünürlükler ve Sınırlar

1. Neden Video Kaydı Kullanmıyoruz?

Görsel analiz araçlarının ziyaretçi ekranını standart video dosyalarıyla (MP4 veya WebM gibi) kaydettiği sık görülen bir yanılgıdır. Bu, çok fazla bant genişliği tüketir, web sitenizi ciddi biçimde yavaşlatır ve bulanık, okunamayan metin üretirdi.

MousePlayer bunun yerine şu hafif teknolojiyi kullanır: DOM Anlık Görüntü Telemetrisi. Temel çalışma biçimi şöyledir:

Plan Anlık Görüntüsü

Ziyaretçi sayfanızı açtığında betiğimiz HTML ve stil yapınızın metin tabanlı “planını” çıkarır. Sayfanızın görüntü veya video dosyalarını kopyalamadan öğelerin yerlerini kaydeder; oynatıcı, yeniden oynatma sırasında görüntüleri asıl adreslerinden yükler. İstisna, içeriği görüntü olarak iletilen canvas öğeleridir (aşağıya bakın).

Koordinat Telemetrisi

Kullanıcı etkileşirken olay akışını kaydederiz: fare konumları, kaydırma derinliği, tıklama hedefleri ve tarayıcı boyutlandırması; ayrıca sayfanın değişiklikleri ve ayarlara göre konsol mesajları, başarısız veya yavaş istekler ve yükleme süresi ölçümleri (Web Vitals). Hareket ve tıklamalar küçüktür; sayfa anlık görüntüleriyle değişiklikler sayfaya göre çok daha büyük olabilir ve sıkıştırılarak iletilir.

Tiyatroda Yeniden Oynatma

Gösterge panelinizde oturumu izlediğinizde oynatıcımız, kaydedilen planla sayfayı yeniden oluşturur ve metni net tutarak sanal işaretçiyi üzerinde gerçek zamanlı hareket ettirir.

Hafif kalmak için tasarlandı: Betik eşzamansız yüklenir, video yerine küçük sayısal veri noktaları ileterek kendi yükünü düşük tutar. Bunun Core Web Vitals üzerindeki etkisi sayfalarınıza, barındırmanıza ve ziyaretçinizin ağına bağlıdır; bizden bir sayı almak yerine kendi sitenizde ölçün. Belirli bir yükleme hızı garanti edilmez – şu belgenin 20. maddesine bakın: Hizmet Şartları.

2. Ekran Çözünürlükleri & Mobil Cihazlar

Günümüz kullanıcıları küçük akıllı telefonlardan ultra geniş 4K masaüstü monitörlerine kadar her cihazı kullanır. Web siteleri farklı ekran genişliklerine uymak için yerleşimlerini otomatik kaydırır, katlar ve yeniden düzenler; bu, duyarlı web tasarımı olarak bilinir.

Ziyaretçinin Tam Görünüm Alanıyla Nasıl Eşleşiriz?

Yeniden oynatmanın bozuk görünmemesi için MousePlayer ziyaretçinin tam görünüm alanı boyutlarını kaydeder (örneğin akıllı telefon için 390x844 veya masaüstü monitör için 1920x1080 ). Tiyatro oynatıcısını açtığınızda motorumuz, ziyaretçinin asıl ekran oranını aynen yansıtan ölçekli bir yalıtılmış ortam oluşturur.

Masaüstü & Dizüstü Ekranları

Standart bilgisayarlarda, aynı tarayıcı oturumundaki sürekli fare hareketini ve çok sekmeli gezinmeyi kaydederiz. Fare üzerine geldiğinde açılan menüler, sayfa bunu yaparken belgesini değiştiriyorsa yeniden oynatmada görünür. Yalnızca CSS ile oluşan hover etkisi belgede görünmez ve yeniden oynatılmaz.

Akıllı Telefonlar & Tabletler

Dokunmatik ekranlarda öğelerin üzerinde gezinen fare işaretçisi yoktur. MousePlayer dokunmaları, sürükleyerek kaydırmayı ve yön değişikliklerini (dikey/yatay) kaydederek otomatik uyum sağlar.

Oturum Sırasında Boyutlandırma Sorunu

Ziyaretçi oturum sırasında tabletini döndürür veya masaüstü tarayıcı penceresini boyutlandırırsa site yerleşimi dinamik değişir. MousePlayer bu pencere boyutlandırma olaylarını yakalar ve etkileşim bağlamını korumak için oynatma alanını anında, kesintisiz ayarlar.

3. Sistem Sınırları & Teknik Kısıtlar

Gizliliğe saygı göstermek, tarayıcı güvenliğini korumak ve verileri hızlı işlemek için MousePlayer belirlenmiş teknik sınırlar içinde çalışır:

Sistem Sınırı	MousePlayer Nasıl Ele Alır?
iFrame'ler	Sayfanızla aynı kökene sahip iframe'ler, içerikleri ve içlerindeki etkileşimlerle kaydedilir. Başka kökenden gömülü içerikler (ör. YouTube oynatıcısı, Stripe ödeme formu) tarayıcı güvenlik politikaları (Same-Origin Policy) nedeniyle içten kaydedilemez; yeniden oynatmada yer tutucu olarak görünür ve orada yüklenmez.
Hassas Girdi Alanları (PII)	Parola ve ödeme alanları her maskeleme düzeyinde ziyaretçinin cihazında maskelenir; tüm form girdilerinin tam maskelenmesi her site için varsayılandır. Ne yazıldığını değil, yazıldığını görürsünüz. İki sınır vardır: daha zayıf iki maskeleme düzeyi yalnızca yazılı onayımızla açılır; maskeleme, kendi sayfanızın belgeye yazdıklarına hiç ulaşmaz – adres gösteren onay sayfası anlık görüntünün parçasıdır. İkisi de şu belgede açıklanır: DPA.
Canvas & WebGL Öğeleri	Canvas içeriği görüntü olarak kaydedilir: sayfa anlık görüntüsüyle bir kez, sonra değiştikçe en fazla yaklaşık saniyede bir ve boyut sınırıyla. Akıcı animasyonlar bu nedenle kare dizisi olarak görünür. Maskeli alanlarda veya başka kökenden görüntü içeren canvas öğelerinde görüntü iletilmez; WebGL içeriği boş kalabilir.
Web Bileşenleri (Shadow DOM)	Açık shadow root'lar içerikleriyle kaydedilir. Kapalı shadow root'lara betikler erişemez; içerikleri yeniden oynatmada yoktur.
Aktarım & Tarayıcı Depolaması	Veriler şifreli WebSocket bağlantısıyla (HTTPS/WSS) gönderilir. Örneğin proxy nedeniyle kurulamazsa betik şifreli HTTP yoluna geçer; çok büyük sayfa anlık görüntüleri HTTPS üzerinden ayrıca yüklenir. MousePlayer çerez yerleştirmez; sitenizde tarayıcının yerel depolamasını ve oturum depolamasını kullanır.
Hareketsiz AFK Süreleri	Ziyaretçi sekmesini açık bırakıp 20 dakika uzaklaşırsa motorumuz hareketsizliği otomatik algılar ve sabit ekran izleyerek zaman kaybetmemeniz için yeniden oynatmada boşluğu sıkıştırır.

Nasıl yardımcı olabiliriz?