Mide las aplicaciones de una sola página

Este documento está dirigido a los desarrolladores que desean medir las vistas de página en su aplicación de una sola página con Google Analytics.

Las aplicaciones de una sola página (SPA) son sitios web que cargan un documento HTML una vez y recuperan cualquier contenido adicional con las APIs de JavaScript.

Ejemplo: Supongamos que tienes un formulario para adquirir algunos clientes potenciales. El formulario tiene tres pantallas: > * La primera pantalla para capturar la información del cliente. * Segunda pantalla, en la que los clientes indican su interés en determinados servicios * Tercera pantalla: Página para registrarse en seminarios en línea relacionados con los intereses del cliente.

La clave para medir correctamente las vistas de página de las SPA es contar las vistas de página de cada pantalla con la que interactúa un usuario y obtener la URL de referencia correcta de la página para que puedas hacer un seguimiento adecuado del recorrido del usuario.

Antes de comenzar

En esta página, se supone que ya tienes lo siguiente:

• Una cuenta y una propiedad de Google Analytics para tu sitio web Obtén más información para configurar Google Analytics.

• Una etiqueta de Google implementada en tu sitio web que se activa cuando se carga la página inicialmente Obtén más información para configurar la etiqueta de Google.

Implementa la medición de aplicaciones de una sola página

Para implementar una medición precisa de las SPA, usa uno de estos métodos para activar una nueva vista de página virtual:

• Cambios en el historial del navegador (recomendado): Si tu SPA usa la API de History, específicamente los métodos pushState() y replaceState() para actualizar las pantallas, usa esta opción.

• Eventos personalizados: Si tu sitio web usa el objeto DocumentFragment para renderizar diferentes pantallas, usa esta opción.

Implementación del historial del navegador Implementación de eventos personalizados

Implementación del cambio en el historial del navegador

Si tu SPA usa la API de History, puedes habilitar la medición optimizada en Google Analytics para hacer un seguimiento automático de las vistas de página en función de los eventos del historial de navegación.

Punto clave: Si configuras tus etiquetas con Google Tag Manager, no habilites el seguimiento automático del historial en Google Analytics, ya que esto puede generar un registro duplicado de las vistas de página. En su lugar, consulta el instructivo Mide aplicaciones de una sola página con Google Tag Manager.

Habilita la medición optimizada en Google Analytics

Para medir page_views automáticamente según el historial de navegación:

1. Abre Google Analytics.

2. En Administrador, en Recopilación y modificación de datos, haz clic en Flujos de datos > Web.

3. En Medición mejorada, mueva el interruptor a Activada para habilitar todas las opciones.

4. Haz clic para editar las opciones individuales. En Vistas de página, haz clic en Mostrar configuración avanzada. Asegúrate de habilitar las opciones Cargas de página y Cambios de página basados en eventos del historial de navegación.

   

5. Guarda los cambios.

Verifica tu configuración de medición

Para verificar que tu aplicación de una sola página mida las vistas de página correctamente, sigue estos pasos:

1. Habilita el modo de depuración para cada etiqueta en tu configuración de medición de SPA. Obtén más información para supervisar eventos en DebugView.

2. Haz clic en tu aplicación de una sola página. Cuando hagas clic en una nueva pantalla virtual, deberías ver un nuevo evento page_view en DebugView. Compara los parámetros del evento page_view con el evento page_view anterior para verificar si la referencia y la ubicación de la página se actualizaron correctamente.

Consideraciones adicionales para las SPA

Además de enviar eventos page_view, considera estos aspectos adicionales para lograr una integración sólida de la SPA con Google Analytics y una mejor experiencia del usuario:

Administra la posición de desplazamiento

Cuando los usuarios navegan entre vistas en una SPA, el navegador suele conservar la posición de desplazamiento actual. Esto puede significar que los usuarios no vean la parte superior de la nueva página virtual y puede afectar el seguimiento de la profundidad de desplazamiento.

Recomendación: Restablece de manera programática la posición de desplazamiento a la parte superior de la página o al contenedor de contenido principal después de cada transición de página virtual.

// Example: Reset window scroll position on a route change in your SPA
window.scrollTo(0, 0);

// Or, if your content is within a specific element:
// document.getElementById('main-content').scrollTo(0, 0);

Con este cambio, los usuarios comenzarán en la parte superior del contenido nuevo, lo que permite que el seguimiento de desplazamiento de Google Analytics mida la participación en la nueva página virtual con precisión.

Garantiza la accesibilidad del contenido para las funciones del navegador

Si los usuarios informan problemas con las funciones del navegador, como la búsqueda en la página (Ctrl + F), que no funcionan después de una carga de página virtual, es posible que se deba a la forma en que tu SPA actualiza el DOM.

Recomendación: Asegúrate de que el framework de SPA y la lógica de enrutamiento actualicen de forma completa y síncrona las partes relevantes del DOM con el contenido de la página nueva. Es posible que la función de búsqueda del navegador no pueda indexar de inmediato la renderización retrasada o el contenido oculto del árbol del DOM principal. Prueba la búsqueda en la página después de las navegaciones virtuales para confirmar la accesibilidad del contenido.

Impacto en los eventos automáticos

Si implementas correctamente la medición de vistas de página virtuales en tu SPA, Google Analytics controlará otros eventos automáticos de forma adecuada. Si no se registran las vistas de página virtuales para los cambios de pantalla, Google Analytics trata la SPA como una sola página, lo que genera métricas sesgadas.

Por ejemplo, el evento user_engagement mide el tiempo que un usuario pasa de forma activa en una página. Sin las vistas de página virtuales, todo el tiempo de participación se atribuye a la carga de página inicial, lo que hace imposible analizar el tiempo dedicado a pantallas individuales.

Cuando la medición de vistas de página virtuales se implementa correctamente, ocurre lo siguiente:

• El evento user_engagement se envía cuando el usuario navega de una página virtual a otra.
• El tiempo de participación de la página virtual anterior se calcula y se envía junto con el evento user_engagement, por lo general, justo antes de que se procese el evento page_view de la página virtual nueva.
• Otros eventos, como los clics o los desplazamientos, se asocian con el parámetro page_location de la página virtual que el usuario está viendo en ese momento.

Esto te permite analizar la participación de los usuarios y otras métricas de pantallas o secciones individuales dentro de tu SPA, lo que proporciona una comprensión más precisa del recorrido del usuario.