navegacion-spa-cambios-historial-tag-manager-analytics-lucia-marin

Medición de SPA (Single Page Applications), PWA o cambios de historial con Analytics y Tag Manager

Posted by Lucía Marín on Mar 22, 2021

Es muy frecuente desde hace años el encontrar sitios web donde NO se recarga la página al cambiar de contenido visto. Simplificando, podríamos decir que se trata de SPA (Single Page Application) o una PWA (Progressive Web Application), codificadas ambas con librerías o frameworks Javascript que permiten una respuesta muy ágil de la página a las interacciones del usuario.

Esto para la usabilidad es fabuloso y para los tiempos de carga. Pero, ¿y para la medición? ¿y para el SEO? ¿qué ocurre si mi contenido web tiene una # en la URL? pues francamente: que estoy un tanto jodid@. ¿Por qué? Dos motivos:

  1. Google Analytics NO registra las # en las URLs recopiladas, con lo que toda la navegación quedará en una sola página, normalmente en / (la home)
  2. Google ni siquiera indexará bien los contenidos, o no de manera separada, así que para SEO, contará como si solo tuviera una URL enviada

Centrándonos en lo que nos incumbe en este post, en la analítica, ¿cómo podemos hacer para solucionarlo?

Existe un activador de Google Tag Manager que es perfecto para medir esto, se llama: Cambios de Historial o History Change.

Esta opción nos va servir tanto para Universal Analytics como para Google Analytics 4, con alguna pequeña diferencia en las variables y nombres de campos a configurar, en cada caso en la variable (UA) o en la etiqueta de configuración (GA4).

Además, GA4 lleva por defecto como opción de Medición Mejorada / Enhanced Measurement la posibilidad de medir cambios de historial de navegación solo activándolo en su evento page_view. No lo he probado ni visto en acción aún porque me he centrado en un ejemplo que sí tenía a mano, de cambios de historial con #, pero según blogs de confianza que sigo, si el cambio de historial genera una URL /normal, sin #, parece que GA4 lo pilla por defecto solo habilitando la opción, así que aquí no hablamos de ese caso, sino que hablamos más bien de hacer todo desde el lado de Google Tag Manager.

 

¿Cómo medir bien el cambio de historial con Tag Manager si en mi sitio toda la navegación es así?

Se trata de algo más que poner el activador History Change en la etiqueta Pageview de Google Analytics, hemos de redefinir campos clave de la medición base de Google Analytics, como son en cada caso:


Universal Analytics Google Analytics 4
location page_location
referrer page_referrer
Docu Universal Analytics Docu Analytics 4

¿Cómo generamos las variables que necesitamos?

Me gusta hacerlas sencillas, con tablas de consulta que verifiquen si se ha producido un cambio de historial por el contenido de la variable que se rellena con el nuevo «historial». Normalmente la que he visto en estos casos es: {{New History Fragment}}, pero cuando hagas pruebas en tu proyecto verifica si funciona esa o {{New History State}}. En función de si dicha variable tiene valor o no, definimos de una forma u otra la URL enviada y su Referrer, bien con los valores estándar o con los valores modificados para añadir el historial de navegación.

page-location-spa-tag-manager page-referrer-spa-tag-manager

 

¿Y el activador de cambio de historial?

cambios-historial-google-tag-manager-spa single page applications

Puedes empezar probando con este y si quieres luego precisar más según el valor de History Source.

¿Cómo configuramos la variable en el caso de Universal Analytics para una Single Page Application?

medir-spa-google-analytics-universal

 

¿Y para Google Analytics 4, cómo hacemos la etiqueta de configuración para medir un sitio SPA?

medir-spa-google-analytics-4

Si quieres más soluciones fáciles, como esta, para tu trabajo de analista o técnic@, te invito a apuntarte a mi curso online y te guío para que puedas aprender Google Tag manager, Google Analytics y píxeles de conversión con éxito :D

¡¡Ojalá que te resulte útil!!

Sobre mí