Trucos de analítica: ¿Como trackear fragmentos de URL en las webs SPA (Single-Page Application)?

Cada vez son más las páginas web en las que se muestra el contenido de manera dinámica sin necesidad de recargar la página. Denominadas Single-Page Application (SPA), en este tipo de páginas se utilizan los fragmentos de URL, que no son más que un conjunto de caracteres que se muestran después del símbolo de almohadilla en la URL, y tienen la función de enlaces de anclaje para permanecer en una misma página web.

Este particular comportamiento no se detecta de manera automática en Google Analytics, ya que esos fragmentos no se rastrean y las URLs que nos llegan a GA pierden esa información que nos dan los fragmentos de URL, perdiendo así la trazabilidad del usuario en la navegación de la propia página.

Es importante recordar que cuando cambia el fragmento de la URL no se produce una recarga de la página, pero sí que se envía un evento del historial del navegador, y eso es lo que debemos utilizar nosotros en nuestra configuración de Google Tag Manager para poder disparar la analítica de página correctamente. Esto nos será posible gracias a que GTM dispone de un trigger de cambio de historial que se activa cuando se envía un evento por cambio de fragmento en la URL.

Vamos a seguir los siguientes pasos para realizar el tracking de páginas con cambios de fragmentos de URL:

 

1.Habilitar variables: primero de todo, debemos asegurarnos de tener las siguientes variables disponibles para nuestra configuración:

Como trackear fragmentos de URL en las webs SPA

La variable New History Fragment se encarga de guardar el valor del fragmento de URL cuando éste cambia. Con la segunda variable nos será posible especificar que no vamos a disparar un tag en todos los eventos de historial, sólo en el que se produce un cambio en el fragmento.

Lo siguiente que haremos será crear una variable Javascript personalizada con la que crearemos una URI correctamente que enviaremos a Google Analytics como ruta de página del fragmento de la URL. Creamos pues la variable , que utilizará el siguiente código:

function() {

   return. === ‘gtm.historyChange’ && ? + ‘#’ + : undefined;s

}

Lo que hace esta función es primero comprobar si el evento invocado por la variable ha sido un cambio en el historial. Si es así, y el fragmento de la URL no está vacío, lo siguiente que hace es devolver el valor actual de la ruta de navegación y concatena el nuevo fragmento de la URL al texto, separando los valores con #. En el caso de que el evento no fuera un cambio de historial, la variable devuelve un undefined para asegurar que enviamos correctamente la ruta de navegación con el hit de página.

 

2.Trigger: creamos un nuevo activador con la siguiente configuración:

Utilizamos esta configuración para evitar que este trigger se active en otras instancias donde se pueda activar el trigger de cambio de historial.

 

3.Tag: Por último, añadimos el trigger que hemos creado a nuestro tag de página vista que ya teníamos disparándose en todas las páginas, pero ahora haremos que se dispare cuando no se produce una recarga de la página. Necesitaremos también ir a la sección más ajustes de nuestro tag para añadir un campo que sea page cogiendo su valor de la variable fragment path, de esta manera se podrá pintar el valor de la ruta de navegación cuando se active nuestro trigger al no haber una carga de página.

Y con esto doy por finalizado el artículo de hoy. Espero que os haya sido de utilidad y os animéis a probarlo

ANTERIOR
SIGUIENTE

TIPS DE EXPERTOS

Suscríbete para impulsar tu negocio.

ÚLTIMOS ARTÍCULOS

Sin base sólida, no hay IA que funcione: el reto de la Data Foundation

En un contexto empresarial donde la IA se ha convertido en el nuevo estándar de eficiencia y escalabilidad, muchas organizaciones se enfrentan a una paradoja: disponen de tecnología avanzada, pero no logran resultados consistentes. La razón no suele estar en el algoritmo, sino en los cimientos. La Data Foundation es la verdadera protagonista del éxito o fracaso de cualquier estrategia de IA, automatización o CRM.

La automatización inteligente llega al CRM: Salesforce lanza Agentforce

Salesforce ha vuelto a marcar el ritmo de la innovación con el anuncio de Agentforce y Marketing Cloud Next, dos soluciones que redefinen la automatización en el ecosistema CRM. Estas novedades no solo incorporan inteligencia artificial, sino que sitúan a la IA generativa en el centro de las operaciones comerciales, permitiendo que agentes virtuales actúen con autonomía en procesos de ventas, marketing y atención al cliente.

En este artículo analizamos las claves de esta evolución y su impacto en la productividad comercial, desde una perspectiva de CRM y analítica avanzada.

Cómo Amazon usa IA en Prime Day 2025 para personalizar la experiencia de compra

Amazon prepara su Prime Day 2025, que se celebrará del 8 al 11 de julio, con un enfoque claro en mejorar la experiencia de compra mediante herramientas impulsadas por inteligencia artificial. Durante las 96 horas de ofertas exclusivas para miembros Prime, la IA facilitará que los usuarios encuentren exactamente lo que buscan a precios atractivos, optimizando tiempo y relevancia.

AdTegral e Improvado se alían para aplicar IA al análisis de marketing

En un entorno donde la rapidez y la precisión marcan la diferencia, la reciente colaboración entre AdTegral e Improvado demuestra que la integración efectiva de datos y AI es un paso estratégico imprescindible. Su alianza permite reducir en un 70 % la latencia en reporting programático, conectando directamente campañas con inteligencia accionable y sin depender de tecnología compleja.

data
Mallorca 184, 08036
Barcelona, Spain