La mayoría de sitios y servicios web utilizan Google Analytics o servicios similares para conocer la actividad de los usuarios, desde cuándo nos visitan hasta cuánto pinchan en cada enlace. Esta información es la base para tomar decisiones de todo tipo, desde cuándo poner el sitio en "modo mantenimiento" hasta qué funcionalidades podemos eliminar.
Como estos servicios de analítica los utilizan millones de sitios web, pueden seguir el rastro del usuario a través de todo Internet. Por supuesto no todo el mundo está de acuerdo con esto. Por eso algunas personas ya han empezando a tomarse su privacidad más en serio e instalan bloqueadores de rastreo o activan la opción "Indicar a los sitios que no me rastreen".
La privacidad del usuario puede romper tu sitio
Resulta genial que los usuarios se preocupen tanto por su privacidad. Pero si tu sitio web utiliza alguna de las funcionalidades de los servicios de analítica, puede dejar de funcionar si el usuario las bloquea.
En el siguiente ejemplo se va a utilizar el caso de rastrear qué enlaces
externos al sitio pinchan los usuarios, ya que se trata de una caso de uso muy
común. Además, se va a usar el código de seguimiento universal de Google
(analytics.js
) en vez del código clásico (ga.js
), por lo que la solución que
deberías aplicar en tu sitio podría ser un poco diferente.
¿Qué es lo que está fallando?
El método actualmente recomendado por Google para analizar los enlaces externos pinchados por los usuarios tiene esta pinta:
<a href="http://www.example.com"
onclick="trackOutboundLink('http://www.example.com'); return false;">
Visita example.com
</a>
<script>
var trackOutboundLink = function(url) {
ga('send', 'event', 'outbound', 'click', url, {
'transport': 'beacon',
'hitCallback': function() { document.location = url; }
});
}
</script>
La recomendación oficial de Google consiste en:
- Añadir
return false
en los enlaces para que cuando el usuario no abandone tu sitio al pincharlos. - Cuando se pincha un enlace, se añade a la lista de eventos notificados a Google Analytics.
- Google Analytics procesa el evento que ha notificado nuestra página.
- Google Analytics ejecuta el callback que redirige al usuario a la página apuntada por el enlace original.
Todo esto hace que el usuario no abandone nuestro sitio hasta que el evento no se haya registrado. El problema es que si Google Analytics falla al procesar el evento, nunca se ejecuta el callback y por tanto, todos los enlaces de nuestro sitio dejarán de funcionar.
Como dependemos de Google Analytics para redirigir al usuario a la nueva página, si el código de Google Analytics no se carga porque el usuario lo ha bloqueado, nuestro sitio dejará de funcionar bien.
Cómo solucionar estos problemas
Si utilizas la forma recomendada para añadir Google Analytics en tu sitio, seguramente todas tus páginas incluyen algo como lo siguiente:
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},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-xxxxx-x', 'auto');
ga('send', 'pageview');
Este código crea un objeto global llamado ga
. Este objeto está disponible en
cualquier código JavaScript de la página aunque Google Analytics no cargue
correctamente sus scripts. Por lo tanto:
- Se pueden añadir eventos a la cola de Google Analytics antes incluso de que este cargue (lo que es genial para hacer seguimiento de eventos que suceden muy rápidamente).
- No podemos detectar si Google Analytics se ha cargado bien comprobando la
existencia del objeto
ga
, ya que este siempre está disponible.
¿Cómo podemos detectar de manera fiable si Google Analytics se ha cargado bien?
Algunos programadores muy perspicaces se han dado cuenta de que el objeto global
ga
se modifica ligeramente cuando Google Analytics se carga. Lo malo es que
ninguno de estos cambios está documentado oficialmente por Google, así que esta
solución podría dejar de funcionar en el futuro.
En este artículo,
Andreas Veithen sugiere que la comprobación más fiable es ver si el objeto ga
todavía tiene el array llamado q
. Este array se elimina después de que Google
Analytics se cargue y procese todos los eventos pendientes guardados en ese
array. Lo mejor es que el array q
forma parte del código que se incluye en las
páginas para activar Google Analytics. Así que siempre va a estar ahí a menos
que cambiemos ese código, algo que es muy poco probable.
En este otro artículo,
John Morton sugiere comprobar la propiedad create
del objeto ga
. Esta es la
técnica más usada en la actualidad.
En este artículo,
Dom Sammut sugiere comprobar la propiedad loaded
del objeto ga
. Esta técnica
se comenta de manera informal en algún documento oficial de Google, así que
podríar un método bastante fiable. Lo mejor es que se trata del método más
intuitivo, ya que literalmente estamos comprobando la existencia de una
propiedad llamada "cargado" (loaded
).
Siguiendo esta última técnica, podemos cambiar de esta manera el código para seguir los enlaces pinchados:
var trackOutboundLink = function(url) {
// comprobar que el objeto 'ga' existe y se ha inicializado
if(window.ga && ga.loaded) { {
// en caso afirmativo, hacer seguimiento de enlaces pinchados
ga('send', 'event', 'outbound', 'click', url, {
'transport': 'beacon',
'hitCallback': function(){document.location = url;}
});
} else {
// en caso negativo, cargar la página apuntada por el enlace
document.location = url;
}
}
Hacer este tipo de comprobaciones cuando utilizas un código de terceros es una buena práctica. Deberías incluir una alternativa para cada código o script que no provenga directamente de tus servidores.
Respetando la privacidad de los usuarios
A la mayoría de usuarios les importa su privacidad. Por suerte, los sitios web disponen de muchas herramientas para proteger la privacidad. Además, dependiendo del país en el que vivas o la empresa/institución para la que trabajes, proteger la privacidad de los usuarios puede que sea obligatorio por ley o por la propia política de la empresa.
Configurando Google Analytics para proteger la privacidad
Una de las maneras más sencillas de proteger la privacidad es configurar Google Analytics para que anonimice las direcciones IP de los usuarios. En la práctica, esto hace que Google Analytics ponga a cero el último octeto de la IP del usuario antes de guardarla.
Para ello, añade una llamada a anonymizeIp
justo después de registrar el
evento send
:
ga('send', 'pageview');.
ga('set', 'anonymizeIp', true);
Obviamente Google tiene acceso a la dirección IP completa del usuario, pero con esta opción confiamos en que cumpla su palabra de anonimizarla antes de guardarla.
Respetando la opción "No me sigas" ("Do not track")
También es posible usar Google Analytics respetando la privacidad de los usuarios que activan la opción "Indicar a los sitios que no me rastreen". Para ello, puedes utiliza la técnica descrita por Schalk Neethling en este artículo.
La idea consiste en detectar si el usuario ha activado la opción "Do Not Track" y cargar Google Analytics solamente en caso de que esté desactivada:
function _dntEnabled() {
// copiar aquí el código de https://github.com/schalkneethling/dnt-helper/blob/master/js/dnt-helper.js
// que detecta si la opción 'Do Not Track' está activada
}
if (!_dntEnabled()) {
// cargar aquí el código de Google Analytics
}
Este último código hace que el objeto ga
global no esté disponible cuando no
se carga Google Analytics. Esto ya no es un problema porque en los ejemplos de
código anteriores ya hemos tenido en cuenta esta circunstancia, por lo que el
sitio seguirá funcionando bien.
Sobre la autora
Este artículo fue publicado originalmente por Stephanie Hobson y ha sido traducido con permiso por Javier Eguiluz.