He escrito sobre Google reCAPTCHA v3 antes. Es un API de verificaciónque analiza las señales que recibe y devuelve un puntuación del roboticen función de qué tan “parecidos a los robots” son los éxitos.
Es una excelente manera de validar si se deben recopilar o no datos de ciertas fuentes que exhiben un comportamiento related al de un bot. Querrá ignorarlos en sus herramientas de análisis, por ejemplo, ya que tienden a agregar mucho ruido (poco realista) al conjunto de datos.
Puedes leer más sobre cómo funciona reCAPTCHA v3 aquí.
En mi Artículo anterior, tenía que crear usted mismo el punto closing del servidor para procesar las solicitudes reCAPTCHA. Si recuerda, reCAPTCHA requiere un punto closing API personalizado para procesar las solicitudes de verificación.
Por suerte, con la llegada del Contenedor del servidor de Google Tag Supervisorahora es trivial crear API “locales” usted mismo utilizando el poder de plantillas personalizadas.
En esta guía, te mostraré cómo un nuevo Plantilla de cliente He creado hace el trabajo preliminar por ti. Está diseñado para apoderado la biblioteca del lado del cliente reCAPTCHA y a proceso las solicitudes de verificación.
Al momento de escribir este artículo, las plantillas del Cliente aún no están disponibles en el Galería de plantillas comunitariaspor lo que tendrás que hacer algo importación guide en cambio.
X
El boletín a fuego lento
Suscríbete al Boletín a fuego lento para recibir las últimas noticias y contenido de Simo Ahava en su bandeja de entrada de correo electrónico.
Requisitos previos
En este punto, supongo que ya tiene un contenedor del servidor Google Tag Supervisor. Si no, verifique este video para obtener instrucciones sobre cómo comenzar con la implementación.
Si quieres escribir la puntuación del bot. en una cookie propiatambién asumo que ya asignó un dominio personalizado a su punto closing del lado del servidor. Tal como está actualmente, la plantilla puede solo escribir cookies del mismo sitio.
Importar la plantilla del Cliente
Lo primero que tendrás que hacer es importar la plantilla del cliente en el contenedor de su servidor.
Abierto este enlace en una nueva pestaña del navegador y luego guardar la página como template.tpl. Asegúrese de que la extensión del archivo sea .tpl y no otra cosa.
A continuación, en el Contenedor de servidornavega hasta Plantillasy haga clic Nuevo en el Plantillas de cliente sección.
El Editor de plantillas ahora se abrirá. En el Editor de plantillas, haga clic en abrir el menú adicional en la esquina superior derecha y elija Importar.
En su computadora, ubique el template.tpl archivo que descargó anteriormente e importe ese archivo al editor.
Debería ver que el Editor de plantillas cambia para reflejar el contenido de la plantilla reCAPTCHA v3.
Finalmente, haga clic en el azul Ahorrar en la esquina superior derecha del Editor de plantillas y cierre el editor.
Ahora ha logrado importar la plantilla del Cliente a su contenedor y es hora de configurarla.
Genera los secretos para reCAPTCHA v3
Para trabajar con reCAPTCHA v3, necesita generar un Clave del sitio y un Llave secreta.
Navegar a https://www.google.com/recaptcha/admin/create para registrar un nuevo sitio.
¡Esto es completamente free of charge!
Full los campos como se sugiere. Asegúrate de haber seleccionado reCAPTCHA v3 como la versión del servicio y agregue los dominios desde los cuales se comunicará con la API en el Dominios parte. Así es como se ve la configuración https://www.teamsimmer.com/:
Una vez que hagas clic Entregarverás una pantalla con tu Clave del sitio y tu Llave secreta.
¡No cierres esta pestaña! Necesitará esta información en breve. Puede encontrar su sitio reCAPTCHA a través de Panel de administrador también.
Cree el Cliente en su contenedor de Servidor
De vuelta en el contenedor del servidor de Google Tag Supervisor, busque Clientela y haga clic para crear un nuevo Cliente.
Elegir el reCAPTCHA v3 Plantilla de cliente de la Costumbre categoría de tipos de Cliente. Ahora debería ver el Cliente listo para configurar.
Agregar las claves al Cliente
Abra la pestaña con la configuración del sitio reCAPTCHA v3.
Recuerde, si cerró accidentalmente la pestaña, siempre podrá localizar las claves abriendo la pestaña página de administración de reCAPTCHAeligiendo el Sitio desea trabajar y luego haga clic en la rueda dentada de configuración en la barra superior.
Copiar y pegar el Clave del sitio y el Llave secreta desde la configuración del sitio reCAPTCHA a sus respectivos campos en el Cliente.
Configura el resto de ajustes
Si desea escribir la puntuación del bot en una cookie del navegador para, por ejemplo, acceder a la puntuación del bot en su servidor GTM (si desea enriquecer otros accesos con la información), mantenga la Escribir puntuación de bot en una cookie opción marcada.
Si también desea devolver la puntuación del bot en la propia respuesta HTTP para procesarla en el lado del cliente, marque la casilla Devolver la puntuación del bot en la respuesta HTTP opción.
Si usted hacer Si elige configurar la cookie, puede personalizarla aún más configurando su nombresu vencimiento (en segundos) y si debe o no ser un Sólo Http Galleta.
¡Nota! Si eliges el Sólo Http opción, recuerda que la cookie no lo hará ser accesible con JavaScript en el navegador.
En la captura de pantalla siguiente, configuré el nombre de la cookie como __r_b_slo he configurado para que sea un cookie de sesión (estableciendo la vida útil en 0), y lo he configurado para que sea un HttpOnly Galleta.
Una vez que esté satisfecho con su configuración, Ahorrar el cliente.
Configurar el código del lado del navegador
Ahora ha configurado su contenedor del servidor Google Tag Supervisor para escuchar las solicitudes tanto para la biblioteca reCAPTCHA como para la verificación del bot. Así es como funciona:
- El navegador tiene que buscar el biblioteca del lado del cliente que se utiliza para generar el ficha de verificación.
- Una vez que se genera el token, los navegadores lo envían al API de verificación y recibe la puntuación del bot en la respuesta.
Tanto la búsqueda de la biblioteca como la API de verificación son manejadas por el reCAPTCHA v3 Cliente que ahora ha agregado a su contenedor de Servidor.
En este ejemplo, crearemos el código del lado del navegador en un Contenedor net del Administrador de etiquetas de Googlepero también puedes ejecutarlo directamente en la plantilla de página o en algún otro archivo JavaScript vinculado.
La solución comprende dos Etiquetas HTML personalizadas. El primero es el cargador de scriptsse ejecuta solo una vez por página, y el segundo es el solicitud de verificaciónejecútelo cada vez que ocurra una acción que le gustaría contribuir al cálculo de la puntuación del bot.
Crear el cargador de scripts
Puedes construir un sencillo Plantilla personalizada para cargar la biblioteca reCAPTCHA v3, si lo desea.
Antes de comenzar con la etiqueta, debe ingresar variables en el contenedor de Google Tag Supervisor y haga clic en Configurar para variables integradas.
Asegúrate de habilitar ID del contenedor y ID HTML.
A continuación, vaya a Etiquetascree una nueva etiqueta HTML personalizada y copie y pegue el siguiente código en la etiqueta:
<script>
(perform() {
// Exchange with the Web site Key you bought when registering the location for reCAPTCHA v3
var siteKey = 'aaaabbbbccccdddd';
// Exchange along with your server-side origin (simply the https and area title).
var serverSideOrigin = 'https://sgtm.mydomain.com';
var script = doc.createElement('script');
script.src = serverSideOrigin + '/recaptcha/api.js?render=' + siteKey;
script.async = true;
script.addEventListener('load', perform() {
window.google_tag_manager({{Container ID}}).onHtmlSuccess({{HTML ID}});
});
doc.head.appendChild(script);
})();
</script>Actualizar el
siteKeyyserverSideOriginvariables según las instrucciones del código.
Esta etiqueta carga la biblioteca desde su punto closing y agrega un detector para la carga del script, lo que indica éxito una vez que la biblioteca esté completamente cargada.
Una vez hecho, no agregue un disparador a esta etiqueta. En cambio, Ahorrar la etiqueta, ignorando la advertencia de que no se han establecido activadores.
Crea la etiqueta de verificación
A continuación, cree una nueva etiqueta HTML personalizada y copie y pegue el siguiente código dentro:
<script>
(perform() {
// Exchange with the Web site Key you bought when registering the location for reCAPTCHA v3
var siteKey = 'aaaabbbbccccdddd';
// Exchange along with your server-side origin (simply the https and area title).
var serverSideOrigin = 'https://sgtm.mydomain.com';
// Exchange this with the motion sort
// See: https://builders.google.com/recaptcha/docs/v3#actions
var motion = 'web page';
// The next callback is invoked with the bot rating as a perform argument.
// Be at liberty to alter the dataLayer.push() to your liking.
// Observe! The callback is just invoked in case you've configured the Server container
// Shopper template to return a response again to the browser.
var callback = perform(rating) {
window.dataLayer.push({
occasion: 'recaptcha',
recaptchaScore: rating
});
};
if (window.grecaptcha && typeof window.grecaptcha.prepared === 'perform') {
window.grecaptcha.prepared(perform() {
window.grecaptcha.execute(siteKey, {motion: motion}).then(perform(token) {
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open('POST', serverSideOrigin + '/recaptcha?token=' + token, true);
xhr.onreadystatechange = perform() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.standing === 200) {
var response = JSON.parse(xhr.responseText);
if (response.rating) callback(response.rating);
}
};
xhr.ship();
});
});
}
})();
</script>Actualizar el
siteKeyyserverSideOriginvariables según las instrucciones del código.
Luego ve a Ajustes avanzados -> Secuenciación de etiquetasy establezca el Etiqueta de configuración será el cargador de scripts que creó en la sección anterior.
Finalmente, configure esta etiqueta HTML personalizada para que se energetic cada vez que ocurra una interacción que debería contribuir a la puntuación del bot. Estas interacciones podrían ser:
- Carga de página (establezca el
motionpor ejemploweb page) - Envío de formulario (establezca el
motionpor ejemplosubmit) - Compra (establecer el
motionpor ejemplobuy)
Etcétera. Si lo desea, puede tener una etiqueta HTML personalizada separada para cada tipo de acción, o puede usar una tabla de búsqueda para configurar el motion valor de la variable dinámicamente en función del evento desencadenante, por ejemplo.
prueba todo
Una vez que haya creado el cargador de secuencias de comandos y también tenga las etiquetas de verificación ejecutándose, ingrese al modo Vista previa tanto en su contenedor de servidor como en el contenedor net.
Cargue una página (o haga algo más que debería activar la etiqueta de verificación).
En la Vista previa del contenedor net, debería ver que se activan tanto el cargador de secuencias de comandos como la etiqueta de verificación:
En la Vista previa del contenedor del servidor, primero debería ver una solicitud de api.jsal que se responde con un código de estado de 200.
Luego, si expande la solicitud de API de verificación en el contenedor del servidor (la solicitud a la ruta recaptcha), puede ampliar el Solicitud HTTP saliente y verifique la respuesta del servidor reCAPTCHA de Google:
Esto indica que la solicitud de verificación funcionó y se devolvió una puntuación de bot válida.
Finalmente, en su contenedor net debería ver un nuevo mensaje de capa de datos con el nombre del evento. recaptcha (suponiendo que haya elegido la devolución de llamada predeterminada) y un recaptchaScore clave que contiene la puntuación del bot para esta solicitud en explicit.
Si configura la cookie para que se establezca, también podrá encontrarla en la lista de cookies de su navegador:
Resumen
Una vez que tenga el sistema reCAPTCHA en funcionamiento, puede usar la puntuación del bot para activar selectivamente sus etiquetas, ya sea en el contenedor net o en el contenedor del servidor.
También puedes utilizar el __r_b_s Valor de cookie para enviar con las etiquetas de contenedor de su servidor, en caso de que desee agregar metadatos adicionales sobre la “bot-ness” del usuario. ¡Podría ser información útil en una dimensión personalizada de GA4, por ejemplo!
A medida que recopiles más y más datos de puntuación de bots, asegúrate de visitar el Sitio de administración de reCAPTCHA para comprobar las métricas sobre la distribución de la puntuación del bot para los visitantes de su sitio. Si has configurado diligentemente el motion variable en tus solicitudes, también podrás ver la distribución segmentada por tipo de acción.
Déjame saber en los comentarios qué piensas de esta solución. Sería interesante saber qué casos de uso tiene en mente para la puntuación del bot: ¿la usaría para bloquear solicitudes o para anotar ellos, y ¿por qué?