Variable personalizada de JavaScript en Google Tag Manager

Google Tag Manager (GTM) es una herramienta poderosa que permite a los especialistas en marketing y desarrolladores gestionar etiquetas y realizar un seguimiento de las interacciones de los usuarios sin necesidad de modificar el código de su sitio web. Sin embargo, en ocasiones, las variables incorporadas no son suficientes para capturar insights específicos. En estos casos, las variables de JavaScript personalizadas son una solución eficaz que amplía la funcionalidad de GTM, permitiendo una recolección de datos más precisa y adaptada a las necesidades de cada proyecto. A continuación, exploraremos cómo configurar estas variables desde cero, a través de ejemplos prácticos y consejos útiles que te ayudarán a aprovechar al máximo esta herramienta.

Introducción a las variables de JavaScript personalizadas en Google Tag Manager

Las variables de JavaScript personalizadas en GTM son fragmentos de código que permiten interactuar con la información de la página y adaptarla a tus necesidades de análisis. A través de estas variables, puedes recoger datos que no están disponibles directamente mediante las variables predeterminadas de GTM.

Estas variables son especialmente útiles en situaciones donde necesitas rastrear información específica, como horarios de visita, secciones de URL, o datos personalizados de un data layer.

Requisitos previos para crear variables de JavaScript personalizadas

Para aprovechar al máximo las variables de JavaScript personalizadas, es recomendable tener un conocimiento básico de JavaScript, aunque no es estrictamente necesario. La comprensión de cómo funciona el DOM (Modelo de Objetos del Documento) y la sintaxis de JavaScript facilitará la adaptación de los códigos a tus necesidades específicas.

Si eres principiante, considera revisar recursos como JavaScript para Google Tag Manager, donde cubro los conceptos esenciales y algunos ejemplos prácticos.

Creando una variable de JavaScript personalizada paso a paso

Para crear una variable de JavaScript personalizada en GTM, sigue estos pasos:

1. Inicia sesión en tu cuenta de Google Tag Manager.
2. Selecciona la opción Variables en el menú de la izquierda.
3. Haz clic en Nueva bajo la sección de Variables definidas por el usuario.
4. En la configuración de la variable, elige JavaScript personalizado.
5. Introduce tu código JavaScript en el cuadro de texto proporcionado. Asegúrate de que tu función retorna un valor, ya que eso es lo que se recopilará en GTM.

Recuerda que no necesitas incluir las etiquetas de <script> en tu código, ya que GTM solo procesa el JavaScript puro.

Ejemplo 1: Capturar la hora de visita del usuario

Un uso común de las variables de JavaScript personalizadas es identificar la hora del día en que un usuario visita tu sitio. Esto puede ser útil para segmentar datos y adaptar estrategias de marketing en función del comportamiento del usuario a diferentes horas del día. A continuación, se presenta un código que retorna la parte del día correspondiente a la hora de la visita:

function getTimeOfDay() {
   var now = new Date();
   var hour = now.getHours();
   var timeOfDay;

   if (hour >= 5 && hour < 12) {
      timeOfDay = "mañana";
   } else if (hour >= 12 && hour < 17) {
      timeOfDay = "tarde";
   } else if (hour >= 17 && hour < 22) { 
      timeOfDay = "noche";
   } else {
      timeOfDay = "madrugada";
   }

   return timeOfDay;
}

Este código realiza lo siguiente:

• var hour = now.getHours(): Obtiene la hora actual del visitante.
• var timeOfDay: Asigna un valor basado en la hora, categorizando el momento del día.

Una vez que hayas creado esta variable y la hayas nombrado, puedes probar su funcionamiento en el modo de vista previa de GTM.

Ejemplo 2: Extraer la categoría de la URL

Imagina que deseas segmentar tus datos según la categoría de las páginas que los usuarios visitan. Para ello, puedes extraer la parte relevante de la URL, como en www.misitio.com/ayuda/preguntas-frecuentes. Aquí te muestro cómo hacerlo:

function() {
  var pagePath = {{Page Path}};
  return pagePath.split("/")[2]; // Extrae la segunda parte de la ruta
}

En este código:

• pagePath.split(«/»)[2]: Separa la URL por las barras y extrae el tercer segmento (índice 2).

Recuerda habilitar la variable Page Path en GTM para poder usarla.

Ejemplo 3: Obtener información del data layer

Si tienes eventos personalizados que envían información a un data layer, puedes crear una variable que extraiga datos específicos de esos eventos. Por ejemplo, si deseas obtener información sobre los productos vendidos:

function() {
  var products = {{dlv - productos}};
  var items = [];
  
  for (var i = 0; i < products.length; i++) {
    var item = {
      id: products[i].idProducto,
      nombre: products[i].nombreProducto,
      precio: products[i].precioProducto,
      cantidad: products[i].cantidad
    };
    items.push(item);
  }
  return items;
}

En este caso:

• for (var i=0; i < products.length; i++): Recorre cada producto en el array de productos.
• items.push(item): Agrega cada nuevo objeto al array de items.

Esto te permitirá analizar los productos vendidos en tus reportes de Google Analytics.

Ejemplo 4: Obtener el nombre del archivo en descargas

Si deseas rastrear descargas de archivos y necesitas el nombre del archivo en lugar de la URL completa, puedes usar el siguiente código:

function() {
  var filepath = {{Click URL}}.split("/");
  var filename = filepath.pop(); // Obtiene el último elemento del array
  return filename.indexOf(".") > -1 ? filename : 'n/a';
}

Este código permite que solo se retorne el nombre del archivo, facilitando el análisis de las descargas en tu sitio.

Ejemplo 5: Análisis del ancho de pantalla

Conocer el ancho de pantalla de los usuarios puede ser útil para adaptar el diseño de tu sitio. Para capturar esta información, utiliza el siguiente código:

function() {
  var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  return width;
}

Al implementar esta variable, tendrás información valiosa sobre cómo los usuarios interactúan con tu sitio en diferentes dispositivos.

Ejemplo 6: Prevenir etiquetas en iFrames

Si tu sitio utiliza iFrames y deseas evitar que ciertas etiquetas se disparen dentro de ellos, puedes usar este código:

function() {
  try {
    return window.top !== window.self; // Verifica si está en un iFrame
  } catch(e) {
    return false;
  }
}

Esto retornará true si se está ejecutando dentro de un iFrame, permitiéndote aplicar excepciones en tus disparadores.

Ejemplo 7: Extraer precios de la página

Para extraer precios de la página, puedes utilizar un código que analice el contenido del elemento que contiene el precio. Aquí hay un ejemplo:

function() {
  var priceText = document.querySelector('ENTRA_TU_SELECTOR');
  if (priceText) {
    var regex = /([0-9.,]+)/;
    if (regex.test(priceText.innerText)) {
      return priceText.innerText.match(regex)[0];
    }
  }
}

Asegúrate de reemplazar ENTRA_TU_SELECTOR con el selector correcto del elemento donde aparece el precio en tu página.

Ejemplo 8: Generar un número aleatorio dentro de un intervalo

Si necesitas generar un número aleatorio dentro de un rango específico, puedes usar el siguiente código:

function() {
  var min = 1; // Valor mínimo
  var max = 5; // Valor máximo
  return Math.floor(Math.random() * (max - min + 1) + min);
}

Esto te permitirá utilizar números aleatorios en tus análisis o experimentos de marketing.

Notas importantes al trabajar con variables de JavaScript personalizadas

Al trabajar con variables de JavaScript personalizadas, hay consideraciones importantes a tener en cuenta:

• Evita: No intentes enviar información a la capa de datos múltiples veces, ya que esto puede resultar en duplicados.
• Cuidado con la sintaxis: Recuerda que JavaScript es sensible a mayúsculas y minúsculas, así que asegúrate de mantener la consistencia en tus variables.
• Uso en GA4: Si deseas usar estas variables en Google Analytics 4, puedes añadirlas como parámetros de eventos y configurar dimensiones personalizadas.

Explorando el potencial de las variables de JavaScript personalizadas

Las variables de JavaScript personalizadas en Google Tag Manager ofrecen una flexibilidad extraordinaria para adaptar el seguimiento de datos a las necesidades únicas de tu sitio web. A medida que te familiarices más con esta herramienta, verás cómo las soluciones predeterminadas pueden no ser suficientes y cómo el uso de JavaScript puede enriquecer tus análisis de datos. ¡Comienza a experimentar y descubre nuevas formas de obtener información valiosa de tus usuarios!