Añadir 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 puedes añadir analytics.js al sitio web.

El fragmento de medición JavaScript

La forma más sencilla de empezar a usar analytics.js es añadir el siguiente código (conocido como el "fragmento de medición JavaScript") a las plantillas de tu sitio web.

El código debe añadirse cerca de 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 cola de comandos de 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 de ga() que permite crear un objeto de seguimiento para la propiedad especificada mediante el parámetro 'GA_MEASUREMENT_ID'.
  4. Añade otro comando a la cola de comandos de ga() para enviar un registro de 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 del fragmento de seguimiento JavaScript (los comandos create y send) o añadir código para hacer el seguimiento de 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().

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 añade compatibilidad con la carga previa, lo que mejora ligeramente el rendimiento de 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 incluyes cualquiera de estos fragmentos de seguimiento 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 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 hacer 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.