Seguimiento de aplicaciones de una sola página con gtag.js

En esta página se explica cómo usar gtag.js para hacer el seguimiento de páginas en sitios web cuyo contenido se carga de forma dinámica, y no mediante las cargas de página completa tradicionales.

Descripción general

Las aplicaciones de una sola página son aplicaciones o sitios web que cargan todos los recursos necesarios para navegar por los sitios web en la primera carga de la página. A medida que los usuarios hacen clic en los enlaces e interactúan con la página, el contenido posterior se carga de forma dinámica. Con frecuencia, las aplicaciones actualizan la URL de la barra de direcciones para emular la navegación de página tradicional, pero no se vuelve a realizar otra solicitud de página completa.

El fragmento de seguimiento funciona bien con los sitios web tradicionales porque el código de fragmento se ejecuta cada vez que los usuarios cargan una página nueva. Sin embargo, en el caso de las aplicaciones de una sola página, donde el nuevo contenido de página se carga dinámicamente en vez de realizar cargas de página completas, el código del fragmento gtag.js solo se ejecuta una vez. Por lo tanto, el seguimiento de las páginas vistas (virtuales) posteriores debe realizarse manualmente a medida que se carga nuevo contenido.

Realizar el seguimiento de las páginas vistas virtuales

Cuando tu aplicación carga contenido dinámicamente y actualiza la URL en la barra de direcciones, la URL de la página almacenada con gtag.js también debe actualizarse.

Para actualizar page_path, modifica el parámetro config de tu propiedad. Para ello, asigna un valor al parámetro page_path:

gtag('config', 'GA_TRACKING_ID', {'page_path': '/new-page.html'});

Una vez que hayas añadido el nuevo valor a page_path, se aplicará a todos los eventos posteriores que se envíen a esa propiedad.

Gestionar varias URL para el mismo recurso

Algunas aplicaciones de una sola página solo actualizan la parte hash de la URL cuando cargan contenido dinámicamente. Esto puede dar lugar a situaciones en las que distintas rutas de página apunten al mismo recurso. En tales casos, lo mejor suele ser elegir una URL canónica y solo enviar ese valor page_path a Google Analytics.

Por ejemplo, supongamos que se puede acceder a la página "Quiénes somos" de un sitio web mediante cualquiera de estas URL:

  • /about
  • /#/about
  • /home/#/about

Para evitar que aparezcan datos duplicados en los informes, lo mejor es hacer el seguimiento de estas páginas asignando /about al comando page_path.