Variable del elemento DOM en el gestor de etiquetas de Google

Actualizado: 18 de septiembre de 2023.

En este blog, ya he publicado artículos sobre varias variables del Administrador de Etiquetas de Google, por ejemplo, variable de Auto-evento, variable de URL, variable indefinida, etc. Pero hay una más que no recibió mucha publicidad aquí, la variable DOM Element. Eso es porque requiere cierto conocimiento técnico y no soy su mayor fan (debido a su fragilidad).

Aquellos que leen mis artículos por un período de tiempo más largo saben que siempre abogo por tener datos en la Capa de Datos en lugar de tratar de raspar algo del sitio web. Sin embargo, no todos los proyectos son perfectos y no todos tienen recursos de desarrollo dedicados. Por lo tanto, podríamos terminar raspando DOM o usando selectores CSS en nuestros disparadores.

Es por eso que creo que aún debes saber qué es la variable DOM Element y cómo usarla.

Tabla de contenidos

Antes de continuar: este tema también se trata a fondo en el Curso Intermedio de Google Tag Manager

La variable DOM Element es una de esas características que los usuarios intermedios del Google Tag Manager a menudo pasan por alto (o simplemente se saltan accidentalmente). Es por eso que he creado un curso intermedio de Google Tag Manager que llevará su manejo de etiquetas a un nivel completamente nuevo (descubriendo el potencial del GTM).

Una rápida introducción a DOM

Para entender lo que es la variable del elemento DOM en el GTM, primero hay que tener por lo menos una comprensión muy básica de lo que es el DOM en general. El Modelo de Objeto de Documento (también conocido como DOM) es una representación jerárquica dinámica en forma de árbol del documento del sitio web. Permite manipular el documento del sitio web, obtener valores de los elementos actuales del sitio web, añadir nuevos, editar o eliminar los existentes.

Si vas a cualquier sitio web y abres su fuente (por ejemplo, CTRL+U en Chrome (WIN)), verás el código HTML de la página. Este es el código que un desarrollador escribió para hacer que el sitio web tenga el aspecto que tiene en este momento.

Pero no se ve muy dinámico, ¿verdad? Pero si vuelves a ese mismo sitio web y abres las herramientas de desarrollo (Chrome en Windows: presiona F12, Chrome en Mac: Comando + Opción + I), verás una representación más dinámica del código del sitio web. Si no, cambia a la pestaña Elementos.

Hay nodos que se pueden expandir o colapsar (haciendo clic en triángulos oscuros), muchos nodos tienen hijos que pueden tener sus propios hijos, los nodos pueden tener varios hijos, etc. Es una representación dinámica en forma de árbol de los documentos del sitio web. Estás inspeccionando el DOM HTML aquí.

Como he mencionado antes, DOM permite no sólo ver/inspeccionar elementos del sitio web sino también manipularlos. La forma más fácil y realista de editar nodos en el DOM es hacer un doble clic en un determinado nodo y luego cambiar su valor o borrar/editar/añadir atributos a un elemento.

Pero esto no es muy escalable y útil. En su lugar, debería haber alguna forma mejor de hacerlo, ¿no? Sí. DOM soporta un montón de métodos que permiten a los desarrolladores (y a ti, si tienes la suficiente habilidad) añadir, editar y eliminar elementos.

En cuanto a la lectura de los valores, el método getElementById(«some_id») te devolverá el primer elemento del sitio web que coincida con un ID some_id . En la siguiente captura de pantalla, puedes ver el comando (1ª línea) y el elemento devuelto (2ª línea).

Otro ejemplo podría ser querySelector(), que devuelve el primer elemento del sitio web que coincide con un determinado selector CSS definido por ti.

Y es un buen momento para introducir la variable DOM Element del Google Tag Manager. Este tipo de variable puede acceder al valor de un elemento del sitio web que coincida con una condición definida por ti. Echemos un vistazo más de cerca.

Configurar la variable DOM Element en el Google Tag Manager

Para crear una nueva variable de DOM Element, vaya a Variables > Desplácese hacia abajo > Nuevo > DOM Element. Haz clic en él y echemos un vistazo a los posibles ajustes aquí.

Lo primero que necesitas establecer es el método de selección. Necesitas de alguna manera decirle a GTM qué elemento del sitio web en particular te interesa. Los elementos pueden ser seleccionados por un ID o por el selector de CSS. Primero, probemos con el ID.

Imaginemos que tenemos una página con un producto en particular y quieres obtener el nombre de ese producto. Una de las formas de hacerlo sería leer el texto de un elemento del sitio web que es el Título del Producto. Haz clic con el botón derecho del ratón en el título de un producto y esperemos que tengamos la suerte de encontrar un ID en ese elemento. ¡Bingo!

Haz doble clic en ese ID, cópialo y pégalo en el campo ID del elemento en tu variable GTM. ¿Y el 2º campo (Nombre del atributo)?

Si lo dejas vacío, la variable DOM Element devolverá el texto del elemento del sitio web (en este ejemplo, camiseta de Dark Blur). Sin embargo, en algunos casos, puede ser más útil no buscar el texto de un elemento, sino su cierto atributo. Puedes averiguar qué atributos tiene un determinado elemento web inspeccionándolo (esta vez, he inspeccionado un elemento diferente).

¿Ves todos estos parámetros resaltados (tipo, nombre, id, clase)? Se llaman atributos.

Por lo tanto, si quieres obtener el valor de un determinado atributo, tendrás que especificar su nombre en el campo Nombre del atributo , por ejemplo, tipo.

Para ver si tu variable ha sido creada correctamente, guárdala, habilita/actualiza el modo Vista previa y Depuración, y comprueba el valor de la variable en la pestaña Variables .

¿Qué pasa si el ID no está presente? Entra en la zona de Selectores CSS

Si aún no estás familiarizado con los selectores CSS, te recomiendo encarecidamente que leas esta guía de Simo Ahava en la que comparte un montón de selectores útiles para Google Tag Manager.

En resumen, los Selectores CSS permiten apuntar a elementos específicos del sitio web para aplicarles un estilo (después de todo, CSS es para el estilo del sitio web). Aquí tienes un ejemplo básico de CSS:

.botón rojo {color: #FF0000;}

Este pedazo de CSS establece que todos los elementos que contienen el atributo de clase red-button serán coloreados en rojo (código de color #FF0000). Apuntar elementos en CSS es posible gracias a los Selectores de CSS. En el ejemplo anterior, el Selector CSS es .red -button y apunta a todos los elementos cuya clase es red-button (un punto en CSS significa «class»).

Pero los selectores CSS son tan versátiles que pueden ser utilizados en los métodos DOM también. Si quieres elegir un determinado elemento del sitio web y leer su valor, puedes escribir un selector CSS más complejo, por ejemplo, div.call_to_action > .someClass.

document.querySelector("div.call_to_action > .someClass")

Así que si tienes curiosidad, sigue adelante y comprueba la guía de Simo con los ejemplos del Selector de CSS para conseguir algo de inspiración. Si eres nuevo en los selectores y esto parece confuso, no te preocupes. Es una reacción bastante normal. Pero una vez que empieces a jugar y a usarlo más a menudo, te pondrás a ello.

Cómo probar tu Selector CSS

Digamos que finalmente has logrado escribir un Selector CSS que apunta a algún elemento importante. ¿Cómo puedes probarlo? Una forma podría ser guardar la variable en la interfaz GTM, refrescar el modo de vista previa, luego refrescar la página y comprobar el valor de la variable. Pero ese es un largo camino.

¿Qué pasa si no logras crear un selector CSS adecuado desde la primera vez? ¿Qué pasa si terminas ajustando el selector 20 veces? Tendrás que guardar la variable, refrescar la vista previa, probar 20 veces. Ahí es donde se pierde el tiempo.

Una alternativa más rápida es usar el método document.querySelector() en la consola JavaScript de tu navegador. Simplemente ábrelo e introduce el siguiente comando:

document.querySelector("su_css_selector")

Reemplaza tu parte del_css_selector con tu actual selector. Presiona enter y (si tu selector es correcto) te devolverá el elemento que querías atacar. Si obtienes algunos resultados inesperados, ajusta el selector CSS, e inténtalo de nuevo.

Cuando finalmente obtengas el resultado deseado, haz la prueba final introduciendo el selector CSS en los ajustes de la variable DOM Element (en la interfaz de usuario GTM).

Riesgos

No puedo enfatizar lo suficiente el riesgo de usar el DOM para obtener valores de elementos del sitio web. Si planea raspar fuertemente el DOM en su implementación de rastreo, debe ser consciente de que un desarrollador puede cambiar sin saberlo algo en el contenido del sitio web que puede romper sus variables de elementos DOM dentro de GTM. Cuanto más complejos y largos sean tus selectores CSS, más posibilidades habrá de romper las actualizaciones.

Si por alguna razón, un desarrollador cambia una cierta clase de un elemento (y tú estás usando eso en tus selectores), tus variables de DOM Element comenzarán a regresar nulas, por lo tanto tu rastreo se romperá.

Así que antes de usar los Selectores CSS (y la variable DOM Element en general), necesitas sopesar tus opciones y la situación actual. Si el sitio web no se actualiza constantemente, la posibilidad de romper los cambios es menor. Pero si los devs están impulsando regularmente algunas mejoras, las pruebas A/B están funcionando todos los días, tal vez deberías considerar obtener los datos por otras vías (en lugar de raspar el DOM).

¿Cuál es la otra forma? Su mejor opción es la capa de datos. Pídele a un desarrollador que envíe información importante a la capa de datos y úsala en el manejo de tus etiquetas. Por lo que he visto, las posibilidades de romper los cambios en la capa de datos son mucho menores que los cambios de ruptura relacionados con el DOM.

Entiendo completamente la tentación de usar Selectores CSS ahora. Tanto poder e independencia de los desarrolladores, ¿verdad? Incluso me gustaría pedir prestado el meme de Jim Gordon:

Pero a la larga, la Capa de Datos siempre gana. En realidad, deberías leer la entrada completa del blog de Jim sobre este tema.

¿En qué se diferencia la variable del elemento DOM de la variable del evento automático?

Si estás familiarizado con otra variable del GTM, la variable de evento automático, te preguntarás en qué se diferencia la variable del elemento DOM de la del AEV.

La variable de auto-evento le permite obtener el texto (o un atributo) de un elemento con el que un visitante/usuario ha interactuado. Si un visitante hace clic en un enlace, puedes acceder a las propiedades de ese elemento.

La variable DOM Element te permite acceder a cualquier elemento que esté presente en una página. De esta manera puedes obtener su texto o el valor de un determinado atributo. No se requiere ninguna interacción. De hecho, aquí hay un ejemplo de una arriesgada técnica de seguimiento de formularios en la que se cuenta el envío exitoso de un formulario cuando un elemento de mensaje de éxito está presente en una página. Esto se hizo con la ayuda de la variable DOM Element.

La variable DOM Element: Palabras finales

El elemento DOM es una buena herramienta en su kit de herramientas GTM, sin embargo, no debe abusar de él. Es una forma flexible de obtener datos particulares en una página, sin embargo, si el contenido/diseño de la página es constante, sus esfuerzos de DOM Scraping tienen una alta probabilidad de fallar.

De hecho, muy recientemente en la comunidad de Google Tag Manager en Facebook, tuvimos un caso en el que uno de los miembros no entendió por qué de repente uno de sus eventos no fue rastreado adecuadamente en GTM. Resultó que algo fue cambiado en un sitio web y rompió sus selectores CSS.

Así que si estás interesado en obtener algunos datos personalizados y hacerlos accesibles en el GTM, un desarrollador y dataLayer.push deberían ser tus mejores amigos.