J’ai déjà écrit sur le reCAPTCHA v3 de Google. C’est un API de vérificationqui analyse les signaux qui lui sont transmis et renvoie un score du roboten fonction de la “ressemblance à un bot” des hits.
C’est un excellent moyen de valider s’il faut ou non collecter des données à partir de certaines sources qui présentent un comportement de type bot. Vous voudrez les ignorer dans vos outils d’analyse, par exemple, car ils ont tendance à ajouter beaucoup de bruit (irréaliste) à l’ensemble de données.
Vous pouvez en savoir plus sur le fonctionnement de reCAPTCHA v3 ici.
Dans mon article précédent, vous deviez créer vous-même le point de terminaison du serveur pour traiter les requêtes reCAPTCHA. Si vous vous en souvenez, reCAPTCHA nécessite un point de terminaison d’API personnalisé pour traiter les demandes de vérification.
Heureusement, avec l’avènement du conteneur Google Tag Manager Server, il est désormais trivial de créer vous-même des API “locales” en utilisant la puissance des modèles personnalisés.
Dans ce guide, je vais vous montrer comment un nouveau Modèle client J’ai créé fait le travail pour vous. Il est conçu pour Procuration la bibliothèque côté client reCAPTCHA et pour processus les demandes de vérification.
Au moment de la rédaction, les modèles de clients ne sont pas encore disponibles dans la galerie de modèles de la communauté, vous devrez donc faire quelques importation manuelle au lieu.
Conditions préalables
À ce stade, je suppose que vous disposez déjà d’un conteneur Google Tag Manager Server. Si ce n’est pas le cas, consultez cette vidéo pour obtenir des instructions sur la façon de démarrer le déploiement.
Si vous voulez écrire le score du bot dans un cookie propriétaire, je suppose également que vous avez déjà mappé un domaine personnalisé à votre point de terminaison côté serveur. Dans son état actuel, le modèle peut seul écrire des cookies du même site.
Importer le modèle client
La première chose que vous devrez faire est importer le modèle client dans votre conteneur de serveur.
Ouvrez ce lien dans un nouvel onglet du navigateur, puis enregistrer la page sous template.tpl. Assurez-vous que l’extension de fichier est .tpl et pas autre chose.
Ensuite, dans le Conteneur de serveuraccédez à Modèleset cliquez Nouveau dans le Modèles clients section.
Les Éditeur de modèles va maintenant s’ouvrir. Dans l’éditeur de modèles, cliquez sur ouvrir le menu de débordement dans le coin supérieur droit et choisissez Importer.
Sur votre ordinateur, localisez le template.tpl fichier que vous avez téléchargé précédemment et importez ce fichier dans l’éditeur.
Vous devriez voir l’éditeur de modèles changer pour refléter le contenu du modèle reCAPTCHA v3.
Enfin, cliquez sur le bleu Sauver dans le coin supérieur droit de l’éditeur de modèles et fermez l’éditeur.
Vous avez maintenant réussi à importer le modèle Client dans votre conteneur, et il est temps de le configurer.
Générer les secrets pour reCAPTCHA v3
Pour travailler avec reCAPTCHA v3, vous devez générer un Clé du site et un Clef secrète.
Accédez à https://www.google.com/recaptcha/admin/create pour enregistrer un nouveau site.
C’est totalement gratuit !
Remplissez les champs comme suggéré. Assurez-vous d’avoir sélectionné reCAPTCHA v3 comme version de service, et ajoutez le(s) domaine(s) à partir duquel vous communiquerez avec l’API dans le Domaines partie. Voici à quoi ressemble la configuration pour https://www.teamsimmer.com/ :
Une fois que vous avez cliqué Nous faire parvenirvous verrez un écran avec votre Clé du site et ton Clef secrète.
Ne fermez pas cet onglet ! Vous aurez besoin de ces informations sous peu. Vous pouvez également trouver votre site reCAPTCHA via le panneau d’administration.
Créez le client dans votre conteneur de serveur
De retour dans le conteneur Google Tag Manager Server, accédez à Clients et cliquez pour créer un nouveau client.
Choisir la reCAPTCHA v3 Modèle de client de la Personnalisé catégorie de types de clients. Vous devriez maintenant voir le Client prêt à être configuré.
Ajouter les clés au Client
Ouvrez l’onglet avec la configuration du site reCAPTCHA v3.
N’oubliez pas que si vous avez accidentellement fermé l’onglet, vous pouvez toujours localiser les clés en ouvrant la page d’administration reCAPTCHA, en choisissant le Placer avec lequel vous souhaitez travailler, puis cliquez sur la roue dentée des paramètres dans la barre supérieure.
Copiez-collez le Clé du site et le Clef secrète de la configuration du site reCAPTCHA à leurs champs respectifs dans le Client.
Configurez le reste des paramètres
Si vous souhaitez écrire le score du bot dans un cookie de navigateur afin, par exemple, d’accéder au score du bot dans votre serveur GTM (si vous souhaitez enrichir d’autres hits avec les informations), conservez le Écrire le score du bot dans un cookie option cochée.
Si vous souhaitez également renvoyer le score du bot dans la réponse HTTP elle-même pour le traitement côté client, cochez la case Renvoyer le score du bot dans la réponse HTTP option.
Si vous faire choisissez de définir le cookie, vous pouvez personnaliser davantage le cookie en définissant son Nomson expiration (en secondes) et s’il doit ou non être un HttpOnly biscuit.
Note! Si vous choisissez le HttpOnly option, n’oubliez pas que le cookie Ne fera pas être accessible avec JavaScript dans le navigateur.
Dans la capture d’écran ci-dessous, j’ai défini le nom du cookie comme __r_b_sje l’ai défini comme un cookie de session (en fixant la durée de vie à 0), et je l’ai configuré pour être un HttpOnly biscuit.
Une fois que vous êtes satisfait de votre configuration, Sauver le client.
Configurer le code côté navigateur
Vous avez maintenant configuré votre conteneur Google Tag Manager Server pour écouter les demandes à la fois pour la bibliothèque reCAPTCHA et pour la vérification du bot elle-même. Voici comment cela fonctionne:
- Le navigateur doit récupérer le bibliothèque côté client qui est utilisé pour générer le jeton de vérification.
- Une fois le jeton généré, les navigateurs l’envoient au API de vérification et reçoit le score du bot dans la réponse.
La récupération de la bibliothèque et l’API de vérification sont gérées par le reCAPTCHA v3 Client que vous avez maintenant ajouté à votre conteneur de serveur.
Dans cet exemple, nous allons créer le code côté navigateur dans un Conteneur Web Google Tag Managermais vous pouvez tout aussi bien l’exécuter directement dans le modèle de page ou dans un autre fichier JavaScript lié.
La solution comprend deux Balises HTML personnalisées. Le premier est le chargeur de scriptsexécuté une seule fois par page, et le second est le demande de vérificationexécutez chaque fois qu’une action se produit et que vous souhaitez contribuer au calcul du score du bot.
Créer le chargeur de script
Vous pouvez construire un simple Modèle personnalisé pour charger la bibliothèque reCAPTCHA v3, si vous le souhaitez.
Avant de commencer avec le tag, vous devez vous rendre dans variables dans le conteneur Google Tag Manager, puis cliquez sur Configurer pour les variables intégrées.
Assurez-vous d’activer Identifiant du conteneur et Identifiant HTML.
Ensuite, allez à Mots cléscréez une nouvelle balise HTML personnalisée et copiez-collez le code suivant dans la balise :
<script> (function() { // Replace with the Site Key you got when registering the site for reCAPTCHA v3 var siteKey = 'aaaabbbbccccdddd'; // Replace with your server-side origin (just the https and domain name). var serverSideOrigin = 'https://sgtm.mydomain.com'; var script = document.createElement('script'); script.src = serverSideOrigin + '/recaptcha/api.js?render=' + siteKey; script.async = true; script.addEventListener('load', function() { window.google_tag_manager[{{Container ID}}].onHtmlSuccess({{HTML ID}}); }); document.head.appendChild(script); })(); </script>Mettre à jour le
siteKeyetserverSideOriginvariables selon les instructions du code.
Cette balise charge la bibliothèque à partir de votre point de terminaison et ajoute un écouteur pour le chargement du script, signalant Succès une fois la bibliothèque entièrement chargée.
Une fois fait, ne pas ajouter de déclencheur à cette balise. Plutôt, Sauver la balise, en ignorant l’avertissement indiquant qu’aucun déclencheur n’a été défini.
Créer la balise de vérification
Ensuite, créez une nouvelle balise HTML personnalisée et copiez-collez le code suivant dans :
<script> (function() { // Replace with the Site Key you got when registering the site for reCAPTCHA v3 var siteKey = 'aaaabbbbccccdddd'; // Replace with your server-side origin (just the https and domain name). var serverSideOrigin = 'https://sgtm.mydomain.com'; // Replace this with the action type // See: https://developers.google.com/recaptcha/docs/v3#actions var action = 'page'; // The following callback is invoked with the bot score as a function argument. // Feel free to change the dataLayer.push() to your liking. // Note! The callback is only invoked if you've configured the Server container // Client template to return a response back to the browser. var callback = function(score) { window.dataLayer.push({ event: 'recaptcha', recaptchaScore: score }); }; if (window.grecaptcha && typeof window.grecaptcha.ready === 'function') { window.grecaptcha.ready(function() { window.grecaptcha.execute(siteKey, {action: action}).then(function(token) { var xhr = new XMLHttpRequest(); xhr.withCredentials = true; xhr.open('POST', serverSideOrigin + '/recaptcha?token=' + token, true); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { var response = JSON.parse(xhr.responseText); if (response.score) callback(response.score); } }; xhr.send(); }); }); } })(); </script>Mettre à jour le
siteKeyetserverSideOriginvariables selon les instructions du code.
Ensuite aller à Réglages avancés -> Séquençage des baliseset réglez le Balise de configuration être le chargeur de script que vous avez créé dans la section précédente.
Enfin, définissez cette balise HTML personnalisée pour qu’elle se déclenche chaque fois qu’une interaction se produit et devrait contribuer au score du bot. Ces interactions pourraient être :
- Chargement de la page (définir le
actionà par exemplepage) - Soumission du formulaire (définir le
actionà par exemplesubmit) - Achat (définir le
actionà par exemplepurchase)
Et ainsi de suite. Si vous le souhaitez, vous pouvez avoir une balise HTML personnalisée distincte pour chaque type d’action, ou vous pouvez utiliser une table de consultation pour définir le action variable dynamiquement en fonction de l’événement déclencheur, par exemple.
Tout tester
Une fois que vous avez créé le chargeur de script et que les balises de vérification sont également en cours d’exécution, passez en mode Aperçu à la fois dans votre conteneur de serveur et dans le conteneur Web.
Chargez une page (ou faites autre chose qui devrait déclencher le tag de vérification).
Dans l’aperçu du conteneur Web, vous devriez voir le chargeur de script et la balise de vérification se déclencher :
Dans l’aperçu du conteneur de serveur, vous devriez d’abord voir une demande de api.jsauquel on répond par un code d’état de 200.
Ensuite, si vous développez la demande d’API de vérification dans le conteneur du serveur (la demande au chemin recaptcha), vous pouvez développer le Requête HTTP sortante et vérifiez la réponse du serveur Google reCAPTCHA :
Cela indique que la demande de vérification a fonctionné et qu’un score de bot valide a été renvoyé.
Enfin, dans votre conteneur Web, vous devriez voir un nouveau message de couche de données avec le nom de l’événement recaptcha (en supposant que vous utilisiez le rappel par défaut) et un recaptchaScore clé contenant le score du bot pour cette requête particulière.
Si vous configurez le cookie à définir, vous pouvez également le trouver dans la liste des cookies de votre navigateur :
Résumé
Une fois que le système reCAPTCHA est opérationnel, vous pouvez utiliser le score du bot pour déclencher de manière sélective vos balises dans le conteneur Web ou dans le conteneur Serveur.
Vous pouvez également utiliser le __r_b_s valeur de cookie à envoyer avec vos balises de conteneur de serveur, au cas où vous souhaiteriez ajouter des métadonnées supplémentaires sur le “bot-ness” de l’utilisateur. Il peut s’agir d’informations utiles dans une dimension personnalisée GA4, par exemple !
Au fur et à mesure que vous collectez de plus en plus de données sur les scores des bots, assurez-vous de visiter le site d’administration reCAPTCHA pour consulter les statistiques sur la distribution des scores des bots pour les visiteurs de votre site. Si vous avez réglé avec diligence le action variable dans vos demandes, vous pourrez également voir la distribution segmentée par type d’action.
Dites-moi dans les commentaires ce que vous pensez de cette solution. Il serait intéressant d’entendre quels cas d’utilisation vous avez à l’esprit pour le score du bot – l’utiliseriez-vous pour bloc demandes ou à annoter eux, et pourquoi ?
