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.
 javascript gtm

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 javascript personalizadas

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

  1. Accede al contenedor de GTM.
  2. Crea una nueva variable.
  3. Ve a “Variables” en el menú de GTM.
  4. Haz clic en “Nueva” y selecciona el tipo “JavaScript personalizado”.
  5. Escribe tu código.
  6. 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.