Las variables JavaScript GTM (Google Tag Manager) son un componente esencial para aprovechar al máximo esta herramienta. Permiten extraer, procesar y enviar datos dinámicos de un sitio web a herramientas de análisis o publicidad, como Google Analytics o Facebook Ads. En este artículo, exploraremos qué son estas variables, cómo funcionan y cómo configurarlas para tus necesidades.
¿Qué son las variables en Google Tag Manager?
En el contexto de GTM, una variable es un contenedor que almacena un valor específico o dinámico que puede ser utilizado por etiquetas y activadores. Por ejemplo, una variable puede contener información cómo el nombre de una página, el precio de un producto, o incluso el valor de un parámetro personalizado en el sitio.
Existen varios tipos de variables, y una de las más potentes son las variables personalizadas de JavaScript, que permiten realizar cálculos complejos o extraer valores únicos.
Tipos de variables en GTM
Variables predefinidas
Estas están integradas en GTM y cubren funcionalidades comunes. Ejemplos:
- URL: Extrae partes de la URL actual, como el dominio, la ruta o los parámetros.
- Referente: Identifica de dónde proviene el usuario.
- Evento: Captura el nombre del evento que activó una etiqueta.
Variables personalizadas
En las variables personalizadas vamos a encontrar múltiples opciones para configurar nuestras variables. Variables de capa de datos (aquellas que ya tenemos incluidas en nuestra capa de datos), variables de visibilidad de un elemento DOM, y variables Javascript PERSONALIZADAS (que son en las que nos vamos a centrar). Hay bastantes más, pero estas son las que más usamos.
Variables personalizadas Javascript
Permiten escribir fragmentos de código en JavaScript para definir valores únicos.
Estas variables son útiles para:
- Capturar datos avanzados del DOM.
- Ejecutar cálculos personalizados.
- Adaptar la lógica de negocio a las etiquetas y activadores.
Cómo configurar variables personalizadas de JavaScript GTM
- Accede al contenedor de GTM.
- Crea una nueva variable.
- Ve a “Variables” en el menú de GTM.
- Haz clic en “Nueva” y selecciona el tipo “JavaScript personalizado”.
- Escribe tu código.
- Ingresa el código JavaScript que definirá el valor de la variable. Por ejemplo, para capturar el texto de un elemento HTML específico:
function() {
return document.querySelector(‘#elementoID’).textContent;
}
Asegúrate de probar la variable en el entorno de vista previa para verificar que devuelve el valor esperado.
Casos de uso comunes para variables JavaScript
Seguimiento avanzado de eventos
Extrae detalles específicos, como el nombre de un producto o su categoría, para enviarlos a herramientas como Google Analytics.
function() {
return dataLayer[0].producto.nombre; // Extrae el nombre del producto desde el dataLayer
}
Adaptación de etiquetas según la página
Modifica el comportamiento de etiquetas según el tipo de página.
function() {
if (window.location.pathname.includes(‘gracias’)) {
return ‘conversion’;
}
return ‘visita’;
}
Recalcular value con variables ya creadas
Si tenemos las variables creadas en nuestro datalayer pero no tenemos el valor que queremos podemos sumar y restar entre los valores de las variables ya creadas para obtener el valor que nos interese.
Por ejemplo, tenemos un order value total (con impuestos y el envío incluido), y por otro lado tenemos una variable que contiene el precio del envío y otra que contiene el order total sin impuestos. Pues con Javascript podemos hacer que del order total sin impuestos nos reste el shipping value. De forma que obtengamos en las herramientas que usemos para análisis de datos o publicidad online un valor que se acerque más al valor que recibimos a nivel negocio.
function() {
// Obtén los valores de las variables existentes en GTM
var sinImpuestos = {{VariableSinImpuestos}}; // Reemplaza con el nombre de tu variable sin impuestos
var envio = {{VariableEnvio}}; // Reemplaza con el nombre de tu variable del envío
// Realiza la operación y devuelve el resultado
return sinImpuestos – envio;
}
Adaptar el lenguaje de otra variable
Cuando configuramos la etiqueta de TikTok para algún ecommerce veremos que la plantilla de TikTok tiene un lenguaje propio que no suele coincidir con el de GA4.
Mediante estas variables de Javascript podemos hacer match de información diciendo que x valor se corresponde con este y así con varios.
Mejores prácticas para variables JavaScript GTM
Mantén el código limpio y documentado. Siempre comenta tus scripts para que otros usuarios puedan entenderlos fácilmente.
Prueba antes de publicar. Utiliza la función de vista previa de GTM para evitar errores en producción.
Evita sobrecargar el navegador. Aunque las variables son poderosas, no abuses de ellas para evitar afectar el rendimiento del sitio.
Conclusión
Las variables personalizadas de JavaScript GTM son una herramienta imprescindible para maximizar el potencial en la herramienta de Google Tag Manager. Permiten crear configuraciones avanzadas adaptadas a necesidades específicas, lo que mejora el seguimiento, la recopilación de datos y la precisión de las estrategias digitales.
Aprender a utilizar estas variables no solo optimiza el rendimiento de tus campañas, sino que también fortalece tu capacidad para tomar decisiones basadas en datos.