Agregar analytics.js al sitio web

La biblioteca analytics.js es una biblioteca JavaScript para medir cómo interactúan los usuarios con tu sitio web. En este documento se explica cómo agregar analytics.js al sitio web.

Fragmento de seguimiento JavaScript

Agregar el siguiente código (conocido como el "fragmento de seguimiento JavaScript") a las plantillas de tu sitio web es la forma más sencilla de empezar a usar analytics.js.

El código se debe agregar antes de la etiqueta </head> de cierre y la cadena 'UA-XXXXX-Y' se debe reemplazar por el ID de propiedad (también conocido como el "ID de seguimiento") de la propiedad de Google Analytics de la que quieras realizar el seguimiento.

<!-- 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 JavaScript analytics.js desde https://www.google-analytics.com/analytics.js.
  2. Inicializa una función ga global (denominada cola de comandos de ga()) que te permite programar la ejecución de comandos una vez que la biblioteca analytics.js esté cargada y preparada para funcionar.
  3. Agrega un comando a la cola de comandos de ga() para crear un nuevo objeto de seguimiento para la propiedad especificada mediante el parámetro 'UA-XXXXX-Y'.
  4. Agrega otro comando a la cola de comandos de ga() para enviar una página vista a Google Analytics correspondiente a la página actual.

Es posible que las implementaciones personalizadas requieran modificar las dos últimas líneas del fragmento de seguimiento JavaScript (comandos create y send) o agregar código adicional para realizar el seguimiento de más interacciones. No obstante, no debes cambiar el código que carga la biblioteca analytics.js o inicializa la función de la cola de comandos ga().

Fragmento de seguimiento asíncrono alternativo

Aunque el fragmento de seguimiento JavaScript descrito anteriormente garantiza que la secuencia de comandos se cargará y ejecutará de forma asíncrona en todos los navegadores, tiene la desventaja de no permitir que los navegadores modernos realicen una carga previa de dicha secuencia.

El fragmento alternativo siguiente agrega compatibilidad con la carga previa, lo que proporciona un pequeño impulso de rendimiento en los navegadores modernos, pero puede afectar negativamente a la carga síncrona y la ejecución en IE9 y en navegadores para dispositivos móviles antiguos, que no reconocen el atributo de secuencia de comandos async. Usa este fragmento 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 captura el fragmento de seguimiento?

Cuando agregas cualquier de estos fragmentos de seguimiento a tu sitio web, se envía una 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 de user-agent y la inspección de página inicial que hace analytics.js al crear un nuevo 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

Para las necesidades básicas de informes, los datos recopilados mediante el fragmento de seguimiento JavaScript pueden ser suficientes, pero en muchos casos hay preguntas adicionales que debes responder sobre tus usuarios.

En las guías de este sitio web se explica cómo realizar el seguimiento con analytics.js de 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.