Hola amigos, es un placer volver a estar compartiendo con vosotros esta nueva entrada. Hemos decidido hacer otras publicaciones para usuarios con conocimientos más avanzados entre cada lección del curso de Quasar Framework. El tema que nos trae hoy está relacionado con GoogleAnalytics en una SPA creada con Quasar. Como su nombre indica una SPA es una aplicación web de una sola página donde todas las llamadas se hacen sobre una única página web, por lo tanto la forma de capturar las estadísticas de Google Analytics(GA) no es igual a un sitio tradicional.
Tabla de contenidos
Instalando vue-analytics
Para poder trackear nuestras métricas con GA vamos instalar la aplicación vue-analytics en nuestro proyecto. Esta aplicación nos va ha permitir hacer un seguimiento de los usuarios en nuestra aplicación a través de todas las páginas y eventos de la SPA de una forma muy sencilla. Abrimos la consola e instalamos el siguiente paquete con npm:
$ npm install vue-analytics
Activando Google Analytics en nuestra SPA
Una vez instalada la aplicación de analytics vamos a crear un boot con quasar-cli para que se activen en cuanto se cargue nuestra SPA.
$ quasar new b analytics
Este comando creará el archivo analytics.js en el directorio /src/boot/ de nuestra aplicación con la estructura básica del boot. Editamos el archivo con nuestro editor y pegamos el siguiente código:
import VueAnalytics from 'vue-analytics'
export default async ({ Vue, router }) => {
Vue.use(VueAnalytics, {
id: 'UA-XXXXXX-1',
router,
})
}Debemos reemplazar el valor de id por el código de seguimiento que nos ha dado GA para nuestro dominio. La opción router establece que se haga un seguimiento de todas las url declaradas en el router de nuestra aplicación. Por último es necesario activar el boot en nuestra aplicación, para ello editamos el archivo quasar.conf.js, localizamos la sección boot y añadimos nuestro boot analytics.js creado anteriormente:
boot: [ ... ... 'analytics', ]
Listo, así de fácil, a partir de ahora ya podemos trackear todas las urls de nuestra SPA con Google Analytics. Para comprobarlo ejecutamos nuestra aplicación
$ quasar dev
Esperamos a que se compile nuestro proyecto y se abra la página automáticamente en nuestro navegador. Nos vamos a la página de GA y podremos ver como se registran las visitas de nuestra SPA en GA.
Seguimiento de eventos con Google Analytics
Hasta ahora vimos como hacer seguimiento de las urls de nuestra SPA, pero en este tipo de aplicaciones se crean muchas acciones dentro de una página que en ocasiones necesitamos hacer su seguimiento. Pongamos un ejemplo: En una aplicación que desarrollamos recientemente ( www.syncbed.com ) necesitábamos saber si los usuarios estaban utilizando el botón Sincronizar Calendario de la aplicación, entonces hicimos un seguimiento del evento: Localizamos el evento syncRoom dentro de nuestro código:
syncRoom(){
this.$ga.event({
eventCategory: 'Calendario',
eventAction: 'Sync ICalendar'
})
...
...
...y añadimos la función .$ga.event() para capturar el evento.
- eventCategory: Establecemos el nombre de la categoría, en este caso Calendario donde agruparemos todos los eventos de Calendario.
- eventAction: El nombre del evento, en este caso Sync Icalendar que es el nombre del evento que estamos siguiendo.
Nos vamos a nuestro proyecto, hacemos clic en el botón Syncronizar Ahora. Seguido abrimos Google Analytics en Informe en tiempo real --> Eventos y podremos comprobar como se registra el evento.
Fácil verdad. Si quieres saber más acerca de los eventos puedes consultar la documentación de Google Analytics para tracking de eventos
Conclusiones
Como hemos podido ver hacer un seguimiento de usuarios con Google Analytics en una SPA desarrollada con VueJS o Quasar es muy sencillo. Si quieres profundizar puedes consultar la documentación del vue-analytics. ¿ Conoces algún otro método para hacer seguimiento de Analytics en una SPA ? Nos gustaría saber tus comentarios.
Recuerda suscribirte a nuestro blog de Desarrollo Web en Sevilla para no perderte ni una sola entrada.
Nos vemos en la próxima.
