Cara Kerja MousePlayer

Panduan sederhana tentang arsitektur pelacakan kami, penanganan resolusi layar lintas perangkat, dan batas sistem.

1. Mengapa Kami Tidak Menggunakan Perekaman Video

Kesalahpahaman yang umum adalah bahwa alat analitik visual merekam file video standar (seperti MP4 atau WebM) dari layar pengunjung. Hal itu akan menghabiskan bandwidth besar, sangat memperlambat situs web Anda, dan menghasilkan teks buram yang tidak terbaca.

Sebagai gantinya, MousePlayer menggunakan teknologi ringan yang disebut Telemetri Snapshot DOM. Berikut cara kerja dasarnya:

Snapshot Cetak Biru

Saat pengunjung membuka halaman Anda, skrip kami mengambil “cetak biru” berbasis teks dari struktur HTML dan gaya Anda. Skrip merekam lokasi elemen tanpa menyalin file gambar atau video halaman Anda; pemutar memuat gambar dari alamat aslinya selama pemutaran ulang. Pengecualiannya adalah elemen canvas, yang isinya dikirim sebagai gambar (lihat di bawah).

Telemetri Koordinat

Saat pengguna berinteraksi, kami merekam aliran peristiwa: posisi mouse, kedalaman gulir, sasaran klik, dan perubahan ukuran browser, serta perubahan pada halaman itu sendiri dan, bergantung pada pengaturan, pesan konsol, permintaan yang gagal atau lambat, dan pengukuran waktu pemuatan (Web Vitals). Gerakan dan klik berukuran kecil; snapshot dan perubahan halaman dapat jauh lebih besar bergantung pada halaman, dan dikirim dalam bentuk terkompresi.

Pemutaran Ulang Teater

Saat Anda menonton sesi di dasbor, pemutar kami membuat ulang halaman dengan cetak biru yang direkam dan menggerakkan penunjuk virtual di atasnya dalam waktu nyata, sehingga teks tetap sangat tajam.

Dirancang agar tetap ringan: skrip dimuat secara asinkron dan mengirim titik data numerik kecil, bukan video, sehingga jejaknya sendiri tetap kecil. Dampaknya terhadap Core Web Vitals bergantung pada halaman, hosting, dan jaringan pengunjung Anda, jadi ukurlah di situs sendiri alih-alih mengandalkan angka dari kami. Tidak ada jaminan kecepatan pemuatan tertentu – lihat pasal 20 Ketentuan Layanan.

2. Menangani Resolusi Layar & Perangkat Seluler

Pengguna saat ini menjelajah dengan berbagai perangkat, dari ponsel ringkas hingga monitor desktop 4K ultralebar. Situs web secara otomatis menggeser, melipat, dan menyusun ulang tata letak agar sesuai dengan lebar layar yang berbeda — konsep yang dikenal sebagai Desain Web Responsif.

Cara Kami Menyesuaikan Area Tampilan Pengunjung Secara Tepat

Agar pemutaran ulang tidak tampak terdistorsi, MousePlayer merekam dimensi area tampilan pengunjung secara tepat (misalnya, 390x844 untuk ponsel atau 1920x1080 untuk monitor desktop). Saat Anda membuka pemutar teater, mesin kami membuat sandbox berskala yang mencerminkan rasio layar asli pengunjung secara tepat.

Layar Desktop & Laptop

Pada komputer standar, kami merekam gerakan mouse berkelanjutan dan navigasi beberapa tab dalam sesi browser yang sama. Menu yang terbuka saat penunjuk diarahkan muncul dalam pemutaran ulang jika halaman mengubah dokumennya saat itu; efek hover CSS murni tidak terlihat dalam dokumen dan tidak direproduksi dalam pemutaran ulang.

Ponsel & Tablet

Layar sentuh tidak memiliki penunjuk mouse yang melayang. MousePlayer menyesuaikan otomatis dengan merekam gestur ketukan, guliran geser, dan perubahan orientasi (potret dan lanskap).

Tantangan Perubahan Ukuran di Tengah Sesi

Jika pengunjung memutar tablet atau mengubah ukuran jendela browser desktop di tengah sesi, tata letak situs web berubah secara dinamis. MousePlayer merekam peristiwa perubahan ukuran jendela ini dan langsung menyesuaikan canvas pemutaran dengan mulus agar konteks interaksi tetap terjaga.

3. Batas Sistem & Batasan Teknis

Untuk menghormati privasi pengguna, menjaga keamanan browser, dan mempertahankan pemrosesan data yang cepat, MousePlayer beroperasi dalam batasan teknis yang ditentukan:

Batas Sistem Cara MousePlayer Menanganinya
iFrames iframe dengan asal yang sama dengan halaman Anda direkam beserta isi dan interaksi di dalamnya. Konten sematan dari asal lain (misalnya, pemutar YouTube, formulir pembayaran Stripe) tidak dapat direkam bagian dalamnya karena kebijakan keamanan browser (Same-Origin Policy); konten tersebut muncul sebagai placeholder dalam pemutaran ulang dan tidak dimuat di sana.
Kolom Masukan Sensitif (PII) Kolom kata sandi dan pembayaran disamarkan di perangkat pengunjung pada setiap tingkat penyamaran, dan penyamaran penuh semua masukan formulir adalah bawaan untuk setiap situs. Anda melihat bahwa pengetikan terjadi, bukan apa yang diketik. Ada dua batasan: dua tingkat penyamaran yang lebih lemah hanya diaktifkan dengan persetujuan tertulis kami, dan penyamaran tidak pernah mencakup apa yang dicetak halaman Anda sendiri ke dalam dokumen – halaman konfirmasi yang menampilkan alamat merupakan bagian dari snapshot. Keduanya dijelaskan dalam Perjanjian Pemrosesan Data.
Elemen Canvas & WebGL Isi canvas direkam sebagai gambar: sekali bersama snapshot halaman dan kembali setiap kali berubah, paling sering sekitar sekali per detik dan dengan batas ukuran. Karena itu, animasi halus muncul sebagai rangkaian bingkai. Tidak ada gambar yang dikirim dari area tersamarkan atau elemen canvas yang berisi gambar dari asal lain; konten WebGL dapat tetap kosong.
Komponen Web (Shadow DOM) Shadow root terbuka direkam beserta isinya. Shadow root tertutup tidak dapat diakses skrip; isinya tidak ada dalam pemutaran ulang.
Transportasi & Penyimpanan Browser Data dikirim melalui koneksi WebSocket terenkripsi (HTTPS/WSS). Jika koneksi tidak dapat dibuat, misalnya karena proksi, skrip beralih ke jalur HTTP terenkripsi; snapshot halaman yang sangat besar diunggah terpisah melalui HTTPS. MousePlayer tidak memasang cookie; menggunakan penyimpanan lokal dan penyimpanan sesi browser di situs Anda.
Periode AFK Tanpa Aktivitas Jika pengunjung membiarkan tab terbuka dan pergi selama 20 menit, mesin kami otomatis mendeteksi ketidakaktifan dan memadatkan celah waktu tanpa aktivitas saat pemutaran ulang agar Anda tidak membuang waktu menonton layar diam.