Comment Bear utilise CSS pour l’analytics

• Bear Blog publie un article sur son approche de l’analytics basée sur CSS, en mettant l’accent sur la vitesse, l’efficacité et la robustesse
• Bear Blog évite d’utiliser du JavaScript côté client en raison des faiblesses face aux bloqueurs de publicité et de l’incapacité à distinguer le trafic des bots de celui des humains
• L’auteur explique les limites de l’analytics à partir des logs serveur : tout le trafic est traité de la même façon et le trafic des bots n’est pas identifié avec précision
• La solution proposée par l’auteur consiste à déclencher une lecture via CSS avec le code suivant : body:hover { border-image: url("/hit/{{ post.id }}/?ref={{ request.META.HTTP_REFERER }}");}.
• La méthode se déclenche lorsque l’utilisateur déplace son curseur sur la page ou fait défiler sur mobile ; l’auteur estime qu’il s’agit d’un indicateur fiable de trafic humain
• Le système vérifie le user-agent pour confirmer qu’il ne s’agit pas d’un bot, extrait les informations sur le navigateur et la plateforme, puis hache l’adresse IP et la date afin de créer une "lecture" unique pour la page
• Le système ne stocke aucune information d’identification sur le lecteur, ni dans les cookies du navigateur ni sur le serveur
• L’auteur reconnaît les limites de cette méthode : plusieurs lectures depuis différents appareils partageant la même adresse IP sont comptées comme une seule lecture
• Malgré cela, l’auteur estime que cette méthode fournit un nombre de lectures précis et qu’elle est plus simple que beaucoup d’autres formes de collecte analytics

[GN⁺]

Commentaires sur Hacker News

• L’auteur de l’article a précisé qu’il utilise un hash des adresses IP pour éviter les vues en double sur une même journée, rendant ainsi chaque vue de page essentiellement unique. À la fin de chaque journée, une tâche worker les efface tout en conservant les informations de consultation.
• Un commentateur trouve l’idée d’utiliser le CSS comme déclencheur pour l’analytics très élégante et partage un exemple où une grille rectangulaire invisible est superposée à la page pour suivre la souris. Chaque cellule possède une image d’arrière-plan unique déclenchée au survol.
• Un autre commentateur critique le simple hachage de la date et de l’IP pour anonymiser les adresses IP, qualifiant cela de théâtre de la sécurité, et souligne que les fonctions de hachage cryptographique sont conçues pour être rapides, ce qui les rend vulnérables à des attaques par force brute pour retrouver l’adresse IP.
• Un utilisateur note que la méthode body:hover risque de manquer la plupart des utilisateurs « keyboard-only » et des agents utilisateurs utilisant des dispositifs sans pointeur (technologies d’assistance), en insistant sur la nécessité d’une approche plus inclusive.
• Un autre utilisateur pense que si l’analytics CSS gagne en popularité, les utilisateurs finiront aussi par se lasser du concept même d’analytics et tenteront de le contourner.
• Certains commentateurs saluent l’usage astucieux du CSS pour l’analytics et partagent leurs propres essais de méthodes similaires, comme charger de fausses images avec la balise <img>.
• Un utilisateur s’interroge sur l’objectif de collecter des données d’analytics pour un blog personnel dans un contexte non commercial.
• Un autre utilisateur suggère d’obtenir ces informations directement depuis le serveur HTTP au lieu d’utiliser l’analytics CSS.