Mide las aplicaciones de una sola página

Este documento está dirigido a 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 clientes potenciales. El formulario tiene tres pantallas:

• Primera pantalla para capturar la información del cliente.
• Segunda pantalla en la que los clientes indican interés en ciertos servicios.
• Página de tercera pantalla para registrarse en seminarios en línea relacionados con los intereses del cliente.

La clave para medir correctamente las vistas de página de los SPA es contar las vistas de página de cada pantalla con la que interactúa un usuario y obtener el referente de la página correcto para que puedas rastrear correctamente el recorrido del usuario.

Antes de comenzar

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

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

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

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

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

• Cambios en el historial del navegador (recomendado): Si tu SPA usa la API de History, específicamente el método pushState() y replaceState() para actualizar 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 de eventos personalizados

Cuando implementes los eventos page_view por tu cuenta, asegúrate de que el sitio web tenga el siguiente comportamiento cuando cambie la pantalla:

• Establece page_referrer y page_location en los valores correctos para obtener una atribución adecuada.

• Cómo enviar un nuevo evento page_view

gtag.js

1. Almacena la URL anterior y la nueva de tu aplicación de una sola página para que puedas acceder a los valores cuando envíes manualmente el evento page_view.

2. Crea una función que actualice page_referrer y page_location a las pantallas correspondientes de tu SPA.
   Opcional: Para actualizar los valores establecidos anteriormente sin volver a inicializar la etiqueta de Google, proporciona el par clave-valor 'update': true.

3. Opcional: Dimensiones personalizadas: Para actualizar las dimensiones y métricas personalizadas con la nueva vista de página virtual, inclúyelas en tu comando config. Obtén más información sobre las dimensiones y métricas personalizadas.

4. Envía un evento page_view para registrar el cambio de pantalla como una vista de página. Por ejemplo:

    // Store current URL path and query in a variable.
       const oldUrl = window.location.href.split('#')[0];
    // Change to new URL.
       history.pushState({}, undefined, newUrl);
    // Measure page change.
       function OnPageChange(oldUrl, newUrl) {
          gtag('config', 'G-XXXXXX', {
           'send_page_view': false,
           'page_referrer': oldUrl,
           'page_location': newUrl,
           'update': true,
        });
          gtag('event', 'page_view');
        }
   

5. Activa la función OnPageChange cuando necesites activar una nueva vista de página virtual.

Tag Manager

Para medir un SPA con Tag Manager, necesitas dos etiquetas de Google con el mismo ID de etiqueta en tu contenedor. La primera etiqueta de Google se carga cuando se carga el sitio web y se configuran los parámetros que necesitas para tu medición. La segunda etiqueta de Google se activa cada vez que cambia la URL de tu sitio web. Por último, debes enviar un evento de vista de página de forma manual para registrar la nueva página virtual.

1. Prepara el flujo de datos de Google Analytics para la medición de SPA

Para hacer un seguimiento manual de los eventos page_view, haz lo siguiente:

1. Abre Google Analytics.

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

3. En Medición mejorada, selecciona el ícono de configuración .

4. En Vistas de página > Mostrar configuración avanzada, borra Cambios en la página basados en eventos del historial de navegación. Registrarás manualmente los cambios del historial del navegador en Tag Manager.

5. Haz clic en Guardar.

2. Crea una etiqueta de Google para las vistas de página virtuales de SPA

1. Abre Google Tag Manager.

2. En tu lugar de trabajo, abre el menú Etiquetas.

3. Crea una etiqueta Nueva.

4. En Configuración de la etiqueta, elige la Etiqueta de Google.

5. Ingresa el mismo ID de etiqueta de Google que el ID de tu primera etiqueta de Google.

6. En Configuración, proporciona los siguientes parámetros:

   • page_referrer : {{Old History URL}}
   • page_location : {{New History URL}}

   • update: true

     Nota: El parámetro update combina parámetros nuevos o actualizados en la configuración existente de la etiqueta de Google. También suprime el envío de un nuevo evento page_view.

   • Opcional: Especifica las dimensiones y métricas personalizadas que deseas actualizar con la nueva vista de página virtual.

7. En Activación, establece lo siguiente:

   1. En Elige un activador, crea un activador nuevo (+).
   2. En Configuración del activador, elige el activador Cambio en el historial. Obtén más información sobre el activador de cambios en el historial. Asegúrate de activar esta etiqueta solo cuando aparezca una pantalla nueva.
   3. Asigna un nombre al activador y guárdalo.

8. Asigna un nombre a la etiqueta y guárdala. Tu etiqueta de Google debería verse de la siguiente manera:

3. Cómo activar un nuevo evento de vista de página

1. En tu espacio de trabajo de Tag Manager, crea una etiqueta nueva.

2. En Configuración de la etiqueta, elige la etiqueta Google Analytics: Evento de GA4.

3. Ingresa el ID de medición de la etiqueta. Este ID coincide con el ID de la etiqueta de Google que usaste en la etiqueta anterior.

4. Para enviar un evento de vista de página nuevo, agrega page_view como Nombre del evento.

5. En Activación, establece el activador de cambios de History. Debe ser el mismo activador que el de la etiqueta de Google que configuraste.

6. Asigna un nombre a la etiqueta y 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 la configuración de medición de tu SPA. Obtén más información para supervisar eventos en DebugView.

2. Navega por 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 el referente y la ubicación de la página se actualizaron correctamente.