Cómo extraer parte de la ruta de URL con Google Tag Manager

Actualizado: 6 de mayo de 2025

Si eres un profesional del marketing digital o un analista de datos, seguramente ya conoces la importancia de rastrear y analizar el comportamiento del usuario en tu sitio web. Un aspecto crucial de este análisis es la capacidad de extraer información útil de la URL, como la categoría de un producto o el identificador de un artículo. En este artículo, exploraremos cómo hacerlo utilizando Google Tag Manager (GTM) y un poco de JavaScript.

Imaginemos que tienes una URL con la siguiente estructura: https://www.ejemplo.com/productos/nombre_categoria/id. ¿Cómo podemos extraer el nombre_categoria y transformarlo en una variable de GTM? Vamos a descubrirlo paso a paso.

Tutorial en video

Si prefieres aprender visualmente, te invito a que consultes el tutorial disponible en mi canal de YouTube. En él, te guiaré a través del proceso de extracción de partes de una URL en Google Tag Manager.

¿Por qué es importante extraer partes de una URL?

Antes de entrar en los detalles técnicos, es fundamental entender por qué querrías extraer segmentos específicos de una URL. Aquí hay algunas razones clave:

• Grupo de contenido en Google Analytics 4 (GA4): Agrupar contenido según la estructura del directorio en tu URL, como /blog/ o /productos/, te permite enviar parámetros personalizados a GA4 para un análisis más efectivo.
• Tablas de búsqueda: Los segmentos extraídos de la URL pueden servir como entradas para una variable de tabla de búsqueda en GTM, facilitando la asignación de nombres más amigables a las categorías o productos en tu sitio.
• Seguimiento de campañas: Al rastrear campañas publicitarias, es posible que necesites identificar la categoría de los productos que están siendo promocionados a través de las URL de destino.

Uso de una función JavaScript anónima

Para extraer partes de la URL, utilizaremos una variable de JavaScript personalizada en GTM. Esta variable necesita incluir un script que cumpla con los siguientes requisitos:

• Debe ser una función anónima, por ejemplo, function() { … }
• Debe devolver un valor específico.

Abramos un editor de texto o el editor de JavaScript personalizado en la interfaz de GTM y comencemos con lo siguiente:

function() {
  
}

Esto no hará nada por sí solo, pero es el primer paso en la creación de nuestra variable de JavaScript personalizada.

A continuación, creamos una variable JavaScript llamada urlPagina y le asignamos el valor de window.location.href:

function() {
  var urlPagina = window.location.href;
}

La propiedad window.location.href permite acceder a la URL actual de la página donde se encuentra el usuario. En el siguiente paso, debemos devolver solo una parte de esa URL. Esto lo lograremos mediante el método split(), que divide una cadena (en este caso, la URL) en un array de subcadenas.

Agreguemos una declaración return al script y a continuación el método split:

function() {
  var urlPagina = window.location.href;
  return urlPagina.split();
}

Ahora, necesitamos especificar cómo queremos dividir la URL. Volviendo al ejemplo que estamos utilizando, decimos que la URL tiene la forma https://www.ejemplo.com/productos/nombre_categoria/id.

Queremos acceder a nombre_categoria, que está rodeado de barras (/). Por lo tanto, utilizaremos la barra como delimitador en nuestro método split:

function() {
  var urlPagina = window.location.href;
  return urlPagina.split("/");
}

Esto devolverá un array con todos los elementos de la URL. Para visualizarlo mejor, antes de usar split(), la URL se veía así:

https://www.ejemplo.com/productos/nombre_categoria/id

Después de aplicar el método, el resultado se verá así:

• https:
• (vacío)
• www.ejemplo.com
• productos
• nombre_categoria
• id

Como puedes observar, la URL se ha convertido en una lista de elementos, comenzando por https y concluyendo con id. El segundo elemento está vacío porque no había nada entre las dos barras de https://.

Ahora que hemos separado nombre_categoria de la URL, solo necesitamos identificarlo en este array. Esto se logra especificando el índice de ese miembro del array. Para nuestro caso, el índice es 4. Si quisieras obtener el tercer nivel de la URL (que corresponde a id), tendrías que usar el índice 5.

Añadimos esto justo después del método split:

function() {
  var urlPagina = window.location.href;
  return urlPagina.split("/")[4];
}

¡Listo! Si deseas profundizar en JavaScript para GTM y aprender a escribir tu propio código, te recomiendo que explores este curso sobre JavaScript para Google Tag Manager.

Variable de JavaScript personalizada

Ahora, vamos a pegar este código en una variable de JavaScript personalizada en la interfaz de GTM. Puedes nombrarla según la convención de nombres de tu contenedor, por ejemplo, cjs – 2do subdirectorio de la URL.

Guarda la variable, activa el modo de vista previa y depuración y navega a la página donde deseas probar esta variable (asegúrate de que la URL contenga al menos dos niveles en la ruta).

El resultado esperado debería parecerse a esto (por supuesto, el valor será diferente en tu caso).

Aplicaciones en otras URL

No te limites solo a la URL de la página. Puedes aplicar este método a otras direcciones, como Click URL, Video URL, entre otros. Solo necesitas asignar otro valor a la variable urlPagina en tu JavaScript personalizado. Aquí tienes un ejemplo de cómo sería si quisieras acceder a una parte de la URL que se hizo clic:

function() {
  var clickUrl = {{Click URL}};
  return clickUrl.split("/")[4];
}

En este caso, en lugar de usar window.location.href, utilizamos la variable de Click URL de GTM (asegúrate de que esta variable incorporada esté habilitada en tu contenedor). El script tomará la Click URL, la dividirá y seleccionará el elemento correspondiente al índice 4.

Recuerda que los índices en JavaScript comienzan en 0. Por lo tanto, el cuarto elemento es realmente el quinto.

Más allá de lo básico

El método split() tiene innumerables aplicaciones. Imagina que tienes una variable de capa de datos llamada {{dlv – productId}} que retorna un identificador de producto con la estructura productId-variantId (por ejemplo, 123456-887766) y deseas utilizar solo el productId sin el variantId.

En tal caso, el código de JavaScript personalizado podría verse así:

function() {
  var productId = {{dlv - productId}};
  return productId.split("-")[0];
}

Veamos el desglose:

• Nombré la variable en el código productId.
• Asigné a esta variable el valor de la variable de capa de datos {{dlv – productId}}.
• Utilicé el guion (–) como delimitador porque quiero dividir el identificador del producto justo donde se encuentra el guion (el identificador original es 123456-887766).
• El método split() generará un array de dos elementos (123456 y 887766). Seleccioné el primero, cuyo índice es 0.

Con esta variable, obtendrás el valor de 123456 si el valor de la variable {{dlv – productId}} es 123456-887766.

Extracción de partes de la URL con Google Tag Manager

Este proceso de extracción de partes de URL puede parecer complicado al principio, pero con un poco de práctica y comprensión de JavaScript, se convierte en una herramienta poderosa para tus análisis y seguimiento. La clave está en entender cómo funcionan los índices y los métodos de cadena en JavaScript, que te permitirán manipular datos de manera efectiva y obtener información valiosa para tu negocio.

Si tienes casos específicos que deseas resolver, no dudes en dejar un comentario. Estas situaciones también me ayudan a aprender y mejorar mis habilidades en programación JavaScript.