Suivi des visiteurs du site Web à l'aide de CSS

Jan Brömer, un étudiant allemand en physique intéressé par la programmation, a publié sur GitHub un exemple de suivi des mouvements des visiteurs sur des sites en utilisant uniquement CSS, sans utiliser la puissance de JavaScript. Le code fourni par Ian permet, à l'aide d'un langage formel pour décrire l'apparence d'un document, de collecter certaines informations sur l'utilisateur - la résolution d'écran de son appareil, le type de navigateur (ou moteur), la présence de polices spécifiées, et plus. Il est également possible de suivre les liens que l'utilisateur a suivis ou vers lesquels a déplacé le curseur. À l'aide d'un tableau de champs invisible en arrière-plan de la page, vous pouvez identifier les particularités du déplacement de la souris sur l'écran. Cependant, vous ne pouvez utiliser la méthode de suivi ci-dessus que si l'utilisateur visite la page pour la première fois ou passe la souris sur une cellule spécifique d'un tableau masqué, car les actions répétées ne sont pas prises en compte. Vous pouvez vérifier le fonctionnement de la méthode ici . Pour utiliser la méthode, vous pouvez ajouter une image provenant d'une source externe au CSS en utilisant l'url (« foo.bar »). Étant donné que les ressources ne sont chargées qu'en cas de besoin, au lieu d'une image, vous pouvez spécifier un lien vers un script de collecteur et le lier à des événements tels que cliquer sur un lien ou déplacer la souris sur un lien. On peut donc créer un sélecteur en CSS qui déclenche une URL spécifique lorsqu'un utilisateur clique sur un lien :

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

La détection du type de navigateur est basée sur les règles @supports . Ici, vous devez vérifier certaines propriétés CSS du navigateur, telles que -webkit-apparence :

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

Les polices peuvent être utilisées pour déterminer le système d'exploitation de l'utilisateur, car différents systèmes d'exploitation envoient différentes polices (par exemple, « Calibri » sous Windows). Pour définir une police, vous devez créer une nouvelle famille de polices, la source de chargement qui sera le script de collecte de données. Ensuite, dans le bloc de texte, la police testée est indiquée en premier et la police de la nouvelle famille est indiquée en second. Ensuite, le texte tentera de styliser la police ; si la première police est présente, alors la seconde sera ignorée. Mais s'il n'y a pas de police à vérifier, alors le navigateur essaiera d'utiliser une police factice comme solution de secours et enverra une requête à un script externe :

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

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

Si après avoir utilisé la méthode, aucun résultat n'est obtenu ou si un avertissement PHP apparaît, cela signifie que la valeur de la propriété est fausse ou que l'utilisateur n'a pas encore visité la page/le lien.