ติดตามผู้เยี่ยมชมเว็บไซต์โดยใช้ CSS

Jan Brömer นักศึกษาฟิสิกส์จากเยอรมนีที่สนใจด้านการเขียนโปรแกรม เผยแพร่ตัวอย่างบนGitHubในการติดตามความเคลื่อนไหวของผู้เข้าชมเว็บไซต์ที่ใช้ CSS เพียงอย่างเดียว โดยไม่ต้องใช้พลังของ JavaScript รหัสที่ Ian ให้มาอนุญาตให้ใช้ภาษาที่เป็นทางการเพื่ออธิบายลักษณะที่ปรากฏของเอกสาร เพื่อรวบรวมข้อมูลบางอย่างเกี่ยวกับผู้ใช้ - ความละเอียดหน้าจอของอุปกรณ์ของเขา ประเภทของเบราว์เซอร์ (หรือกลไก) การมีอยู่ของแบบอักษรที่ระบุ และ มากกว่า. นอกจากนี้ยังสามารถติดตามลิงก์ที่ผู้ใช้ติดตามหรือย้ายเคอร์เซอร์ไปได้อีกด้วย การใช้ตารางฟิลด์ที่มองไม่เห็นบนพื้นหลังของหน้า คุณสามารถระบุลักษณะเฉพาะของการเลื่อนเมาส์ผ่านหน้าจอได้ อย่างไรก็ตาม คุณสามารถใช้วิธีการข้างต้นเพื่อติดตามได้ก็ต่อเมื่อผู้ใช้เข้าชมเพจเป็นครั้งแรกหรือวางเมาส์ไว้เหนือเซลล์เฉพาะของตารางที่ซ่อนไว้ เนื่องจากการกระทำซ้ำๆ จะไม่ถูกนำมาพิจารณา คุณสามารถตรวจสอบการทำงานของวิธีการได้ที่นี่ หากต้องการใช้วิธีการนี้ คุณสามารถเพิ่มรูปภาพจากแหล่งภายนอกไปยัง CSS โดยใช้ url (“foo.bar”) เนื่องจากทรัพยากรจะถูกโหลดเมื่อจำเป็นเท่านั้น แทนที่จะเป็นรูปภาพ คุณสามารถระบุลิงก์ไปยังสคริปต์ตัวรวบรวมและผูกเข้ากับเหตุการณ์ เช่น การคลิกลิงก์ หรือการเลื่อนเมาส์ไปเหนือลิงก์ ดังนั้นเราจึงสามารถสร้างตัวเลือกใน CSS ที่ทริกเกอร์ URL เฉพาะเมื่อผู้ใช้คลิกลิงก์:

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

การตรวจหาประเภทเบ รา ว์เซอร์จะขึ้นอยู่กับ กฎ @supports ที่นี่คุณจะต้องตรวจสอบคุณสมบัติ CSS บางอย่างสำหรับเบราว์เซอร์ เช่น -webkit-appearance:

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

สามารถใช้แบบอักษรเพื่อกำหนดระบบปฏิบัติการของผู้ใช้ได้ เนื่องจากระบบปฏิบัติการที่ต่างกันจะส่งแบบอักษรที่แตกต่างกัน (เช่น "Calibri" บน Windows) ในการกำหนดแบบอักษร คุณต้องสร้างตระกูลแบบอักษรใหม่ ซึ่งเป็นแหล่งที่มาสำหรับการโหลดซึ่งจะเป็นสคริปต์การรวบรวมข้อมูล ถัดไป ในกลุ่มข้อความ แบบอักษรที่กำลังทดสอบจะถูกระบุก่อน และแบบอักษรจากตระกูลใหม่จะถูกระบุเป็นอันดับสอง ถัดไป ข้อความจะพยายามจัดสไตล์แบบอักษร หากมีแบบอักษรแรกอยู่ แบบอักษรที่สองจะถูกละเว้น แต่หากไม่มีแบบอักษรให้ตรวจสอบ เบราว์เซอร์จะพยายามใช้แบบอักษรจำลองเป็นทางเลือกและส่งคำขอไปยังสคริปต์ภายนอก:

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

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

หากหลังจากใช้วิธีการนี้แล้วไม่มีผลลัพธ์ หรือมีคำเตือน PHP ปรากฏขึ้น หมายความว่าค่าคุณสมบัติเป็นเท็จ หรือผู้ใช้ยังไม่ได้เยี่ยมชมเพจ/ลิงก์