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 secuencia de comandos o etiquetas de CSS. Además, agrega 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 realiza cuatro tareas 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 global ga (llamada cola de comandos ga()) que te permite programar que se ejecuten comandos una vez que la biblioteca analytics.js se carga y está lista para usarse.
  3. Agrega un comando a la cola de comandos ga() a fin de 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 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 o 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 reducirse a 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 etiquetas solo si tus visitantes utilizan principalmente 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 página vista por cada página que visitan tus usuarios. Google Analytics procesa estos datos y puede inferir una gran cantidad de información, incluida la siguiente:

  • Se refiere al tiempo total que un usuario permanece en tu sitio.
  • Indica el tiempo que un usuario pasa en cada página y el orden en que las visitó.
  • Qué vínculos internos se hicieron clic (según la URL de la vista de página siguiente)

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

  • Es la ubicación geográfica del usuario.
  • El navegador y el sistema operativo que usas
  • Tamaño de la pantalla y si tiene 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 deberías responder sobre tus usuarios.

Las guías de este sitio explican cómo medir las interacciones que te interesan con analytics.js. Sin embargo, antes de implementar una función en particular, te recomendamos que leas las guías que aparecen en la sección Básicas 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.