Melacak Pengunjung Website Menggunakan CSS

Jan Brömer, seorang mahasiswa fisika dari Jerman yang tertarik pada pemrograman, menerbitkan contoh di GitHub tentang pelacakan pergerakan pengunjung di situs hanya menggunakan CSS, tanpa menggunakan kekuatan JavaScript. Kode yang disediakan oleh Ian memungkinkan, dengan menggunakan bahasa formal untuk mendeskripsikan tampilan dokumen, mengumpulkan informasi tertentu tentang pengguna - resolusi layar perangkatnya, jenis browser (atau mesin), keberadaan font tertentu, dan lagi. Dimungkinkan juga untuk melacak tautan yang diikuti atau dipindahkan oleh pengguna. Dengan menggunakan tabel bidang yang tidak terlihat di latar belakang halaman, Anda dapat mengidentifikasi kekhasan menggerakkan mouse melintasi layar. Namun, Anda dapat menggunakan metode pelacakan di atas hanya jika pengguna mengunjungi halaman untuk pertama kalinya atau mengarahkan mouse ke sel tertentu dari tabel tersembunyi, karena tindakan berulang tidak diperhitungkan. Anda dapat memeriksa pengoperasian metode ini di sini . Untuk menggunakan metode ini, Anda dapat menambahkan gambar dari sumber eksternal ke CSS menggunakan url (“foo.bar”). Karena sumber daya dimuat hanya bila diperlukan, alih-alih gambar, Anda dapat menentukan tautan ke skrip kolektor dan mengikatnya ke peristiwa seperti mengeklik tautan atau menggerakkan mouse ke tautan. Jadi kita bisa membuat pemilih di CSS yang memicu URL tertentu ketika pengguna mengklik link:

# link2 : active :: after {
     content : url ( " track.php? action = link2_clicked " );
}

Deteksi jenis browser didasarkan pada aturan @supports . Di sini Anda perlu memeriksa beberapa properti CSS untuk browser, seperti -webkit-appearance:

@supports ( -webkit-appearance : none ) {
     #chrome_detect :: after {
         content : url ( " track.php? action = browser_chrome " );
    }
}

Font dapat digunakan untuk menentukan OS pengguna, karena OS yang berbeda mengirimkan font yang berbeda (misalnya, "Calibri" di Windows). Untuk menentukan font, Anda perlu membuat keluarga font baru, sumber pemuatannya adalah skrip pengumpulan data. Selanjutnya, di blok teks, font yang diuji ditunjukkan terlebih dahulu, dan font dari keluarga baru ditunjukkan kedua. Selanjutnya, teks akan mencoba menyesuaikan gaya font; jika font pertama ada, maka font kedua akan diabaikan. Namun jika tidak ada font yang perlu diperiksa, maka browser akan mencoba menggunakan font tiruan sebagai cadangan dan mengirimkan permintaan ke skrip eksternal:

@ font-face {
     font-family : Font1;
    src : url ( " track.php? action = font1 " );
}

# font_detection1 {
     font-family : Calibri, Font1;
}

Jika setelah menggunakan cara tersebut tidak ada hasil atau muncul peringatan PHP, berarti nilai properti salah atau pengguna belum mengunjungi halaman/link tersebut.