Si te consideras un usuario de Google Tag Manager (GTM) con un nivel intermedio o avanzado, es probable que estés buscando nuevas formas de potenciar tus habilidades en GTM para enfrentar desafíos más complejos. La programación, el modelo de objeto de documento (DOM) y otros conceptos técnicos se vuelven cruciales en este camino. Aunque estos temas son intrincados y no se pueden abordar en un solo artículo, aquí te ofrezco consejos prácticos que puedes aplicar de inmediato sin perderte en extensas documentaciones o cursos.
En este artículo, compartiré cinco consejos avanzados de Google Tag Manager que utilizo con frecuencia en mis configuraciones. Espero que también te sean útiles en tu trabajo diario.
Recursos adicionales en video
Si prefieres el contenido audiovisual, aquí tienes un tutorial de mi canal de YouTube, donde podrás seguir las explicaciones de manera más visual y dinámica.
Imagina que necesitas rastrear clics en ciertos elementos de una página, como los elementos de un menú, que no tienen identificadores únicos. Tienes dos opciones: colaborar con un desarrollador para que los implementen o utilizar selectores CSS para hacerlo de manera más avanzada. Aquí es donde entra en juego document.querySelectorAll().
Este método te permite ver una lista de todos los elementos de la página que coinciden con tu selector CSS. Si obtienes demasiados elementos, deberás hacer tu selector más específico. Para probarlo, abre la consola de JavaScript en las herramientas de desarrollador de tu navegador y ejecuta:
document.querySelectorAll("tu_selector_css")
Sustituye tu_selector_css por el selector que deseas probar. Por ejemplo, si utilizamos el selector “.site-nav__link”, la consola mostrará todos los elementos que utilizan esta clase. Si el método devuelve más elementos de los esperados, tendrás que ajustar tu selector para que sea más preciso.
#2. Aplicación de JSON.parse()
En ocasiones, los datos de conversión que tienes en la capa de datos están almacenados como una cadena de texto en lugar de un objeto. Si deseas acceder a una clave específica, como form_id, podrías caer en el uso de métodos de cadena complejos, lo cual sería innecesario. Aquí es donde JSON.parse() se convierte en tu mejor aliado.
Este método transforma una cadena que representa un objeto en un objeto real, lo que facilita el acceso a las claves que necesitas. Por ejemplo, si estás rastreando envíos de formularios y tienes los datos en la capa de datos, primero deberás crear una variable de capa de datos que devuelva la cadena. Supongamos que la llamas dlv – formData.
A continuación, crea una variable de JavaScript personalizada que pase esta variable a JSON.parse(). El código se vería así:
Es crucial que el nombre de la variable en el código coincida exactamente con el nombre que utilizaste en la interfaz de GTM. Cuando habilites el modo de vista previa y envíes el formulario, verás cómo la variable de la capa de datos devuelve el objeto como cadena y la variable de JavaScript personalizada lo convierte en un objeto real.
#3. Uso de split() y decodeURIComponent()
Supongamos que deseas extraer una parte específica de una URL, como esta: https://www.analyticsmania.com/google-tag-manager-recipes/this-is-a-very-cool-%26-important-page/?gtm_debug=x. Quieres obtener “this-is-a-very-cool-%26-important-page”, pero hay dos retos:
Necesitas obtener solo esa parte de la URL.
El fragmento contiene un carácter codificado (%26) que necesitas entender y manejar.
Una forma de extraer la parte de texto deseada es mediante el método split(), que divide una cadena en un array basado en un delimitador. En la consola de JavaScript, puedes ejecutar:
window.location.href.split('/')
Esto dividirá la URL en múltiples partes cada vez que encuentre una barra (/). El resultado será un array con varios elementos, incluyendo el que buscas. Si deseas acceder al quinto elemento, recuerda que el índice comienza en 0, por lo que debes usar [4] para acceder a él:
window.location.href.split('/')[4]
Para manejar el carácter %26, que representa un ampersand (&), utilizarás decodeURIComponent(). Así, tu código final se verá así:
Esto devolverá “this-is-a-very-cool-&-important-page”. Si deseas usar esto en GTM, crea una variable de JavaScript personalizada con el siguiente código:
Imagina que estás rastreando conversiones y observas que el precio se muestra en la página de confirmación de pedido. ¿Cómo puedes utilizar esa información en tus etiquetas? Una forma es “raspar” el contenido de la página utilizando una variable de JavaScript personalizada. Aunque esta no es la opción más recomendada, ya que trabajar con la capa de datos es más robusto, a veces no hay otra alternativa.
La forma en que raspares el precio dependerá de cómo se presente en la página. Podría ser algo como 12,000.00 USD o $12.00. La clave está en entender cómo se muestra el precio para adaptar el código de extracción. Existen guías específicas que explican cómo hacerlo, así que asegúrate de consultarlas para obtener detalles completos.
#5. Retorno de X o Y según disponibilidad
El último consejo se centra en cómo gestionar múltiples variables en GTM. Imagina que tras un pago exitoso, el usuario es redirigido a la página de confirmación, cuya URL es algo como https://www.mysite.com/thanks/?order_id=123abc. Quieres enviar ese ID a Google Ads. Podrías pensar en crear una variable de URL y utilizarla en una etiqueta, lo cual es correcto.
Sin embargo, lo que sucede si en algunas páginas de confirmación, el ID está en la URL y en otras en la capa de datos? Te quedarás con dos variables: una de URL y otra de capa de datos. Para resolver esto, puedes usar una variable de JavaScript personalizada que permita que GTM elija la mejor opción disponible:
El operador || significa «o». Así indicas que si la primera variable no está definida, se intentará utilizar la segunda. Si ninguna de las dos está disponible, la variable devolverá undefined.
Consejos avanzados de Google Tag Manager: Reflexiones finales
Espero que algunos de estos consejos rápidos te hayan enseñado algo nuevo. Entre todos, document.querySelectorAll() es una de las técnicas más utilizadas en mis configuraciones, ya que me permite asegurarme de que mis condiciones no devuelvan elementos no deseados.
Si algunos de estos conceptos te resultan confusos, te invito a ver el tutorial en video que he mencionado anteriormente. La visualización puede ayudarte a clarificar y entender mejor cómo implementar cada uno de estos consejos en tus proyectos.
Para ofrecer las mejores experiencias, utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. El consentimiento de estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.
Funcional
Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.
Preferencias
El almacenamiento o acceso técnico es necesario para la finalidad legítima de almacenar preferencias no solicitadas por el abonado o usuario.
Estadísticas
El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos.El almacenamiento o acceso técnico que se utiliza exclusivamente con fines estadísticos anónimos. Sin un requerimiento, el cumplimiento voluntario por parte de tu Proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarte.
Marketing
El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en una web o en varias web con fines de marketing similares.
