Añadir analytics.js a tu sitio

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

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. También se debe añadir el ID de propiedad 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 cola de comandos 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 vista de página 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, lo que es un inconveniente.

La etiqueta asíncrona alternativa que se muestra a continuación permite la precarga, lo que mejora ligeramente el rendimiento en los navegadores modernos, pero puede afectar negativamente a la carga síncrona y la ejecución en IE 9 y en navegadores móviles más antiguos que no reconocen el atributo de la secuencia de comandos async. Usa esta configuración de etiquetas solo si tus visitantes usan 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 en 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, como la siguiente:

  • 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 usan 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 Flash o Java están instalados.
  • 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 se explica cómo usar analytics.js para medir las interacciones que te interesan, pero, antes de implementar una función determinada, te recomendamos que leas las guías de la sección Fundamentos, a las que puedes acceder desde el panel de navegación izquierdo. Estas guías incluyen una descripción general de la biblioteca analytics.js y te ayudarán a entender mejor los ejemplos de código que se usan en el sitio.

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