Añadir analytics.js al sitio web

La biblioteca analytics.js (conocida como "la etiqueta de Google Analytics") es una biblioteca de JavaScript que sirve para medir las interacciones de los usuarios con tu sitio web. En este documento se explica cómo añadir la etiqueta de Google Analytics a un sitio web.

La etiqueta de Google Analytics

La etiqueta de Google Analytics debe añadirse en la parte superior de la etiqueta <head> y antes de cualquier otra secuencia de comandos o etiqueta de CSS. La cadena 'GA_MEASUREMENT_ID' debe sustituirse por el ID de propiedad (también denominado "ID de medición") de la propiedad de Google Analytics que se quiera medir.

<!-- Google Analytics -->
<script>
(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','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

El código anterior lleva a cabo cuatro acciones principales:

  1. Crea un elemento <script> que inicia asíncronamente la descarga de la biblioteca de JavaScript analytics.js desde https://www.google-analytics.com/analytics.js.
  2. Activa una función ga global (denominada ga()) que te permite programar que los comandos se ejecuten una vez que la biblioteca analytics.js esté cargada y preparada para funcionar.
  3. Añade un comando a la cola de comandos ga() para crear un objeto de seguimiento de la propiedad especificada mediante el parámetro 'GA_MEASUREMENT_ID'.
  4. Añade otro comando a la cola de comandos ga() para enviar una página vista a Google Analytics correspondiente a la página actual.

Si personalizas tu implementación, tal vez tengas que modificar las dos últimas líneas de la etiqueta de Google Analytics (los comandos create y send) o añadir código para registrar más interacciones. No obstante, no debes cambiar el código que carga la biblioteca analytics.js o activa la función de la cola de comandos ga().

Etiqueta asíncrona alternativa

Aunque la etiqueta de Google Analytics descrita anteriormente hace que la secuencia de comandos se cargue y ejecute de forma asíncrona en todos los navegadores, no permite que los navegadores modernos precarguen la secuencia de comandos.

La etiqueta asíncrona alternativa que se muestra a continuación permite la carga previa, lo que mejora el rendimiento en los navegadores modernos. No obstante, puede cambiar a la carga síncrona y ejecución en IE 9 en navegadores móviles más antiguos que no reconozcan el atributo de la secuencia de comandos async. Usa esta configuración de etiquetas solo si tus visitantes utilizan principalmente navegadores modernos para acceder a tu sitio web.

<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

¿Qué datos registra la etiqueta de Google Analytics?

Cuando incluyes cualquiera de estas etiquetas a tu sitio web, se envía un registro de página vista por cada página que visitan tus usuarios. Google Analytics procesa estos datos y puede deducir una gran cantidad de información, por ejemplo:

  • El tiempo total que un usuario pasa en tu sitio web.
  • El tiempo que un usuario pasa en cada página y en qué orden se han visitado las páginas.
  • En qué enlaces internos se ha hecho clic (según la URL de la siguiente página vista).

Además, la dirección IP, la cadena user-agent y la inspección de página inicial que hace analytics.js al crear un objeto de seguimiento se utilizan para determinar algunos datos como los siguientes:

  • La ubicación geográfica del usuario.
  • El navegador y el sistema operativo que se usan.
  • El tamaño de la pestaña y si está instalado Flash o Java.
  • El sitio web de referencia.

Pasos siguientes

En el caso de los informes más básicos, los datos recogidos a través de la etiqueta de Google Analytics pueden ser suficientes. No obstante, en muchos casos, es recomendable obtener más información sobre los usuarios.

En las guías de este sitio web se explica cómo utilizar analytics.js para medir las interacciones que te interesan, pero, antes de implementar una determinada función, te recomendamos que leas las guías de la sección Fundamentos en el panel de navegación izquierdo. En estas guías se ofrece una descripción general de la biblioteca analytics.js y te ayudarán a entender los ejemplos de código que se usan en el sitio web.

En la siguiente guía de esta serie se explica cómo funciona analytics.js.