La medición y seguimiento de las páginas vistas en las webs comunes no suele presentar ningún problema. Solo es necesario implementar el código de medición de Google Analytics y, cada vez que el usuario hace click en un enlace interno, se envía un evento de página vista a la herramienta.
No obstante, muchos frameworks modernos, como Angular o React, facilitan la implementación de Single Page Application o SPA. Este tipo de webs presentan algunos problemas a la hora de hacer el seguimiento de las páginas vistas y no siempre funciona correctamente.
En las webs SPA, la herramienta solo captura el primer evento de página vista e ignora el resto, salvo que el usuario recargue la página por completo. Por eso, es necesario realizar algunos cambios en la configuración de la herramienta de analítica para que mida correctamente este tipo de webs.
Contenidos
¿Qué es una Single Page Application (SPA)?
Una Single Page Application (SPA) es un sitio web que carga todos los recursos necesarios para navegar por el sitio en la carga inicial. A medida que el usuario interactúa con la web, el contenido se va cargando de forma dinámica en esa misma página.
El principal problema para la medición de este tipo de webs se produce en la forma en que carga el contenido. Las webs tradicionales cargan una nueva página (y el código de Analytics) cada vez que el usuario hace click en un enlace. En cambio, en una SPA la página no cambia y, por tanto, el código de seguimiento solo se lanza en la primera carga.
¿Cómo medir una web SPA con Google Tag Manager y GA4?
La mayoría de herramientas de analítica, incluyendo Google Analytics, funcionan de forma que el código de seguimiento es capaz de detectar cuando el navegador carga una página nueva, pero tienen problemas para trabajar con las SPA y su carga dinámica de contenido.
En Google Analytics 4, los eventos de medición mejorada ofrecen la posibilidad de hacer un seguimiento de este tipo de páginas web. Sin embargo, no funcionan en todos los casos, por lo que podría ser necesario realizar configuraciones adicionales.
Medición de páginas vistas con los eventos de medición mejorada de Google Analytics 4
Los eventos de medición mejorada de GA4 miden de forma automática algunas de las interacciones que los usuarios realizan en tu página web. Entre estos eventos encontramos las vistas de página.
Una de las opciones que aparecen en el apartado de medición de vistas de página permite que la herramienta trate de detectar cambios de página basados en eventos del historial de navegación.
Para comprobar si los tienes activados, tienes que acceder al apartado de administración de la propiedad y entrar en los ajustes del flujo de datos de la web. A continuación, tendrás que hacer click en el engranaje que aparece junto a la medición mejorada. En el apartado de Vistas de página tendrás que comprobar que la opción ‘La página cambia en función de los eventos del historial de navegación’ está activada.
Tras activarlo, tendrás que acceder al modo vista previa de Google Tag Manager y comprobar si en la parte izquierda comienzan a aparecer eventos de Cambio de historial (gtm.historyChange-v2) al navegar por diferentes páginas de la web.
Si aparecen estos eventos, tendrás que entrar a la pestaña de GA4 del modo vista previa y comprobar que los eventos de página vista se están enviando correctamente a Google Analytics 4. También es recomendable acceder a la DebugView de la propia herramienta y confirmar que los eventos page_view cuentan con los parámetros page_location y page_title correctos.
En caso de que funcione todo correctamente, no tendrás que hacer nada más y Google Analytics 4 será capaz de recibir los eventos de página vista de la SPA. Si esto no funciona, tendrás que probar la siguiente alternativa.
Utilizar el activador ‘Cambio en el historial’ de Google Tag Manager
Dentro de Google Tag Manager, tendrás que acceder al apartado Activadores y crear un nuevo activador de Cambio en el historial que se active en todos los cambios del historial. Tras esto, accede al modo vista previa e interactúa con la página. Si funciona correctamente, verás que en la parte izquierda aparecen eventos de History (gtm.historyChange).
Ahora, debes comprobar si cada cambio de página causa uno o más eventos de History. Si la web causa más de un evento, tendrás que configurar el activador anterior de forma que se active una única vez y no se dupliquen los eventos.
Por último, tendrás que enviar los eventos de página vista a Google Analytics 4 utilizando una etiqueta de evento de GA4 dentro de Google Tag Manager. La configuración del evento y sus parámetros dependerá de la estructura de URLs de la web.
Si las URLs no contienen fragmentos (#), no tendrás que hacer ninguna configuración especial y el evento page_view enviará todos los parámetros correctamente a Analytics 4. En cambio, si las URLs contienen fragmentos de URL, tendrás que sobrescribir el parámetro de evento page_location con una variable de JavaScript llamada window.location.href.
Recuerda comprobar en el modo vista previa de GTM si la primera vista de página también genera un evento de cambio de historial, ya que podría duplicarse la vista de página (una con el evento y otra al cargar la configuración de Google Analytics 4). Si esto sucede, desactiva la casilla de ‘Enviar un evento de vista de una página cuando se cargue esta configuración’ que aparece en la etiqueta de configuración de GA4.
En caso de no funcionar ninguno de estos métodos, tendrás que pedir a un desarrollador que envíe un push a la capa de datos cada vez que el usuario acceda a una página de la SPA. Después, podrás utilizar este push al dataLayer como activador en Google Tag Manager y enviar la información a Google Analytics 4.
Como puedes ver, la medición de las páginas vistas de una Single Page Application (SPA) se complica, ya que el código de seguimiento de las herramientas de analítica tiene que recargarse en cada página, algo que no sucede en las SPA. Para solucionarlo, GA4 y Google Tag Manager nos ofrecen la medición a través de los cambios del historial.
