Hay miles y miles de robots, rastreadores, arañas y otros bichos espeluznantes que no hacen nada más que rastrear sitios net y recolectar el contenido que contienen para los fines para los que han sido diseñados. Google analitico proporciona una función de filtrado de bots para filtrar el “spam” y el “tráfico de bots” de las vistas, esto está lejos de ser lo suficientemente exhaustivo como para abordar todas las instancias de tráfico de bots que podrían ingresar al sitio.
Es posible que hayas notado tráfico de bots en tus datos incluso si tienes activado el filtrado de bots. Por ejemplo, dicho tráfico podría caracterizarse de la siguiente manera:
- Tráfico sin una fuente/medio discernible
- Duración media de la sesión <00:00:01
- El mismo agente de usuario/agente de usuario obsoleto
- Tráfico no convertible / alta tasa de rebote
- Ubicación de purple: un host en la nube conocido (por ejemplo, AWS)
Afortunadamente, existen mejores formas de identificar este tráfico que mirar los datos ruidosos de Google Analytics. Google ha introducido reCAPTCHA v3 que le permite verificar el tráfico sin necesidad de interacción del usuario. Esto se hace con una API de JavaScript easy combinada con un punto last de verificación del lado del servidor.
En este articulo, Sebastián Pospischil y Philipp Schneider de Resolución de medios compartirán la solución contigo. Te mostrarán cómo crear una API PHP easy en tu servidor net Apache para manejar las solicitudes de reCAPTCHA.
Contribuiré construyendo lo mismo con Node.jsRecuerde que puede tener ambos (Apache y Node.js) ejecutándose en Nube de Google utilizando por ejemplo el Motor de aplicaciones Entorno estándar. Esto resulta útil si no dispone de los recursos o las capacidades para ejecutar algo como esto en sus propios servidores net.
¡Muchísimas gracias a Philipp y Sebastian por compartir esta pepita de sabiduría con este weblog!
X
El boletín informativo de Simmer
Suscríbete a la Boletín informativo de Simmer ¡Para recibir las últimas noticias y contenidos de Simo Ahava en tu bandeja de entrada de correo electrónico!
Empezando
Para empezar, necesitarás generar un archivo (free of charge) clave del sitio y un (free of charge) llave secreta para el uso de la API reCAPTCHA. Dirígete a https://www.google.com/recaptcha/admin/createy registre un nuevo sitio para utilizarlo con reCAPTCHA v3. Asegúrese de ingresar todos los dominios desde los cuales se enviarán estas solicitudes de verificación.
Una vez que haya agregado todo y marcado todas las casillas necesarias, haga clic en ENTREGAR para conseguir tus llaves.
Copie las claves, ya que las necesitará pronto al configurar la etiqueta HTML personalizada en Administrador de etiquetas de Google así como el punto last del lado del servidor.
Punto last de PHP
En este capítulo, Philipp y Sebastian te guiarán por los pasos para crear un punto last de PHP para verificar las solicitudes de reCAPTCHA. También te mostrarán cómo crear la etiqueta HTML personalizada en Google Tag Supervisor para cargar la API de JavaScript de reCAPTCHA y determinar si el usuario es un robotic.
Etiqueta HTML personalizada
Lo primero es lo primero: configuremos Google Tag Supervisor. En GTM, cree una nueva Etiqueta HTML personalizada.
<type>
/* hides the recaptcha badge */
.grecaptcha-badge {
visibility: hidden !vital;
}
type>
<script src="https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key_">script>
<script>
grecaptcha.prepared(operate() {
grecaptcha.execute('_reCAPTCHA_site_key_', {
motion: 'homepage'
}).then(operate(token) {
var xhr = new XMLHttpRequest();
xhr.onload = operate() {
if (xhr.response !== 'noChange') {
var greResult = JSON.parse(xhr.response);
window.dataLayer.push({
occasion: 'recaptcha',
recaptchaAnswer: greResult.success,
recaptchaScore: greResult.rating
});
}
};
xhr.open('POST', '/gtm/recaptcha.php', true); //change this with URL to your PHP fil
xhr.setRequestHeader('Content material-type', 'software/x-www-form-urlencoded');
xhr.ship('token=' + token + '&motion=homepage');
});
});
script>Puede configurar esta etiqueta para que se energetic con cualquier activador que desee, aunque se recomienda un activador que se energetic cuando se carga la página (por ejemplo, Todas las páginas, DOM listo o Ventana cargada).
Asegúrese de editar lo siguiente:
- El
_reCAPTCHA_site_keycadena en las líneas 7 y 10 con el precise clave del sitio que copiaste de la consola de administración de reCAPTCHA en el capítulo anterior. - La URL de su punto last PHP en la línea 24.
Este bloque de código ejecuta la API de JavaScript reCAPTCHA en el navegador del usuario y envía el resultado tokenizado al punto last de PHP que configurará en el próximo capítulo. Cuando recibe una respuesta, se envían la puntuación y el estado de éxito dataLayer.
El primer bloque de código en la etiqueta oculta la insignia reCAPTCHA para que no aparezca en el sitio. Recuerda leer esta parte de las preguntas frecuentes para aprender cómo modificar su sitio para permitir ocultar la insignia.
Archivo PHP para su servidor
Crear un archivo recaptcha.php con el siguiente código y cárguelo en todos los dominios en los que desee validar solicitudes reCAPTCHA. Colóquelo en un subdirectorio llamado /gtm/.
¡NOTA! Puede utilizar cualquier ruta y nombre de archivo que desee para el archivo PHP; solo recuerde actualizar la URL del punto last de solicitud HTTP de la etiqueta HTML personalizada en consecuencia.
// reCaptcha data
$url = 'https://www.google.com/recaptcha/api/siteverify';
$secret = "_reCAPTCHA_secret_key_";
$remoteip = $_SERVER('REMOTE_ADDR');
// Type data
$motion = $_POST('motion');
$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,
'motion' => $motion,
'response' => $response
));
$curlData = curl_exec($curl);
curl_close($curl);
$curlJson = json_decode($curlData, true);
//defining the reply
$reply = $curlData;
//refresh the cookie
setcookie('_rbs', $curlJson('rating'), time()+1800, '/','', 0);
// solely hearth $reply if botscore cookie just isn't set or completely different from acutal rating
if ($botscore != $curlJson('rating')) {
echo $reply;
} else {
echo "noChange";
}
?>
Nuevamente, asegúrese de reemplazar el _reCAPTCHA_secret_key en la línea 4 con el llave secreta lo obtuviste de la consola de administración.
Este código PHP toma la respuesta enviada por Google Tag Supervisor, la valida con la API de verificación reCAPTCHA y luego envía el objeto de resultado en la respuesta, que, a su vez, se enviará a dataLayer para que sus etiquetas las utilicen.
El código también escribe una cookie en la respuesta HTTP. Esta cookie se llama _rbs y contiene la puntuación de la acción reCAPTCHA. Los resultados solo se devuelven si la puntuación reCAPTCHA ha cambiado en los últimos 30 minutos. Si los resultados no han cambiado, la respuesta será "noChange"que bloquea el dataLayer.push() de tener lugar.
Punto last de Node.js
En este capítulo, Simo le mostrará cómo hacer lo mismo que se indicó anteriormente utilizando un Node.js aplicación en su lugar.
Etiqueta HTML personalizada
La principal diferencia (aparte de la pila tecnológica) con la solución PHP es que también registraremos los errores. Se envían como el valor de la recaptchaScore teclear dataLayerpor lo que en su informe obtendrá una combinación de puntuaciones válidas y textos de error, pero esto debería ser fácil de filtrar en sus tablas.
Así es como se ve la etiqueta HTML personalizada:
<type>
/* hides the recaptcha badge */
.grecaptcha-badge {
visibility: hidden !vital;
}
type>
<script src="https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key&onload=__recaptchaCallback" async defer>script>
<script>
window.__recaptchaCallback = operate() {
if (window.grecaptcha) {
window.grecaptcha.execute('_reCAPTCHA_site_key', {motion: 'homepage'}).then(operate(token) {
var url = 'https://mydomain.com:3000/recaptcha/';
var xhr = new XMLHttpRequest();
xhr.open('GET', url + '?g-recaptcha-response=' + token, true);
xhr.onreadystatechange = operate(knowledge) {
if (this.readyState === XMLHttpRequest.DONE && this.standing === 200) {
var responseJson = JSON.parse(xhr.response);
window.dataLayer.push({
occasion: 'recaptcha',
recaptchaAnswer: responseJson.standing,
recaptchaScore: responseJson.recaptcha.rating
});
}
}
xhr.ship();
});
}
};
script>Recuerde cambiar el _reCAPTCHA_site_key en las líneas 7 y 11.
El url La variable en la línea 12 debe apuntar a su aplicación Node.js.
Esta configuración es diferente de la solicitud PHP. Aquí, utilizamos una solicitud GET y analizamos la respuesta, introduciendo tanto el éxito como el error en dataLayer utilizando una devolución de llamada exitosa para la solicitud HTTP.
Además, dado que cargamos la API de JavaScript de forma asincrónica, creamos un método de devolución de llamada international __recaptchaCallbackcuyo nombre pasamos en el cargador de scripts como parámetro (&onload).
El resultado last es el mismo que con el punto last PHP: un dataLayer.push() evento con el estado y puntuación de reCAPTCHA.
Aplicación Node.js
El Node.js El ejemplo de aplicación que se muestra aquí es lo más easy que se puede crear. Para que funcione, es necesario tener Node.js instalado en el entorno donde desea ejecutar el punto last (por ejemplo, un servidor net que se ejecuta en su sitio o en la nube).
Crea un directorio vacío e inicializa uno nuevo npm proyecto con npm initDespués de seguir los pasos de configuración, ejecute:
$ npm set up specific express-recaptcha cookie-parser --saveEsto instala las dependencias necesarias para ejecutar un easy specific.js servidor net, así como los archivos necesarios para ejecutar el middleware reCAPTCHA y alguna lógica de análisis de cookies.
Luego, crea un archivo llamado servidor.jsábrelo para editarlo y agrega el siguiente código dentro:
const specific = require('specific');
const cookieParser = require('cookie-parser');
const Recaptcha = require('express-recaptcha').RecaptchaV3;
const app = specific();
app.use(cookieParser());
const siteKey = '_reCAPTCHA_site_key';
const secretKey = '_reCAPTCHA_secret_key';
const recaptcha = new Recaptcha(siteKey, secretKey, {motion: 'homepage'});
app.get('/recaptcha/', recaptcha.middleware.confirm, (req, res) => {
const botCookie = req.cookies._rbs;
res.header('Entry-Management-Permit-Origin', '*'); // Set this to the precise area that can be sending the requests
if (!req.recaptcha.error) {
const recaptcha = req.recaptcha.knowledge;
const rating = recaptcha.rating;
res.cookie('_rbs', rating, {path: '/', maxAge: 30 * 60 * 1000});
// Solely ship response if cookie doesn't exist or doesn't match the newest rating
if (botCookie !== rating) {
res.ship({standing: '1', recaptcha: req.recaptcha.knowledge});
}
} else {
const rating = req.recaptcha.error;
res.cookie('_rbs', rating, {path: '/', maxAge: 30 * 60 * 1000});
res.ship({standing: '0', recaptcha: {rating: rating}});
}
});
app.hear(3000, () => console.log('App listening on port 3000!'));
Edite las líneas 8 y 9 con el texto actual. clave del sitio y llave secretarespectivamente.
Edite la línea 15 para permitir solicitudes solo desde su sitio (por lo tanto, si su sitio se ejecuta en https://mydomain.comeso es lo que agregarías como un origen válido en lugar de *).
Esta aplicación se ejecuta en el puerto 3000 de cualquier nombre de host configurado para su servidor net. Crea un punto last de solicitud GET easy para /recaptcha/donde un trozo de software program intermedio inspeccionará la solicitud entrante en busca de un token reCAPTCHA.
Si se encuentra el token, se valida y el recaptcha Los resultados se escriben en dataLayer así como una cookie llamada _rbs.
Si la validación falla, el mensaje de error mostrará la “puntuación” en lugar de la puntuación actual.
Resto de la configuración
Dimensiones personalizadas de Google Analytics
En Google Analytics, crear dos Nuevas dimensiones personalizadas:
- Puntuación reCAPTCHA (alcance de la sesión)
- Respuesta de reCAPTCHA (alcance de la sesión)
Estas dos dimensiones personalizadas nos permiten filtrar permanentemente el tráfico de bots de nuestras vistas de producción de Google Analytics.
Tenga en cuenta que las etiquetas de Google Analytics solo se activan si la puntuación cambia (o si la puntuación period un error anteriormente). De esa manera, no enviará constantemente la misma puntuación reCAPTCHA a Google Analytics mientras la sesión esté activa.
Las dimensiones personalizadas se envían con un etiqueta de evento.
Configuración de Google Tag Supervisor
Primero, creemos dos nuevas variables de capa de datos.
Variables de la capa de datos
La primera variable se llama dl_recaptchaRespuestay debe tener su campo Nombre de variable de capa de datos apuntando a recaptchaAnswer.
La segunda variable se llama Puntuación de dl_recaptchay debe tener su campo Nombre de variable de capa de datos apuntando a recaptchaScore.
Así es como se vería esto último:
Desencadenar
El disparador es un disparador de evento personalizado easy que se ve así:
Etiqueta de evento
La función principal de la etiqueta de evento es enviar las dimensiones personalizadas. Puede organizar los demás campos como desee. Así es como podría verse una etiqueta de evento de Common Analytics de muestra:
Solo asegúrate de tener la configuración del índice y valor de dimensión personalizada correcta según lo que configuraste anteriormente en el administrador de Google Analytics.
NOTA¡Una mejora sería configurar las Dimensiones personalizadas! solo si
recaptchaAnsweres1(éxito), para que no termines sobrescribiendo una puntuación válida para la sesión con un mensaje de error erróneo.
Analizar los resultados
Cuando configures todo, todos los usuarios de tu página serán examinados en segundo plano para determinar la probabilidad de que sean bots. El script se activa si el usuario no ha sido validado con una puntuación adecuada en los 30 minutos posteriores a la última validación. Esto garantiza que no inundes Google Analytics innecesariamente con eventos que solo tienen la misma puntuación enviada con cada uno.
Esto es lo que finalmente se completará con las dimensiones personalizadas:
| Llave | Campos de Google Analytics | Explicación | Valor de muestra |
|---|---|---|---|
recaptchaAnswer |
Acción de evento, dimensión personalizada | Si la validación funcionó o no. 1 para el éxito, 0 por el fracaso. |
1 |
recaptchaScore |
Etiqueta de evento, dimensión personalizada | Puntuación entre 0.0 y 1.0 (dónde 1.0 es más possible que sea humano y 0.0 Lo más possible es que sea un bot). Si la validación falla, se envía el mensaje de error. |
0.9o invalid-input-response |
Puedes explorar en profundidad hasta el 0.1 Puntuación para identificar idiosincrasias en este tráfico de baja puntuación.
Para comprender mejor la cantidad de tráfico de bots, cree segmentos basados en Puntuación reCAPTCHADespués de unas semanas, tendrás suficientes datos para:
- Determinar la proporción de tráfico de bots en su sitio.
- Determine si debes filtrar de forma permanente el tráfico de bots marcado en tus vistas de producción de Google Analytics.
Resumen
Muchas gracias a Philipp y Sebastian por compartir su increíble concept aquí. Dado que reCAPTCHA v3 calcula la puntuación en función de las interacciones de los usuarios en el sitio, es un candidato perfecto para medir con Google Analytics, ya que podemos recopilar de forma subrepticia la “condición de robotic” del visitante y aprovechar las dimensiones personalizadas de GA para recopilar los datos.
No es una implementación sencilla, ya que requiere un servicio net para consultar la puntuación de reCAPTCHA. ¿Quizás alguien podría hacer un favor al mundo y crear una API pública y gratuita para consultar esta información? Hasta entonces, estás limitado a una solución native o, mejor aún, a aprovechar la nube para configurar el punto last de la API.
Esta solución debería servir para descubrir la complejidad del tráfico de bots en cualquier sitio net. Los bots y los rastreadores vienen en diferentes formas y tamaños: hay agentes maliciosos y servicios que tienen como objetivo hacer el bien. En cualquier caso, lo más possible es que el tráfico de bots sea no su tráfico objetivo al crear su sitio net, por lo que poder segmentarlo en Google Analytics es realmente una gran ganancia para la calidad de los datos.
¡Cuéntanos en los comentarios qué piensas de esta solución y si tienes concepts para mejorarla!