2

Tengo un sitio web de tipo SPA (Single Page Application, Aplicación de una sola página), en donde la gran mayoría del contenido se va mostrando siempre en la misma página.

Utilizo HTML5, JQuery, AJAX (para no refrescar toda la página) y PHP, además de MySQL para traer el contenido.

El tema es que me gustaría que las herramientas de analítica (Google analytics o la que está en mi servidor en cPanel) me puedan mostrar también las páginas que el usuario fue viendo en esta misma página (que sería el index).

O sea, cuando hace una búsqueda interna en el index la URL cambia y muestra el contenido buscado por el usuario. Quiero que se vea en las herramientas de analítica la página generada. Sino parece que siempre están en el index, pero no tengo posibilidad de saber que están viendo en mi página principal.

Por ejemplo, mi index www.misitio.com se busca algo y la URL cambia a www.misiito.com/su_busqueda. Entonces, quiero ver reflejado en las herramientas, además de que entraron al index, también la página que buscaron, para el ejemplo _"/su_busqueda"_

¿Es posible hacer eso? A lo mejor hay un código, del cual desconozco, desde JavaScript para poder realizarlo. O bien, quizás me puedan dar información de donde buscar sobre esto, si es que la hay.

Al final estoy haciendo lo que se explica desde aca pero no me está funcionando. Yo estoy poniendo lo siguiente:

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_TRACKING_ID', {'page_location': location.href,'page_path': location.pathname});
</script>

Agregue el location.pathname al parámetro para que me tome el valor que está en la URL y obvio que también remplace el 'GA_TRACKING_ID' por mi ID.

Lo estoy queriendo ver en Google Analytic en tiempo real, pero sólo funciona si refresco la página y no cuando se busca o selecciona un link desde el mismo index, sin tener que refrescar la página.

Según dice el link que les paso, no habría que hacer nada más para realizar el seguimiento, pero no está trabajando para mí. ¿O faltaría agregar o configurar alguna otra cosa?

4
  • 1
    Cada vez que la web cambie, puedes mandar un evento de pageview de Google analytics con dimensiones personalizadas indicando en qué página/selección esta.
    – lois6b
    Commented el 24 sept. 2018 a las 12:47
  • @lois6b ¿Y como sería eso? Tienes algo de código. Commented el 24 sept. 2018 a las 13:52
  • Viendo que no pude realizarlo con Google Analytics, lo logre solucionar haciendo uso de Google Tag Manager. De esta manera con la herramienta de GTM y agregando el código correspondiente a mi index, pude vincular Analytics haciendo uso de etiquetas y disparadores para por ejemplo, cuando cambia la URL con el historial. Commented el 2 oct. 2018 a las 21:27
  • Perdona que no te contestara más, me pillaste de vacaciones. Me alegra que pudieras solucionarlo. Puedes escribir una respuesta con los pasos y codigos que usaste? ^^un saludo
    – lois6b
    Commented el 3 oct. 2018 a las 7:05

2 respuestas 2

0

La solución fue hacer uso de la herramienta Google Tag Manager (GTM) que aparece para activar en el mismo Google Analytics. Luego de llenar unos campos y aceptar los términos, ya aparece para trabajar y hacer uso del GTM. Entonces, además de ya tener mi código de Analytics en mi index tuve que agregar también el siguiente código para trabajar con GTM, dentro de la etiqueta <head>:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Después, dentro de "Área de trabajo" dentro de la herramienta de GTM cree una "Nueva Etiqueta", al cual al que ponerle un nombre descriptivo. Seleccionas "Configuración de la etiqueta" y eliges el tipo de etiqueta, para mi caso seleccione la que dice "Google Analytics – Universal Analytics" que es donde voy a querer ver los diferentes cambios que el usuario va realizando en mi index.

Luego hay que hacer la activación, elijes un activador para la etiqueta que se creó antes ("Google Analytics – Universal Analytics"), elijes el activador, para mi caso fue "Clics en enlaces", Tipo-> "Cambio en el historial". De esta manera cuando se cambie el historial del navegador lo voy a poder ver reflejado en "Tiempo real" en Google Analytics. Yo deje todo por defecto, pero ahí puedes ver que tienes varias cosas más para configurar.

A continuación, le das a guardar. Desde el "Área de trabajo" puedes visualizar lo que estás creando o ya has creado, versiones de publicaciones, etc. Para concluir, hay que hacer clic en el botón "Enviar" para poder publicar tu nueva etiqueta, puedes poner un nombre y una descripción. De esta manera tu publicación queda guardada y ya activa.

Puedes ver cómo va trabajando tu página con el GTM cuando vas apretando los enlaces, haces búsquedas internas, haces atrás y adelante en el navegador, etc., o sea siempre que cambie la URL y como ya comente también lo logras ver (y es lo que en definitiva yo quería realizar) desde Google Analytics y en "tiempo real".

0

La mejor forma de realizar un seguimiento en una SPA es a través de un sistema híbrido de capturas dataLayer más objetos en GTM, que a la vez llama la función del script y envía los eventos a GA.

Funciona al 100% siempre y cuando esté realizado de una forma correcta. Funciona en React y Angular en mi caso se envian las peticiones a GA o desde la propia interfaz.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.