Verfolgen von Website-Besuchern mithilfe von CSS

Jan Brömer, ein Physikstudent aus Deutschland mit Interesse an Programmierung, veröffentlichte auf GitHub ein Beispiel für die Verfolgung der Besucherbewegungen auf Websites, die nur CSS verwenden, ohne die Leistungsfähigkeit von JavaScript zu nutzen. Der von Ian bereitgestellte Code ermöglicht es, mithilfe einer formalen Sprache das Erscheinungsbild eines Dokuments zu beschreiben und bestimmte Informationen über den Benutzer zu sammeln – die Bildschirmauflösung seines Geräts, den Typ des Browsers (oder der Engine), das Vorhandensein bestimmter Schriftarten usw mehr. Es ist auch möglich, die Links zu verfolgen, denen der Benutzer gefolgt ist oder zu denen er den Cursor bewegt hat. Anhand einer unsichtbaren Feldtabelle im Hintergrund der Seite können Sie die Besonderheiten beim Bewegen der Maus über den Bildschirm erkennen. Allerdings können Sie die obige Methode zur Nachverfolgung nur verwenden, wenn der Benutzer die Seite zum ersten Mal besucht oder mit der Maus über eine bestimmte Zelle einer ausgeblendeten Tabelle fährt, da wiederholte Aktionen nicht berücksichtigt werden. Sie können die Funktionsweise der Methode hier überprüfen . Um die Methode zu verwenden, können Sie mithilfe der URL („foo.bar“) ein Bild aus einer externen Quelle zum CSS hinzufügen. Da Ressourcen nur bei Bedarf geladen werden, können Sie anstelle eines Bildes einen Link zu einem Collector-Skript angeben und ihn an Ereignisse wie das Klicken auf einen Link oder das Bewegen der Maus über einen Link binden. So können wir in CSS einen Selektor erstellen, der eine bestimmte URL auslöst, wenn ein Benutzer auf einen Link klickt:

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

Die Erkennung des Browsertyps basiert auf @supports- Regeln . Hier müssen Sie einige CSS-Eigenschaften für den Browser überprüfen, wie zum Beispiel -webkit-appearance:

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

Schriftarten können verwendet werden, um das Betriebssystem des Benutzers zu bestimmen, da verschiedene Betriebssysteme unterschiedliche Schriftarten senden (z. B. „Calibri“ unter Windows). Um eine Schriftart zu definieren, müssen Sie eine neue Schriftartenfamilie erstellen, deren Ladequelle das Datenerfassungsskript sein wird. Als nächstes wird im Textblock zuerst die zu testende Schriftart und dann die Schriftart aus der neuen Familie angezeigt. Als nächstes versucht der Text, die Schriftart zu stilisieren; wenn die erste Schriftart vorhanden ist, wird die zweite ignoriert. Wenn jedoch keine zu prüfende Schriftart vorhanden ist, versucht der Browser, eine Dummy-Schriftart als Ersatz zu verwenden und sendet eine Anfrage an ein externes Skript:

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

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

Wenn nach Verwendung der Methode keine Ergebnisse vorliegen oder eine PHP-Warnung erscheint, bedeutet dies, dass der Eigenschaftswert falsch ist oder der Benutzer die Seite/den Link noch nicht besucht hat.