Monitoraggio dei visitatori del sito Web tramite CSS

Jan Brömer, uno studente di fisica tedesco con un interesse per la programmazione, ha pubblicato su GitHub un esempio di tracciamento del movimento dei visitatori su siti utilizzando solo CSS, senza sfruttare la potenza di JavaScript. Il codice fornito da Ian consente, utilizzando un linguaggio formale per descrivere l'aspetto di un documento, di raccogliere determinate informazioni sull'utente: la risoluzione dello schermo del suo dispositivo, il tipo di browser (o motore), la presenza di caratteri specificati e Di più. È anche possibile tenere traccia dei collegamenti che l'utente ha seguito o su cui ha spostato il cursore. Utilizzando una tabella di campi invisibile sullo sfondo della pagina, puoi identificare le peculiarità del movimento del mouse sullo schermo. Tuttavia, puoi utilizzare il metodo sopra descritto per il monitoraggio solo se l'utente visita la pagina per la prima volta o passa il mouse su una cella specifica di una tabella nascosta, poiché le azioni ripetute non vengono prese in considerazione. Puoi verificare il funzionamento del metodo qui . Per utilizzare questo metodo, puoi aggiungere un'immagine da una fonte esterna al CSS utilizzando l'URL (“foo.bar”). Poiché le risorse vengono caricate solo quando necessario, anziché un'immagine, è possibile specificare un collegamento a uno script di raccolta e associarlo a eventi come fare clic su un collegamento o spostare il mouse su un collegamento. Quindi possiamo creare un selettore nei CSS che attiva un URL specifico quando un utente fa clic su un collegamento:

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

Il rilevamento del tipo di browser si basa sulle regole @supports . Qui devi controllare alcune proprietà CSS per il browser, come -webkit-appearance:

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

I caratteri possono essere utilizzati per determinare il sistema operativo dell'utente, poiché sistemi operativi diversi inviano caratteri diversi (ad esempio, "Calibri" su Windows). Per definire un carattere, è necessario creare una nuova famiglia di caratteri, la fonte per il caricamento che sarà lo script di raccolta dati. Successivamente, nel blocco di testo, viene indicato per primo il carattere da testare e per secondo il carattere della nuova famiglia. Successivamente il testo tenterà di stilizzare il carattere; se è presente il primo carattere, il secondo verrà ignorato. Ma se non ci sono caratteri da controllare, il browser tenterà di utilizzare un carattere fittizio come fallback e invierà una richiesta a uno script esterno:

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

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

Se dopo aver utilizzato il metodo non si ottengono risultati, oppure appare un avviso PHP, significa che il valore della proprietà è false oppure l'utente non ha ancora visitato la pagina/link.