GTM del lado del servidor para aplicaciones de página única (SPA)

El seguimiento de las aplicaciones de página única (SPA) puede resultar complejo, ya que estas páginas no se recargan al completo, lo que dificulta el seguimiento estándar. Google Tag Manager (GTM) del lado del servidor ayuda a solucionar este problema al gestionar los datos en el servidor, mejorando la precisión del seguimiento y su rendimiento.

En esta guía, le explicaremos cómo configurar GTM del lado del servidor para SPA y hablaremos de las mejores técnicas para gestionar páginas visitadas, eventos e interacciones.

Una aplicación de página única (SPA) es una aplicación web que inicialmente carga una única página HTML y actualiza su contenido de forma dinámica a medida que los usuarios interactúan, en lugar de volver a cargar nuevas páginas con cada acción o navegación.

Las SPA se han popularizado porque ofrecen ventajas clave frente a las páginas web tradicionales con múltiples páginas:

• Mejor experiencia de usuario. Las SPA eliminan la recarga completa de las páginas, ofreciendo una experiencia más rápida, fluida y similar a la de una aplicación, por lo que no se producen retrasos en la navegación.
• Mayor rendimiento. Solo se obtiene el contenido actualizado, lo que hace que las interacciones sean más rápidas y eficientes.
• Compatible con dispositivos móviles. Las SPA son más adaptables y se comportan como aplicaciones nativas, lo que las convierte en la opción ideal para los usuarios móviles que buscan rapidez y flexibilidad.
• Desarrollo más sencillo. Los desarrolladores pueden reutilizar código y crear aplicaciones más modulares y fáciles de mantener, agilizando el proceso de desarrollo.
• Mayor control de la interfaz. Las SPA permiten un mayor control sobre cómo se muestran los datos, lo que las vuelve ideales para aplicaciones web dinámicas e interactivas, como, por ejemplo, plataformas de redes sociales y paneles de control.

Algunos ejemplos de SPA son Gmail, donde el contenido se actualiza sin necesidad de recargar la página; Facebook, que permite desplazarse, publicar y comentar sin necesidad de actualizar la página; y Trello, donde las tareas se gestionan dentro de la misma página. Las SPA ofrecen una experiencia rápida y fluida para aplicaciones con mucha interacción por parte del usuario.

El seguimiento de aplicaciones de página única (SPA) con GA4 y GTM es más complejo que el de las páginas web tradicionales debido al funcionamiento específico de las SPA. Somos conscientes de esta complejidad, por lo que le guiaremos paso a paso. 

Estos son los motivos:

- A diferencia de las páginas web tradicionales, en este caso no hay recargas completas de la página, donde cada clic carga una nueva página y activa "Pageview" de GA4. Las SPA cargan contenido de manera dinámica. Esto significa que el disparador estándar de "Pageview" no funciona de la misma forma.

- Se necesitan disparadores de eventos personalizados. Dado que no hay recargas de página, es necesario crear disparadores personalizados que detecten interacciones específicas del usuario, como clics en botones o cambios en la URL, para realizar un seguimiento de las acciones significativas.

- Complejidad en el seguimiento del flujo de usuarios. Con las SPA, los usuarios pueden permanecer en la misma página mientras interactúan con distintas secciones. Para registrar estas interacciones, es necesario configurar un seguimiento de eventos más detallado que capte estas transiciones de página.

- Posibles brechas de datos. Sin un seguimiento adecuado, corre el riesgo de perder datos clave de interacción, ya que GA4 no realiza un seguimiento automático de los cambios de contenido en las SPA. Es necesario configurar GTM de forma personalizada para garantizar que no se pierda ningún dato.

La complejidad se debe principalmente al comportamiento dinámico de las SPA, lo que exige una configuración más manual para garantizar una recopilación de datos precisa. Aunque Google Analytics 4 incluye un seguimiento integrado para pageviews, no siempre funciona de manera óptima desde el principio. Además, a veces es difícil rastrear algunas páginas web de manera efectiva.

Para solucionar este problema, es necesario realizar una configuración adicional para llevar a cabo un seguimiento efectivo de estas páginas web o aplicaciones. Pero no se preocupe, nosotros le mostraremos cómo realizar el seguimiento de aplicaciones de página única con Google Analytics 4 y Google Tag Manager.

A continuación, le mostramos tres métodos habituales para realizar un seguimiento eficaz de las SPA:

1. Medición optimizada de Pageview en GA4

GA4 incluye una función integrada que registra automáticamente pageviews en las SPA. Funciona detectando cambios en la URL, pero puede requerir algunos ajustes para registrar todo correctamente, dependiendo de la configuración de la página web. Es un buen punto de partida, pero puede no ser suficiente para algunas páginas.

2. Disparador de cambio de historial de GTM

Google Tag Manager puede hacer un seguimiento de la navegación de los usuarios en una SPA mediante el disparador de cambio de historial. Este disparador detecta cambios en el historial del navegador (como cuando los usuarios navegan entre secciones), lo que le permite realizar un seguimiento de las interacciones, incluso cuando la página no se vuelve a cargar por completo.

3. Data layer push with GTM

Con este método, se envían eventos personalizados o cambios de página a data layer dentro de su SPA. GTM puede detectar estos envíos y transmitir los datos correctos a GA4. Este enfoque le brinda un mayor control y le permite realizar un seguimiento de interacciones específicas con mayor precisión.

Si puede implementar las tres opciones de seguimiento, lo mejor es optar por la última, que requiere la asistencia de desarrolladores y el uso de dataLayer.push.  Este método ofrece el mayor control y flexibilidad, siendo así la solución más fiable. Enviar eventos específicos directamente a data layer garantiza que las interacciones clave se registren con precisión, incluso en SPA más complejas. Aunque puede requerir la intervención de un desarrollador, la precisión y la solidez de este enfoque hacen que valga la pena. Si quiere repasar qué es un data layer, en nuestro blog puede encontrar una guía integral sobre el uso de data layer en Google Tag Manager.

Veamos cada una de las opciones en detalle. 

Para realizar el seguimiento de aplicaciones de página única con la medición optimizada de pageviews en Google Analytics 4, siga estos sencillos pasos:

1. Vaya a Configuración de la transmisión

Inicie sesión en su cuenta de GA4 y acceda a la configuración de su transmisión.

2. Abra la sección de Transmisión de datos en el menú de Administración

Haga clic en el icono de Administración (abajo a la izquierda), luego en la sección Propiedad, seleccione Transmisión de datos y elija la transmisión que desea rastrear.

Esto le permitirá configurar el seguimiento de pageview para su SPA.

3. Verá los detalles de transmisión web. Haga clic en Ajustes, debajo de Medición optimizada.

4. Haga clic en Mostrar configuración avanzada. 

5. Marque la opción Cambios de página basados en eventos del historial del navegador.

Los eventos de Medición optimizada, como desplazamientos, clics salientes y búsquedas en el sitio, deben rastrearse con precisión para evitar datos subestimados o sobreestimados. Para garantizar un seguimiento preciso, es mejor desactivarlos o configurarlos con GTM.

6. Cuando termine, haga clic en el botón Guardar en la esquina superior derecha.

Para comprobar que todo funciona correctamente, utilice el modo de vista previa de GTM. Inicie sesión en GTM, luego haga clic en Vista previa en la esquina superior derecha.

Se abrirá una nueva ventana donde podrá introducir la URL de su página web. Después de hacer clic en Conectar, la página se actualizará y mostrará los detalles de seguimiento de su página web.

Si selecciona el contenedor de GTM en la parte superior, debería ver el evento de cambio de historial, también conocido como gtm.historyChange-v2.

A continuación, haga clic en su ID de medición de GA4 en la parte superior para verificar si el evento de pageview se está rastreando y enviando correctamente.

Si los eventos no se están enviando a GA4, no se preocupe, podría ser una señal de que la configuración actual no está registrando todo correctamente. 

Optar por el segundo método de seguimiento podría ser una buena idea. Este método puede proporcionar una forma más fiable de registrar con precisión sus eventos de pageviews y otras interacciones. A veces, distintas configuraciones funcionan mejor para determinadas SPA, por lo que probar otros métodos puede ser de gran ayuda.

Este método también monitorea los cambios en el historial de la página web, de manera similar a la función de medición optimizada de GA4.

Al detectar estos cambios en el historial, puede utilizarlos para activar eventos pageview y enviarlos a GA4.

A continuación, le mostramos cómo realizar un seguimiento de las aplicaciones de página única utilizando el disparador de cambio de historial de Google Tag Manager:

1. Inicie sesión en Google Tag Manager.

2. Vaya a Disparadores y haga clic en Nuevo para crear un nuevo disparador.

3. Desplácese hacia abajo y seleccione Cambio de historial como tipo de disparador.

4. Configure el disparador para que se active en Todos los cambios de historial, luego haga clic en Guardar.

Ya debería estar configurado, pero hagamos una prueba para asegurarnos. Acceda al modo de vista previa de GTM tal como lo hicimos en el primer método.

Como puede observar, la etiqueta de configuración de GA4 se está activando, pero es posible que también note múltiples eventos de historial, algo que puede ocurrir con algunas SPA.

🚨 Nota: La nueva etiqueta de Google Tag ha reemplazado la etiqueta de configuración de GA4.

Si se encuentra con este problema, es fundamental revisar y ajustar sus disparadores para que se activen solo ante cambios específicos en lugar de con todos los cambios, garantizando así que los datos sigan siendo precisos y fiables.

El tercer método entra en juego cuando los dos primeros no funcionan. Para este enfoque, se necesita que un desarrollador inserte data layer en el código de la página web. Data layer almacena valores y activa pageviews dentro de Google Tag Manager.

Este es un ejemplo de cómo podría lucir el código:

<script>

 window.dataLayer = window.dataLayer || [];

 window.dataLayer.push({

   'event': 'virtualPageview',

   'pageUrl': 'https://www.example.com/path/?example#example',

   'pageTitle': 'Example title'

 });

</script>

Esto te permite registrar directamente las visitas de página y otros eventos críticos al integrarlos en el código de la página.

Los valores de pageURL y pageTitle deben ser dinámicos, ya que van a cambiar dependiendo de la página o del tipo de contenido. Lo ideal es que el desarrollador se encargue de esto, así como de los hashtags, signos de interrogación u otros parámetros de consulta en las URL.

Una vez que se haya implementado data layer, puede completar la configuración en GTM siguiendo estos tres pasos:

1. Configure dos variables de data layer

2. Cree un disparador de evento personalizado

3. Configure una etiqueta de evento page_view de GA4 para enviar los datos a GA4

Comencemos creando las variables de data layer para pageUrl y pageTitle:

1. Vaya a Variables

2. Haga clic en Nueva

3. Seleccione como tipo a la Variable de Data Layer y configure las variables correspondientes para pageURL y pageTitle.

4. Ahora que hemos almacenado los valores de la URL de la página y el título de la página en las variables de data layer, el siguiente paso es crear un disparador basado en el evento personalizado (virtualPageview) que hemos definimos anteriormente en data layer.

Así es como se configura un disparador de evento personalizado:

• Vaya a Disparadores
• Haga clic en Nueva
• Seleccione Evento personalizado como tipo de disparador
• Establezca el nombre del evento como virtualPageview

Este disparador se activará siempre que el evento virtualPageview se envíe a data layer.

5. A continuación, crearemos la etiqueta de evento GA4 para enviar los datos a GA4. Aquí le enseñaremos a configurarla:

• Vaya a Etiquetas
• Haga clic en Nueva
• Seleccione Evento GA4 como tipo de etiqueta

Configure la etiqueta de la siguiente manera:

- Nombre del evento: page_view

- Parámetros y valores del evento:

• page_location: Establezca el valor en la variable DLV-pageURL

• page_title: Establezca el valor en la variable DLV – pageTitle

- Disparador: Establezca el disparador para que virtualPageview se active siempre que se detecte un evento personalizado.

Esto enviará los datos de pageview a GA4, incluyendo la URL y el título dinámicos.

Asegúrese de probar el tercer método en el modo de vista previa de GTM y en el DebugView de GA4 para garantizar que se estén recopilando los datos correctos, especialmente para los parámetros page_location (URL) y page_title.

No hemos añadido estos parámetros a la etiqueta de configuración de GA4 porque GA4 solo los lee una vez durante la carga inicial de la página. Esto significa que en una SPA se perderían los cambios posteriores, ya que la página no se recarga por completo.

Aunque algunos de estos métodos pueden ser complejos, en general son factibles si la configuración se lleva a cabo con esmero.

No es esencial entender los desafíos que representan las SPA, pero sí que podría facilitar la gestión de problemas de seguimiento cuando surjan. Le presentamos un par de desafíos habituales:

1. Dependencia de JavaScript: Las SPA dependen en gran medida de JavaScript para funcionar. Si JavaScript está deshabilitado, no se registrarán las interacciones, ya que la aplicación no funcionará. Aunque la renderización del lado del servidor puede ofrecer una solución alternativa, también puede complicar las cosas, ya que es posible que otras funciones dinámicas no se comporten como era esperado.

2. Seguimiento de URL con parámetros o fragmentos: Las URL que contienen parámetros como hashtags o signos de interrogación no se rastrean automáticamente. Para gestionar esto, necesitará capturar la URL completa usando window.location.href en una variable de JavaScript y sobrescribir el parámetro page_location con este valor para cada etiqueta de evento de GA4, logrando así que se capture la URL completa con precisión.

3. Si aparecen varios eventos de cambio de historial en el modo de vista previa de GTM, es esencial investigar y eliminar cualquier dato duplicado. Puede hacer esto ajustando el disparador para que se active solo en determinados eventos de cambio de historial, en lugar de en todos ellos.

4. Si está utilizando el método de data layer y observa que el evento virtualPageview se activa cada vez que se carga la página web, deberá deshabilitar la opción de Enviar un evento pageview cuando se cargue esta configuración para evitar eventos de páginas visitadas innecesarios.

5. Es fundamental abordar un problema de referencia errónea, es decir, aquellos en los que Google atribuye por error el tráfico de pago como orgánico. Para más detalles, consulte el artículo de Simo Ahava sobre el tema. Lamentablemente, esta solución específica no es compatible con GA4 en la actualidad.

Recuerde que esta es una lista de desafíos incompleta, ya que pueden surgir otros retos dependiendo de la configuración de su página web. Sin embargo, estos puntos deberían darle una buena idea de lo que puede que llegar a encontrarse.

Para realizar un seguimiento efectivo de las SPA, es fundamental hacer caso a las siguientes prácticas recomendadas:

• Si cuenta con un desarrollador, pídale ayuda para configurar el método de data layer. Esto hace que el seguimiento sea más preciso, ya que datos importantes, como las URL y los títulos de las páginas, se pueden añadir directamente a data layer. Esto le aporta un mayor control sobre lo que se rastrea en su página web.
• Asegúrese siempre de probar su configuración en el modo de vista previa de Google Tag Manager y en DebugView de GA4. Esto le permite identificar problemas, como, por ejemplo, eventos duplicados o disparadores incorrectos, para que pueda corregirlos antes de que se active su configuración, garantizando una recopilación de datos precisa.
• Si las URL de su página web incluyen fragmentos como # o ?, podrá capturar la URL completa en una variable de JavaScript utilizando window.location.href. Utilice este valor para reemplazar el parámetro page_location en todas las etiquetas de eventos GA4, asegurando que se realice un seguimiento adecuado de la URL completa.
• No agregue los parámetros page_location y page_title directamente a la etiqueta de configuración de GA4. En su lugar, cree una etiqueta de evento GA4 aparte y específica para page_view y sobrescriba estos parámetros de forma manual. Este enfoque garantiza que los cambios en la URL y en el título de la página puedan ser rastreados con precisión en las aplicaciones de página única (SPA).
• Seleccione la opción Enviar un evento page_view cuando se cargue la configuración en la etiqueta de Configuración de GA4 para ver si es necesario. Habilitar esta opción podría generar datos duplicados o incorrectos de páginas visitadas si su SPA carga contenido nuevo sin actualizar toda la página.

Con estas recomendaciones, podrá evitar problemas habituales y recopilar datos precisos y fiables al rastrear las SPA con GA4 y GTM.

Rastrear aplicaciones de página única (SPA) puede ser complicado, pero Google Tag Manager (GTM) del lado del servidor facilita mucho la obtención de datos precisos. Ya sea que utilice las herramientas de GA4, el disparador de historial de GTM o el método de data layer, estas opciones le permiten rastrear su contenido dinámico correctamente.

En Stape.io, somos expertos en el seguimiento del lado del servidor y ofrecemos herramientas como la integración de data layer y el modo de vista previa para garantizar que su configuración funcione sin problemas.

¿Quiere mejorar su seguimiento? ¡Regístrese en Stape de forma gratuita hoy y déjenos ayudarle a obtener resultados más precisos para sus SPA! Después de registrarse, puede utilizar nuestras minuciosas guías tanto en texto como en vídeo sobre cómo configurar el seguimiento del lado del servidor con Stape.