Scraping DOM con Google Tag Manager

Si alguna vez has configurado un evento en tu sitio web, es probable que te hayas preguntado: “¿Cómo puedo incluir información adicional con este evento?” La técnica de DOM scraping podría ser justo lo que necesitas para capturar esos datos valiosos sin requerir la ayuda de un desarrollador. Este método permite extraer información directamente del código de la página, lo cual puede ser especialmente útil en situaciones críticas.

En este artículo, exploraremos a fondo cómo utilizar DOM scraping con Google Tag Manager. Desde los conceptos básicos hasta ejemplos prácticos, esta guía está diseñada tanto para aquellos que son nuevos en el tema como para quienes tienen experiencia y desean optimizar su seguimiento de eventos.

¿Qué es el DOM?

El DOM, o Document Object Model, representa la estructura de un documento web en forma de árbol de nodos. Cada elemento en la página HTML, desde imágenes hasta formularios, se convierte en un objeto que puede ser manipulado mediante JavaScript. Cuando accedes a una página web, tu navegador realiza una solicitud al servidor y recibe el HTML junto con otros recursos como CSS y JavaScript.

Para visualizar el DOM, puedes hacer clic derecho en la página y seleccionar «Inspeccionar». Esto abre una herramienta que te permite navegar por la estructura del DOM y ver cómo se organizan los elementos. La capacidad de interactuar con esta estructura es fundamental para entender cómo funciona el DOM y cómo puedes extraer información de él.

En resumen, el DOM actúa como un puente entre el contenido de la página y los scripts que pueden modificarlo. Gracias a esta interacción, puedes realizar tareas como DOM scraping, que implica extraer datos útiles de los elementos del DOM.

¿Cuáles son los riesgos del DOM scraping?

Aunque DOM scraping ofrece grandes ventajas, también conlleva ciertos riesgos que debes considerar. El principal riesgo es la dependencia de la estructura de la página. Si un desarrollador modifica la manera en que se presentan los elementos, tus scripts pueden dejar de funcionar o, peor aún, recoger información incorrecta.

• La modificación de un ID o clase en la página puede resultar en un valor no encontrado.
• Cambios en la estructura del DOM pueden hacer que tu seguimiento se vuelva ineficaz.
• Si dependes demasiado del DOM scraping, podrías perder información crítica que no se capture correctamente.

La mejor práctica es trabajar con un desarrollador para que construya un data layer, donde se pueden almacenar los datos de forma más estable y confiable. Sin embargo, cuando esto no es viable, DOM scraping puede ser una solución útil y rápida.

Ejemplos prácticos de DOM scraping

A continuación, presentaremos algunos ejemplos prácticos de cómo implementar DOM scraping en Google Tag Manager. Estos ejemplos están diseñados para inspirarte a personalizar el seguimiento según las necesidades de tu negocio.

Ejemplo 1: Recoger detalles de confirmación de pedido

Imagina que deseas capturar información adicional en la página de confirmación de un pedido, como el ID de transacción y el valor total. Este proceso se puede llevar a cabo en unos pocos pasos sencillos.

Crear una variable de elemento DOM

Dentro de Google Tag Manager, inicia el modo de vista previa y selecciona el elemento que deseas rastrear, como el ID de transacción. Haz clic derecho y elige «Inspeccionar» para encontrar el ID correspondiente en el código HTML. Después, en GTM, ve a Variables y selecciona “Nueva”.

Para la configuración de la variable, elige “Elemento DOM”. Debes decidir si usar el “ID” o un “selector CSS” dependiendo de la configuración de tu sitio. En este caso, seleccionaremos “ID”. Ingresa el nombre exacto del ID en el campo correspondiente.

Si dejas vacío el campo de “Nombre de atributo”, se recogerá el valor del elemento que ingresaste. Nombra la variable como “dom – transaction-id” y verifica en modo vista previa que el valor se recolecte correctamente.

Agregar la variable DOM a un evento

Asegúrate de que la etiqueta que contiene la variable se dispare ON o DESPUÉS del evento DOM Ready. Esto garantiza que el DOM esté completamente cargado. Si experimentas problemas, considera activar la etiqueta en un evento de Window Loaded.

Para utilizar esta nueva variable, crea un evento de compra. Ve a Tags y selecciona “Nuevo”. Configura el tag para que sea un evento de Google Analytics y asigna el ID de medición y el nombre del evento, que en este caso será “purchase”.

Asegúrate de incluir también el valor y la moneda como variables, que necesitarás capturar. Luego, crea un nuevo disparador que se active en “DOM ready” y establece las condiciones necesarias para que se active en la página de confirmación.

Ejemplo 2: Capturar información adicional con un clic

<pConsideremos que vendes paquetes de viaje en tu sitio. Si hay un botón que dice “Ver esta oferta”, querrás registrar el nombre del paquete correspondiente cuando un usuario haga clic en él. Este nombre se encuentra en el elemento padre del botón.

Crear un evento de «Todos los clics»

Inicia creando un disparador que capture todos los clics. Ve a Triggers y selecciona “Nuevo”. Configura el disparador para “Todos los elementos” y nómbralo “Todos los clics”. Luego, asegúrate de activar la variable “Click Element”.

Usa el modo de vista previa para hacer clic en el botón y verifica el evento “Click” en GTM. Recuerda que el click element es un objeto que contiene información del botón. Necesitarás usar JavaScript para acceder al elemento padre que contiene el identificador del paquete de viaje.

Usar JavaScript para recoger el valor del padre

Crea una nueva variable de “JavaScript personalizado”. Inserta el siguiente código:

function(){ 
  var clickedElement = {{Click Element}}
  return clickedElement.closest(".travel-package").id
}

Este código te permitirá acceder al ID del elemento “travel-package” más cercano al botón clicado. Nombra la variable “cjs – travel package id” y verifica su funcionamiento en modo vista previa.

Más allá del DOM scraping

Este artículo ha presentado una introducción al DOM scraping, pero hay mucho más por descubrir. La programación y el análisis de datos son campos vastos y en constante evolución. Para aquellos interesados en profundizar más, se recomienda explorar cursos avanzados sobre JavaScript y Google Tag Manager que puedan ofrecer una comprensión más sólida y habilidades prácticas.

Utilizando Google Tag Manager para mejorar el seguimiento

Implementar DOM scraping es solo una de las muchas capacidades que ofrece Google Tag Manager. Este sistema permite gestionar etiquetas de seguimiento de manera eficiente, facilitando la recopilación de datos importantes sin necesidad de intervención técnica constante. Algunas de las ventajas de utilizar GTM son:

• Flexibilidad: Permite agregar, editar y eliminar etiquetas sin necesidad de modificar el código del sitio.
• Control de versiones: Puedes revertir cambios fácilmente si algo sale mal.
• Colaboración: Varias personas pueden trabajar en el mismo contenedor, facilitando el trabajo en equipo.

Con la implementación adecuada, Google Tag Manager puede ser una herramienta poderosa para optimizar tus esfuerzos de marketing y análisis de datos, permitiendo un mejor entendimiento del comportamiento del usuario en tu sitio web.