Cómo configurar y utilizar Google Analytics en aplicaciones React

En uno de los proyectos en los que estamos trabajando, nos pidieron 2 requerimientos puntales:

• Tener rutas diferenciadas para cada vista de la aplicación.
• Poder hacer seguimiento de las rutas enviando la información a Google Analytics.

Las aplicaciones React son SPA (Single Page Applications) por lo que en muchas ocasiones no vemos ningún cambio en la barra de direcciones, siempre se ve el mismo URL.

Para poder cumplir con el primer requerimiento utilizamos el paquete react-router el cual permite realizar navegación tanto en aplicaciones web como en aplicaciones móviles, inclusive cuando utilizamos SSR (Server Side Rendering). Así que ese requerimiento fue facilmente cumplido.

Cumplir el segundo requerimiento también es bastante sencillo. Lo primero que debemos hacer es instalar el paquete react-ga el cual es un wrapper (envoltorio) del script de Google Analytics.

# Usando yarn
yarn add react-ga
# Usando npm
npm install react-ga --add

Luego de instalar el paquete lo importamos en el componente donde lo necesitemos y lo configuramos.

import ReactGA from 'react-ga';
...
ReactGA.initialize('UA-000000000-0'); // Aqui pones tu identificador de cuenta de Google Analytics

Luego de configurado, es cuestión de ejecutar los métodos que queramos para enviar los datos a Google Analytics, por ejemplo para indicar que visualizamos una página, ejecutamos algo como:

ReactGA.pageview("/aqui_el_path");

O para indicar que hicimos algo en una página (por ejemplo un click, o zoom, o que creamos un usuario), ejecutamos algo como:

ReactGA.event({
  category: 'Usuario',
  action: 'Cuenta creada'
});

Si queremos automatizar el proceso de llamar a google analytics cada vez que cambiamos de ruta, podemos usar el evento listen del objeto history con un código parecido al siguiente:

history.listen(location => ReactGA.pageview(location.pathname));

De esta forma React Router se encarga de ejecutar el seguimiento por nosotros al cambiar de ruta.

Si te gustó esta historia, aplaude tantas veces como quieras y para ver historias similares acerca de tecnología, mira nuestras publicaciones y escribe en los comentarios cualquier duda que tengas.

Si necesitas un equipo que te ayude a implementar tus ideas en React JS o Nativo, no dudes en avisarnos. Puedes ir a nuestro sitio web y llenar el formulario para que iniciemos el contacto.

English version

Gustavo
Mail: gustavo@alturasoluciones.com
Twitter: @Aguardientico
LinkedIn: www.linkedin.com/in/gustavoagonzalez
Blog personal: http://aguardientech.blogspot.com