Améliorez la détection des bots Google Analytics avec reCAPTCHA

Il y a des milliers et des milliers de robots, de robots d’exploration, d’araignées et d’autres robots effrayants qui ne font rien d’autre que parcourir des sites Web et récolter le contenu à l’intérieur à des fins pour lesquelles ils ont été affinés. Bien que Google Analytics fournisse une fonctionnalité de filtrage des bots pour filtrer le « spam » et le « trafic de bots » des vues, celle-ci est loin d’être suffisamment complète pour traiter toutes les instances de trafic de bots susceptibles d’entrer sur le site.

Vous avez peut-être remarqué le trafic de bots dans vos données même si vous avez activé le filtrage des bots. Par exemple, un tel trafic pourrait être caractérisé comme suit :

• Trafic sans source/support discernable
• Durée moyenne de session inférieure à <00:00:01
• Agent utilisateur identique/obsolète
• Trafic non converti / taux de rebond élevé
• Emplacement réseau un hôte cloud connu (par exemple AWS)

Heureusement, il existe de meilleurs moyens d’identifier ce trafic que de regarder les données bruyantes de Google Analytics. Google a introduit reCAPTCHA v3 qui vous permet de vérifier le trafic sans aucune interaction de l’utilisateur requise. Cela se fait avec une simple API JavaScript combinée à un point de terminaison de vérification côté serveur.

Dans cet article, Sébastien Pospischil et Philippe Schneider de Resolution Media partagera la solution avec vous. Ils vous montreront comment créer une API PHP simple sur votre serveur Web Apache pour gérer les requêtes de reCAPTCHA.

Je vais contribuer en construisant la même chose avec Node.js. N’oubliez pas que vous pouvez exécuter les deux (Apache et Node.js) dans Google Cloud en utilisant, par exemple, l’environnement standard App Engine. Ceci est utile si vous n’avez pas les ressources ou les capacités pour exécuter quelque chose comme ça sur vos propres serveurs Web.

Un grand merci à Philipp et Sebastian pour avoir partagé cette pépite de sagesse avec ce blog !

Commencer

Pour commencer, vous devrez générer un (gratuit) clé du site et un (gratuit) clef secrète pour votre utilisation de l’API reCAPTCHA. Rendez-vous sur https://www.google.com/recaptcha/admin/create et enregistrez un nouveau site à utiliser avec reCAPTCHA v3. Assurez-vous d’entrer tous les domaines à partir desquels ces demandes de vérification seront envoyées.

Une fois que vous avez tout ajouté et coché toutes les cases nécessaires, cliquez sur NOUS FAIRE PARVENIR pour récupérer vos clés.

Copiez les clés, car vous en aurez bientôt besoin lors de la configuration de la balise HTML personnalisée dans Google Tag Manager ainsi que du point de terminaison côté serveur.

Point de terminaison PHP

Dans ce chapitre, Philipp et Sebastian vous guideront à travers les étapes de création d’un point de terminaison PHP pour vérifier les requêtes reCAPTCHA. Ils vous montreront également comment créer la balise HTML personnalisée dans Google Tag Manager pour charger l’API JavaScript reCAPTCHA et vérifier le “bot-ness” de l’utilisateur.

Balise HTML personnalisée

Tout d’abord, configurons Google Tag Manager. Dans GTM, créez un nouveau Balise HTML personnalisée.

<style>   /* hides the recaptcha badge */   .grecaptcha-badge {     visibility: hidden !important;   } </style> <script src="https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key_"></script> <script>   grecaptcha.ready(function() {     grecaptcha.execute('_reCAPTCHA_site_key_', {       action: 'homepage'     }).then(function(token) {       var xhr = new XMLHttpRequest();       xhr.onload = function() {         if (xhr.response !== 'noChange') {           var greResult = JSON.parse(xhr.response);           window.dataLayer.push({             event: 'recaptcha',              recaptchaAnswer: greResult.success,             recaptchaScore: greResult.score           });         }       };       xhr.open('POST', '/gtm/recaptcha.php', true); //replace this with URL to your PHP fil       xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');       xhr.send('token=' + token + '&action=homepage');     });   }); </script>

Vous pouvez configurer cette balise pour qu’elle se déclenche sur le déclencheur de votre choix, bien qu’un déclencheur qui se déclenche lorsque la page se charge (par exemple, Toutes les pages, DOM prêt ou Fenêtre chargée) est recommandé.

Assurez-vous de modifier les éléments suivants :

• Les _reCAPTCHA_site_key chaîne sur les lignes 7 et 10 avec la valeur réelle clé du site vous avez copié depuis la console d’administration reCAPTCHA dans le chapitre précédent.
• L’URL de votre point de terminaison PHP à la ligne 24.

Ce bloc de code exécute l’API JavaScript reCAPTCHA dans le navigateur de l’utilisateur et envoie le résultat tokenisé au point de terminaison PHP que vous configurerez au chapitre suivant. Lorsqu’il reçoit une réponse, le score et l’état de réussite sont poussés dans dataLayer.

Le tout premier bloc de code dans la balise empêche le badge reCAPTCHA d’apparaître sur le site. Pensez à lire cette partie de la FAQ pour savoir comment modifier votre site pour permettre le masquage du badge.

Fichier PHP pour votre serveur

Créer un fichier recaptcha.php avec le code suivant, et chargez-le sur tous les domaines sur lesquels vous souhaitez valider les requêtes reCAPTCHA. Placez-le dans un sous-répertoire nommé /gtm/.

REMARQUE! Vous pouvez utiliser le chemin et le nom de fichier de votre choix pour le fichier PHP. N’oubliez pas de mettre à jour l’URL du point de terminaison de la requête HTTP de la balise HTML personnalisée en conséquence.

<?php 	// reCaptcha info     $url = 'https://www.google.com/recaptcha/api/siteverify';             $secret = "_reCAPTCHA_secret_key_"; 	$remoteip = $_SERVER['REMOTE_ADDR']; 	// Form info 	$action = $_POST['action']; 	$response = $_POST['token']; 	// Botscore 	$botscore = $_COOKIE['_rbs'];  	// Curl Request 	$curl = curl_init(); 	curl_setopt($curl, CURLOPT_URL, $url); 	curl_setopt($curl, CURLOPT_POST, true); 	curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); 	curl_setopt($curl, CURLOPT_POSTFIELDS, array( 		'secret' => $secret, 		'remoteip' => $remoteip, 		'action' => $action,		 		'response' => $response 	)); 	$curlData = curl_exec($curl); 	curl_close($curl); 	$curlJson = json_decode($curlData, true); 	 	//defining the answer 	$answer = $curlData; 	 	//refresh the cookie 	setcookie('_rbs', $curlJson['score'], time()+1800, '/','', 0);  	 	// only fire $answer if botscore cookie is not set or different from acutal score 	if ($botscore != $curlJson['score']) { 		echo $answer; 	} else { 		echo "noChange"; 	} ?> 

Encore une fois, assurez-vous de remplacer le _reCAPTCHA_secret_key sur la ligne 4 avec le clef secrète vous avez obtenu de la console d’administration.

Ce code PHP prend la réponse envoyée par Google Tag Manager, la valide par rapport à l’API de vérification reCAPTCHA, puis envoie l’objet de résultat dans la réponse, qui sera à son tour poussé dans dataLayer pour vos balises à utiliser.

Le code écrit également un cookie dans la réponse HTTP. Ce cookie est nommé _rbs et contient le score de l’action reCAPTCHA. Les résultats ne sont renvoyés que si le score reCAPTCHA a changé au cours des 30 dernières minutes. Si les résultats n’ont pas changé, la réponse sera "noChange"qui bloque le dataLayer.push() d’avoir lieu.

Point de terminaison Node.js

Dans ce chapitre, Simo vous montrera comment faire la même chose que ci-dessus en utilisant à la place une application Node.js.

Balise HTML personnalisée

La principale différence (en dehors de la pile technologique) avec la solution PHP est que nous enregistrerons également les erreurs. Ils sont envoyés comme la valeur du recaptchaScore saisir dataLayervous obtiendrez donc dans votre rapport un mélange de scores valides et de textes d’erreur, mais cela devrait être facile à filtrer dans vos tableaux.

Voici à quoi ressemble la balise HTML personnalisée :

<style>   /* hides the recaptcha badge */   .grecaptcha-badge {     visibility: hidden !important;   } </style> <script src="https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key&onload=__recaptchaCallback" async defer></script> <script>   window.__recaptchaCallback = function() {     if (window.grecaptcha) {       window.grecaptcha.execute('_reCAPTCHA_site_key', {action: 'homepage'}).then(function(token) {         var url = 'https://mydomain.com:3000/recaptcha/';         var xhr = new XMLHttpRequest();         xhr.open('GET', url + '?g-recaptcha-response=' + token, true);         xhr.onreadystatechange = function(data) {           if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {             var responseJson = JSON.parse(xhr.response);             window.dataLayer.push({               event: 'recaptcha',               recaptchaAnswer: responseJson.status,               recaptchaScore: responseJson.recaptcha.score             });           }         }         xhr.send();       });     }   }; </script>

N’oubliez pas de changer le _reCAPTCHA_site_key sur les lignes 7 et 11.

Les url la variable sur la ligne 12 doit pointer vers votre application Node.js.

Cette configuration est différente de la requête PHP. Ici, nous utilisons une requête GET, et nous analysons la réponse, en poussant à la fois le succès et l’erreur dans dataLayer en utilisant un rappel de succès pour la requête HTTP.

De plus, puisque nous chargeons l’API JavaScript de manière asynchrone, nous créons une méthode de rappel globale __recaptchaCallbackdont nous passons le nom dans le chargeur de script en paramètre (&onload).

Le résultat final est le même qu’avec le point de terminaison PHP – un dataLayer.push() événement avec le statut et le score reCAPTCHA.

Application Node.js

Les Node.js exemple d’application voici la chose la plus simple que vous puissiez construire. Pour que cela fonctionne, vous devez avoir installé Node.js dans l’environnement où vous souhaitez exécuter le point de terminaison (par exemple, un serveur Web s’exécutant sur votre site ou dans le cloud).

Créez un répertoire vide et initialisez un nouveau npm projet avec npm init. Après avoir suivi les étapes de configuration, exécutez :

$ npm install express express-recaptcha cookie-parser --save

Cela installe les dépendances requises pour exécuter un simple express.js serveur Web ainsi que les fichiers requis pour exécuter le middleware reCAPTCHA et une logique d’analyse des cookies.

Ensuite, créez un fichier nommé serveur.jsouvrez-le pour le modifier et ajoutez-y le code suivant :

const express = require('express'); const cookieParser = require('cookie-parser'); const Recaptcha = require('express-recaptcha').RecaptchaV3;  const app = express(); app.use(cookieParser());  const siteKey = '_reCAPTCHA_site_key'; const secretKey = '_reCAPTCHA_secret_key';  const recaptcha = new Recaptcha(siteKey, secretKey, {action: 'homepage'});  app.get('/recaptcha/', recaptcha.middleware.verify, (req, res) => {   const botCookie = req.cookies._rbs;   res.header('Access-Control-Allow-Origin', '*'); // Set this to the actual domain that will be sending the requests   if (!req.recaptcha.error) {     const recaptcha = req.recaptcha.data;     const score = recaptcha.score;     res.cookie('_rbs', score, {path: '/', maxAge: 30 * 60 * 1000});     // Only send response if cookie does not exist or does not match the latest score     if (botCookie !== score) {       res.send({status: '1', recaptcha: req.recaptcha.data});     }   } else {     const score = req.recaptcha.error;     res.cookie('_rbs', score, {path: '/', maxAge: 30 * 60 * 1000});     res.send({status: '0', recaptcha: {score: score}});   } });  app.listen(3000, () => console.log('App listening on port 3000!')); 

Modifiez les lignes 8 et 9 avec la valeur réelle clé du site et clef secrèterespectivement.

Modifiez la ligne 15 pour n’autoriser que les requêtes provenant de votre site (si votre site fonctionne sur https://mydomain.comc’est ce que vous ajouteriez comme origine valide au lieu de *).

Cette application s’exécute sur le port 3000 de tout nom d’hôte configuré pour votre serveur Web. Il crée un simple point de terminaison de requête GET pour /recaptcha/où un morceau de middleware inspectera la demande entrante pour un jeton reCAPTCHA.

Si le jeton est rencontré, il est validé et le recaptcha les résultats sont écrits dans dataLayer ainsi qu’un cookie nommé _rbs.

Si la validation échoue, le “score” sera le message d’erreur au lieu du score réel.

Reste de la configuration

Dimensions personnalisées Google Analytics

Dans Google Analytics, créez deux nouvelles dimensions personnalisées :

• score reCAPTCHA (portée de la session)
• reCAPTCHA réponse (portée de la session)

Ces deux dimensions personnalisées nous permettent de filtrer en permanence le trafic des robots de nos vues de production Google Analytics.

Notez que les balises Google Analytics ne sont déclenchées que si le score change (ou si le score était auparavant une erreur). De cette façon, vous n’enverrez pas constamment le même score reCAPTCHA à Google Analytics pendant que la session est active.

Les dimensions personnalisées sont envoyées avec un balise d’événement.

Configuration de Google Gestionnaire de balises

Commençons par créer deux nouvelles variables de couche de données.

Variables de la couche de données

La première variable est nommée dl_recaptchaRéponseet son champ Nom de la variable de la couche de données doit pointer vers recaptchaAnswer.

La deuxième variable est nommée dl_recaptchaScoreet son champ Nom de la variable de la couche de données doit pointer vers recaptchaScore.

Voici à quoi ressemblerait ce dernier :

Déclencheur

Le déclencheur est un simple déclencheur d’événement personnalisé qui ressemble à ceci :

Balise d’événement

La fonction principale du tag d’événement est d’envoyer les dimensions personnalisées. Vous pouvez organiser les autres champs comme bon vous semble. Voici à quoi pourrait ressembler un exemple de tag d’événement Universal Analytics :

Assurez-vous simplement que l’index et les paramètres de valeur de la dimension personnalisée sont corrects par rapport à ce que vous avez configuré précédemment dans l’administrateur Google Analytics.

REMARQUE! Une amélioration consisterait à définir les dimensions personnalisées seul si recaptchaAnswer est 1 (succès), afin que vous ne finissiez pas par écraser un score valide pour la session avec un message d’erreur errant.

Analysez les résultats

Lorsque vous configurez le tout, tous les utilisateurs de votre page seront contrôlés en arrière-plan pour déterminer leur probabilité d’être un bot. Le script se déclenche si l’utilisateur n’a pas été validé avec un score approprié dans les 30 minutes depuis la dernière validation. Cela garantit que vous n’inondez pas inutilement Google Analytics avec des événements qui ont simplement le même score envoyé avec chacun.

Voici ce que les dimensions personnalisées finiront par remplir :

Vous pouvez descendre jusqu’au 0.1 score pour identifier les idiosyncrasies dans ce trafic à faible score.

Pour mieux comprendre la quantité de trafic de robots, créez des segments basés sur score reCAPTCHA. Après quelques semaines, vous disposerez de suffisamment de données pour :

• Déterminez le ratio de trafic de robots sur votre site.
• Décidez si vous devez filtrer de manière permanente le trafic de bot signalé de vos vues de production Google Analytics.

Résumé

Merci beaucoup à Philipp et Sebastian d’avoir partagé leur idée incroyable ici. Étant donné que reCAPTCHA v3 calcule le score en fonction des interactions des utilisateurs sur le site, c’est un candidat idéal pour mesurer avec Google Analytics, car nous pouvons collecter subrepticement le “bot-ness” du visiteur et tirer parti des dimensions personnalisées de GA pour collecter les données.

Ce n’est pas trivial à mettre en œuvre, car il nécessite un service Web pour interroger le score reCAPTCHA. Peut-être que quelqu’un pourrait rendre service au monde et créer une API publique gratuite pour interroger ces informations ? Jusque-là, vous êtes coincé avec une solution sur site ou, mieux encore, en tirant parti du cloud pour configurer le point de terminaison de l’API.

Cette solution devrait bien servir à découvrir la complexité du trafic des robots sur un site Web donné. Les bots et les crawlers se présentent sous différentes formes et tailles – il existe des agents malveillants ainsi que des services qui visent à faire le bien. Quoi qu’il en soit, le trafic de bot est très probable ne pas votre trafic cible lors de la création de votre site Web, donc pouvoir le segmenter dans Google Analytics est en effet un avantage majeur pour la qualité des données.

Dites-nous dans les commentaires ce que vous pensez de cette solution, et si vous avez des idées pour l’améliorer !