Eventos de Google Tag Manager: cómo usarlos bien

Al configurar activadores y etiquetas en Google Tag Manager, es fundamental entender cuándo se dispararán, para que toda la medición necesaria quede ligada a los eventos correctos. Los tres eventos principales de GTM a los que puedes asociar un activador son:

1) Vista de página (gtm.js)

2) DOM listo (gtm.dom)

3) Ventana cargada (gtm.load)

Su secuencia es exactamente esta: gtm.js -> gtm.dom -> gtm.load. Veámoslos con más detalle:

Vista de página: es el evento más temprano que envía Google Tag Manager. Se dispara en el momento exacto en que se carga el contenedor de Google Tag Manager.

Cuándo usarlo: como dice el artículo de ayuda de GTM:

Usa esta opción si solo necesitas datos generados a partir de las impresiones de página.

Eso sí, recuerda que «impresión de página», en este caso, solo significa que el contenedor de Tag Manager se ha cargado y puede obtener información básica sobre la página (incluidas las variables de la capa de datos que se inicializan por encima del fragmento del contenedor).

DOM listo: este evento significa que el navegador ha construido la página completa y que toda la información necesaria se puede extraer del DOM.

El DOM es una representación basada en objetos del documento HTML original, en forma del llamado «árbol de nodos». Hay una descripción excelente del DOM aquí:

Se llama así porque puede pensarse como un árbol con un único tronco padre que se ramifica en varias ramas hijas, cada una de las cuales puede tener hojas. En este caso, el «tronco» padre es el elemento raíz <html>, las «ramas» hijas son los elementos anidados y las «hojas» son el contenido dentro de los elementos.

Cuándo usarlo: las etiquetas basadas en el evento gtm.dom deben usarse cuando hace falta obtener información importante renderizada en la página. Por ejemplo, si necesitas extraer algún dato de la página, solo podrás hacerlo cuando esté disponible. Si usas un activador que depende de gtm.js, toda esa información podría seguir siendo invisible para GTM.

Ventana cargada: este activador se dispara solo después de que todos los elementos de la página se hayan cargado por completo. Ventana cargada es el último evento. El objeto window representa la ventana del navegador. Como todos los objetos, funciones y variables globales de JavaScript forman parte del objeto window, que la ventana esté cargada significa que todo eso ya se ha cargado.

Cuándo usarlo: un activador de este tipo resulta útil cuando quieres disparar activadores concretos, pero solo con la página ya cargada. Por ejemplo, puede ser una opción para el software de grabación de pantalla o de mapas de calor. También sirve si piensas usar etiquetas de HTML personalizado y no quieres que interrumpan el proceso de carga de la página.

¡Que lo disfrutes!