Qué es gtag, cómo se carga y qué envía cada comando

¿Qué es gtag?

La función gtag() es la API de JavaScript de la etiqueta de Google, y cada llamada a ella añade un comando como config, event, set o consent a una cola llamada dataLayer, que la librería gtag.js lee para enviar datos a los productos de Google. La referencia de Google lo resume en una línea: "The Google tag (gtag.js) API uses the gtag() function to send data to Google products like Google Analytics and Google Ads." Si el código fuente de un sitio carga gtag/js?id=, ese sitio ejecuta la etiqueta de Google directamente en su propio código y no a través de un contenedor de Tag Manager.

Aquí se confunden tres nombres. gtag.js es el archivo de la librería. gtag() es la función que llama tu código. La etiqueta de Google es el nombre de producto que Google usa para todo el conjunto, y que describe como "a single tag you can add to your website to use Google measurement and advertising products like Google Ads, Google Analytics, Campaign Manager, Display & Video 360, and Search Ads 360."

¿Cómo se carga gtag.js en una página?

gtag.js se carga mediante un fragmento de dos partes que Google te pide colocar "immediately after the opening <head> HTML tag on every page you want to measure." La primera parte descarga la librería y la segunda define la función gtag() y pone en cola los primeros comandos.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'TAG_ID');
</script>

El orden importa menos de lo que parece. La librería se carga con async, así que el script en línea se ejecuta primero. Como gtag() no hace nada más que dataLayer.push(arguments), cada comando que llames antes de que llegue la librería espera en el array dataLayer, y gtag.js procesa la cola en cuanto termina de cargarse. Por eso puedes llamar a gtag('event', ...) en cualquier punto de la página sin comprobar si la librería está lista.

El id de la URL del script es un ID de etiqueta de Google. Google da como ejemplos "GT-XXXXXXXXX, G-XXXXXXXXX, and AW-XXXXXXXXX" y señala que "the IDs can be used interchangeably when adding the Google tag to your website." Una sola etiqueta de Google puede llevar varios IDs y enviar datos a varios destinos, como una propiedad de Google Analytics y una cuenta de Google Ads.

¿Qué hacen los comandos de gtag()?

Los comandos de gtag() son cinco verbos, cada uno pasado como primer argumento: config, event, set, get y consent. La tabla usa la sintaxis y la redacción de la referencia de la API de Google.

config hace más de lo que sugiere su descripción. Google afirma que "The config command is needed to send data to Google advertisement products," y en Google Analytics la llamada config predeterminada también envía un evento page_view. Para evitarlo, Google documenta send_page_view: false, que necesitas cuando envías tú mismo las páginas vistas, por ejemplo en una aplicación de una sola página.

set es el que conviene usar con moderación. Google añade: "We recommend using config or event commands wherever possible." Los valores definidos a nivel de evento sustituyen a los de config, y los de config sustituyen a cualquier valor definido globalmente con set.

consent admite dos modos. 'default' fija el estado inicial antes de que el visitante responda a tu banner, y 'update' lo cambia después de que responda. Los cuatro parámetros de consent mode v2 son ad_storage, analytics_storage, ad_user_data y ad_personalization; la guía de Google consent mode v2 explica qué añadieron las dos señales nuevas.

¿En qué orden deben ejecutarse los comandos de gtag?

Los comandos de gtag se ejecutan en el orden en que los pones en cola, y tres de ellos solo funcionan si van antes de la primera llamada config o event.

1. Indicador de exclusión. window['ga-disable-MEASUREMENT_ID'] = true "must be set before any calls to gtag() are made, and it must be set on each page for which you want to turn off Analytics."
2. Valores predeterminados de consentimiento. Google indica que hay que fijar el valor predeterminado de cada tipo de consentimiento "on every page of your site before any commands that send measurement data (such as config or event)." Si tu herramienta de consentimiento se carga de forma asíncrona, añade wait_for_update con un valor en milisegundos.
3. Ajustes globales. Las llamadas set como allow_google_signals: false van antes de config para que el primer hit ya los lleve.
4. config. Una llamada por ID de etiqueta.
5. event. Todo lo demás.

Un valor predeterminado de consentimiento colocado después de config llega demasiado tarde para la primera página vista, y esa es una de las formas más discretas en que un sitio acaba enviando hits que pretendía retener.

¿Qué relación tiene gtag con la etiqueta de Google y Google Tag Manager?

gtag.js y Google Tag Manager son dos formas de desplegar la misma etiqueta de Google: con gtag.js escribes los comandos en el código de la página, y con Tag Manager los configuras en una interfaz web y el script del contenedor, gtm.js, los carga por ti. La guía de gtag.js de Google dice que "if you're unfamiliar with JavaScript, we recommend using Google Tag Manager instead of gtag.js."

Los dos comparten el dataLayer, así que un sitio puede ejecutar ambos. El riesgo es contar las cosas dos veces. Google advierte, por ejemplo, de que si configuras las etiquetas mediante Tag Manager no debes activar también el seguimiento automático del historial en Google Analytics, "as this can lead to double-counting page views." La misma lógica vale para un fragmento de gtag escrito a mano y una etiqueta de Google en GTM que apuntan al mismo ID de medición: cada uno envía su propio page_view. La guía sobre el impacto de Google Tag Manager en la privacidad cubre la otra cara de esa elección, que es cuánto código permite un contenedor que otras personas añadan a tus páginas.

¿Por qué los bloqueadores de anuncios detienen gtag?

Los bloqueadores de anuncios detienen gtag al bloquear la petición de la librería a www.googletagmanager.com o los hits que envía a los endpoints de recogida de Google. Cuando falla la petición del script, gtag() sigue existiendo, porque la definió el fragmento en línea, pero nada lee nunca la cola del dataLayer, así que ningún dato sale de la página. La guía sobre bloqueadores de anuncios y precisión de la analítica explica cómo aparece ese hueco en los informes. Google tag gateway for advertisers sirve la etiqueta desde tu propio dominio, aunque la documentación de Google sobre el gateway no menciona los bloqueadores de anuncios.

¿Cómo compruebas lo que envía gtag?

Compruebas lo que envía gtag observando las peticiones de red y las herramientas de depuración de Google, no leyendo el fragmento. Las guías de Google usan dos: Tag Assistant, que muestra los comandos y los hits que produjo cada uno, y DebugView en Google Analytics, que muestra los eventos a medida que llegan cuando el modo de depuración está activado. En el navegador, filtra el panel Network por las peticiones de recogida y confirma que cada página vista o evento aparece una sola vez, con los parámetros que esperas. La lista de verificación de analítica recorre las mismas comprobaciones para cualquier tracker.

¿Cómo se compara el script de Flowsery con gtag?

El tracker de Flowsery es una sola etiqueta script con un ID de sitio web, así que no hay ninguna cola de comandos que configurar antes de que fluyan los datos. Pega <script defer data-fl-website-id="flid_******" src="https://cdn.flowsery.com/main.js"></script> en el head y las páginas vistas se registran automáticamente. Los objetivos personalizados usan un atributo data-fs-goal en el elemento o una llamada como window.flowsery('signup'), y la documentación de Flowsery muestra un pequeño stub de cola, window.flowsery.q, que guarda las llamadas hechas antes de que cargue el script, el mismo patrón que usa gtag con el dataLayer. El script también tiene una opción sin cookies que usa un hash de visitante que rota cada día y no almacena datos personales. El script ligero pesa menos de 10 KB y se carga de forma asíncrona. Si tu equipo ya gestiona las etiquetas en Google Tag Manager, la documentación de Flowsery incluye una configuración con etiqueta Custom HTML para GTM, de modo que los dos pueden convivir durante una migración.

Preguntas frecuentes

¿gtag es lo mismo que Google Tag Manager?

No. gtag.js es la librería detrás de la etiqueta de Google, y llamas a gtag() desde el código de tu propia página. Google Tag Manager es un contenedor aparte, cargado mediante gtm.js, donde las etiquetas se configuran en una interfaz web. Los dos pueden desplegar la misma etiqueta de Google.

¿Puedo llamar a gtag() antes de que cargue gtag.js?

Sí. El fragmento en línea define gtag() como una función que añade sus argumentos al array dataLayer. Las llamadas hechas antes de que llegue la librería esperan en esa cola, y gtag.js las procesa en orden en cuanto carga.

¿Un solo fragmento de gtag puede enviar datos a Google Analytics y Google Ads?

Sí. Una etiqueta de Google puede conectarse a varios destinos, como una propiedad de Google Analytics y una cuenta de Google Ads. Una sola etiqueta puede llevar varios IDs de etiqueta, y Google señala que esos IDs son intercambiables al añadir la etiqueta a tu sitio.

¿Por qué gtag envía un page_view sin una llamada event?

La llamada config predeterminada para un ID de Google Analytics envía por sí sola un evento page_view. Define send_page_view: false si quieres enviar las páginas vistas manualmente. En sitios con medición mejorada, las páginas vistas basadas en el historial se siguen disparando salvo que también desactives esa opción en el flujo de datos.

¿Dónde debe ir el fragmento de gtag?

Google indica que lo coloques justo después de la etiqueta de apertura <head> en cada página que quieras medir. El indicador de exclusión va en un script antes del fragmento, porque Google dice que debe definirse antes de cualquier llamada a gtag(). Los valores predeterminados de consentimiento van dentro del fragmento, antes de la llamada config, porque Google dice que deben ejecutarse antes de cualquier comando que envíe datos de medición.

¿Funciona gtag si el script está bloqueado?

No se envía ningún dato. La parte en línea del fragmento sigue definiendo gtag() y llenando el dataLayer, pero sin la librería gtag.js nada procesa esa cola. Por eso los visitantes bloqueados faltan en Google Analytics en lugar de aparecer como errores.

¿Cuál es la diferencia entre gtag.js, gtag() y la etiqueta de Google?

gtag.js es el archivo de la biblioteca que se carga desde googletagmanager.com. gtag() es la función que llama tu código para añadir comandos al dataLayer. La etiqueta de Google es el nombre que da Google a todo el conjunto, una sola etiqueta que cubre productos como Google Ads y Google Analytics.

¿Qué formatos de ID de etiqueta puedo usar en el fragmento de gtag?

Google da como ejemplos GT-XXXXXXXXX, G-XXXXXXXXX y AW-XXXXXXXXX, y indica que los ID se pueden usar indistintamente al añadir la etiqueta de Google a tu sitio. El ID va en el parámetro id de la URL del script y en tu llamada config. Una misma etiqueta de Google puede llevar varios ID.

¿Cuándo debo usar gtag('set')?

Usa set para parámetros que deben asociarse a cada evento posterior de la página. Google recomienda usar config o event siempre que sea posible. Los valores a nivel de evento sustituyen a los de config, y los de config sustituyen a lo definido globalmente. Si usas set, colócalo antes de config para que el primer hit ya lleve esos valores.

¿Cómo desactivo Google Analytics con una marca de exclusión de gtag?

Define window['ga-disable-MEASUREMENT_ID'] = true en la página. Según Google, debe establecerse antes de cualquier llamada a gtag() y en cada página en la que quieras desactivar Analytics.