Agrega analytics.js a tu sitio

La biblioteca analytics.js (también conocida como "etiqueta de Google Analytics") es una biblioteca de JavaScript que sirve para medir cómo los usuarios interactúan con tu sitio web. En este documento, se explica cómo agregar la etiqueta de Google Analytics a tu sitio.

La etiqueta de Google Analytics

La etiqueta de Google Analytics debe agregarse cerca de la parte superior de la etiqueta <head> y antes de cualquier otra etiqueta de secuencia de comandos o CSS. Además, se debe agregar el ID de propiedad de la propiedad de Google Analytics con la que deseas trabajar.

<!-- 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 tiene cuatro funciones principales:

  1. Crea un elemento <script> que comienza a descargar de forma asíncrona la biblioteca JavaScript de analytics.js desde https://www.google-analytics.com/analytics.js.
  2. Inicializa una función ga global (llamada cola de comandos ga()) que te permite programar los comandos que se ejecutarán una vez que la biblioteca analytics.js esté cargada y lista para usarse.
  3. Agrega un comando a la cola de comandos de ga() para crear un nuevo objeto de seguimiento para la propiedad especificada a través del parámetro 'GA_MEASUREMENT_ID'.
  4. Agrega otro comando a la cola de comandos de ga() para enviar una vista de página a Google Analytics de la página actual.

Es posible que las implementaciones personalizadas requieran modificar las dos últimas líneas de la etiqueta de Google Analytics (los comandos create y send) o agregar código adicional para capturar más interacciones. Sin embargo, no debes cambiar el código que carga la biblioteca analytics.js ni que inicializa la función de cola de comandos ga().

Etiqueta asíncrona alternativa

Si bien la etiqueta de Google Analytics descrita anteriormente garantiza que la secuencia de comandos se cargue y se ejecute de forma asíncrona en todos los navegadores, tiene la desventaja de no permitir que los navegadores modernos precarguen la secuencia de comandos.

La etiqueta asíncrona alternativa que aparece a continuación agrega compatibilidad con la precarga, lo que proporcionará un pequeño aumento del rendimiento en los navegadores modernos, pero puede disminuir la carga y ejecución síncronas en IE 9 y navegadores para dispositivos móviles más antiguos que no reconocen el atributo de secuencia de comandos async. Usa esta configuración de etiqueta solo si tus visitantes usan navegadores modernos para acceder a tu sitio.

<!-- 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 la etiqueta de Google Analytics?

Cuando agregas cualquiera de estas etiquetas a tu sitio web, envías una vista de página por cada página que visitan tus usuarios. Google Analytics procesa estos datos y puede inferir una gran cantidad de información, como la siguiente:

  • Es el tiempo total que un usuario permanece en tu sitio.
  • Indica el tiempo que un usuario permanece en cada página y el orden en que las visitó.
  • En qué vínculos internos se hizo clic (según la URL de la vista de página siguiente)

Además, la dirección IP, la cadena de usuario-agente y la inspección inicial de la página que analytics.js realiza cuando se crea un nuevo objeto de seguimiento se usan para determinar aspectos como los siguientes:

  • Es la ubicación geográfica del usuario.
  • Qué navegador y sistema operativo se usan
  • Tamaño de la pantalla y si tienes instalado Flash o Java
  • Es el sitio de referencia.

Próximos pasos

Para las necesidades básicas de generación de informes, los datos recopilados a través de la etiqueta de Google Analytics pueden ser suficientes, pero, en muchos casos, hay preguntas adicionales que deseas responder sobre tus usuarios.

Las guías de este sitio explican cómo medir las interacciones que te interesan con analytics.js, pero antes de implementar una función en particular, te recomendamos que leas las guías que aparecen en la sección Fundamentals (Aspectos básicos) del panel de navegación izquierdo. Estas guías te proporcionarán una descripción general de alto nivel de la biblioteca analytics.js y te ayudarán a comprender mejor los ejemplos de código que se usan en todo el sitio.

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