Cómo evitar que los bloqueadores de anuncios bloqueen sus datos analíticos

TL; DR Pronto estará disponible el servicio dataunlocker.com (¡suscríbase!), Junto con el prototipo de código abierto que puede usar para Google Analytics o Google Tag Manager (actualización de 2020).

El artículo de la década de 2017 a continuación explica los principios utilizados detrás de estas soluciones, así como también se describe en el archivo Léame de la solución.

Cuando su producto recién comienza, todos los usuarios son importantes. También lo hacen los datos sobre cómo interactúan con su producto.

Si ha intentado utilizar soluciones de análisis como Google Analytics, es posible que se haya enfrentado a un problema en el que los bloqueadores de anuncios bloquearon su colección de análisis.

Según PageFair, hasta el 30% de los usuarios de Internet utilizan bloqueadores de anuncios en 2017, y este número crece constantemente.

Este artículo explicará algunos enfoques técnicos que puede tomar para evitar que los bloqueadores de anuncios bloqueen también sus análisis. Usaremos Google Analytics en este artículo, aunque gran parte de esto podría aplicarse a otras herramientas de análisis.

Algunas formas de evitar los bloqueadores de anuncios

Casi todos los bloqueadores de anuncios funcionan con los mismos métodos: no permiten algunas solicitudes de contenido del navegador http (s) en URL que coinciden con una determinada máscara de su base de filtrado.

La mayoría de los bloqueadores de anuncios incluyen en la lista negra www.google-analytics.com de forma predeterminada y bloquean cualquier intento de la biblioteca JavaScript de Google Analytics para enviar o recuperar los datos de sus servidores de análisis.

Afortunadamente para los desarrolladores, los bloqueadores de anuncios no bloquean las solicitudes a nuestros propios nombres de dominio de forma predeterminada, porque hacer esto puede dañar la funcionalidad de la aplicación web. Esta brecha revela una forma de evitar el bloqueo de análisis hasta que su servicio web sea lo suficientemente conocido como para que algunas de sus URL aparezcan en los filtros de bloqueadores de anuncios.

De hecho, incluso después de que algunas URL aparezcan en la base de filtrado de contenido, puede comenzar a jugar con los bloqueadores de anuncios inventando cosas terribles, como las URL analíticas que cambian cada hora (aunque esto está más allá del alcance de este artículo). Algunos de estos enfoques son aplicados por servicios como DataUnlocker.com y Adtoniq, que ofrecen a los usuarios una experiencia sin bloqueadores de anuncios incluso cuando los bloqueadores de anuncios están activados.

Una explicación de alto nivel de lo que vamos a hacer.

En este artículo, asumiremos que no tenemos restricciones de permisos en el lado del servidor. Escribiremos la solución de demostración (algunas líneas de código) para la plataforma Node.js. Una vez que comprenda cómo funciona esto, debería poder portar esta solución a cualquier lenguaje de programación o plataforma.

La solución que describiré es bastante mínima, y ​​si eres un desarrollador web experimentado, es posible que solo te lleve unos minutos implementarla.

Usaremos un enfoque de proxy simple sin la necesidad de sumergirnos en el protocolo de medición de Google Analytics. En resumen, la solución tiene el siguiente aspecto:

  1. Primero, descargue la biblioteca JavaScript de Google Analytics y alójela en su servidor.
  2. Luego, modifique el código en la biblioteca descargada para cambiar el host de destino de www.google-analytics.com a su propio nombre de dominio usando buscar-reemplazar.
  3. Reemplace el enlace del script predeterminado de Google Analytics en su código base por uno modificado.
  4. Cree un punto final de proxy para los servidores de Google Analytics en su back-end. Un paso importante aquí es detectar adicionalmente la dirección IP del cliente y escribirla explícitamente en las solicitudes a los servidores de Google Analytics para preservar la detección de ubicación correcta.
  5. Prueba los resultados. ¡Listo!

El tutorial completo de implementación técnica

Todo el código y los pasos descritos a continuación están disponibles en GitHub. La descripción a continuación explica los conceptos básicos del método y, por supuesto, el enfoque sugerido se puede mejorar para que sea aún más "antibloqueo".

En Google Analytics, comienza por adquirir un ID de seguimiento único para su propiedad (servicio web). Utilizaremos UA-98253329-1 ID de seguimiento en este artículo para la demostración. No olvide reemplazar el código de seguimiento por el suyo.

Google sugiere agregar este código minimizado a sus servicios web para habilitar la analítica:

 (function(i,s,o,g,r,a,m)function() (i[r].q=i[r].q,i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) )(window,document,'script', '//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-98253329-1', 'auto'); ga('send', 'pageview'); 

En pocas palabras, este código carga la biblioteca JavaScript de Google Analytics si no se cargó antes insertando la etiqueta de secuencia de comandos en el documento. Esta biblioteca incluye toda la lógica de la colección de análisis, y es lo único que necesitamos para continuar.

Paso 1: descargue y parchee la biblioteca de análisis de Google

Descargue el script directamente desde //www.google-analytics.com/analytics.js , ábralo con cualquier editor de texto y reemplace todas las apariciones de:

www.google-analytics.com

con esta cadena exacta:

"+location.host+"/analytics

Al parchear la biblioteca de análisis de esta manera, comenzará a realizar solicitudes a los puntos finales del host local ( my.domain.com/analytics) en lugar de a www.google-analytics.com . Coloque este archivo analytics.js parcheado en su servidor después del reemplazo.

Paso 2: Reemplace el script de análisis por el parcheado

Modifiquemos el código de incrustación de Google Analytics de esa manera para que use nuestra biblioteca parcheada en lugar de la predeterminada:

 (function(i,s,o,r)function()[]).push(arguments),i[r].l=1*new Date())(window,document,'script','ga'); ga('create', 'UA-98253329-1', 'auto'); ga('send', 'pageview');  

Tenga en cuenta que aquí el navegador buscará el script de análisis parcheado en la raíz del documento de su servidor, en este caso, my.domain.com/analytics.js. Compruebe si puso el script en la raíz del documento o si cambió la ruta en la etiqueta de script anterior. También puede verificar los resultados ejecutando una prueba en su servidor local (consulte el archivo Léame para saber cómo ejecutar el ejemplo de GitHub).

Debería ver algo como esto en las herramientas de desarrollo del navegador:

En última instancia, queremos que el acto de descargar su analytics.js parcheado devuelva una respuesta exitosa: un estado 200 (OK) o 304 (no modificado). Pero en este punto, la solicitud a my.domain.com/analytics/collect debería responder con el estado 404, ya que aún no hemos implementado el servidor proxy.

Paso 3: Implementación del servidor proxy más simple

Now we’re going to code a bit. Our goal is to implement the proxy server, which will transport our analytics requests from our server to the real Google Analytics server. We can do this in many ways, but as an example, let’s use Node.js and Express.js with the express-http-proxy package.

Gathering all the files in the example together (see GitHub), we should end up with the following JavaScript server code:

var express = require("express"), proxy = require("express-http-proxy"), app = express(); app.use(express.static(__dirname)); // serve static files from cwd function getIpFromReq (req)  // get the client's IP address var bareIP = ":" + ((req.connection.socket && req.connection.socket.remoteAddress)  // proxying requests from /analytics to www.google-analytics.com. app.use("/analytics", proxy("www.google-analytics.com", { proxyReqPathResolver: function (req) { return req.url + (req.url.indexOf("?") === -1 ? "?" : "&") + "uip=" + encodeURIComponent(getIpFromReq(req)); } })); app.listen(1280); console.log("Web application ready on //localhost:1280");

A few last lines here do the proxying. The only trick we do here is instead of just proxying, we detect and append the client’s IP address explicitly in a form of a measurement protocol URL parameter. This is required to collect precise location data, because all the requests to Google Analytic originally come from our server’s IP address, which remains constant.

After setting up our server proxy, we can check whether the request to our /collect endpoint now successfully returns a 200 OK HTTP status:

We can use, for example, an anonymous connection to verify that location is also picked up correctly.

This “proxy server” approach is a fast workaround for analytics that enables your services to avoid ad blockers. But this method relies on the browser side, and if the browser script for some reason does not send analytics information to our servers, we get nothing.

The last possible step if you want to implement a solid solution is to send analytics directly from the server by using server-side libraries available for different languages (NodeJS, Python, Ruby, PHP). This approach will definitely avoid any content blockers, as every request to analytics servers comes directly from our servers.

Again, the demo application is available on GitHub, feel free to test it! Let me know if you have any feedback or interesting experiences using this approach.

Thanks for reading!