Integrando React con Google Analytics

¿Por qué utilizar Google Analytics?

Aunque existen muchas variantes actualmente para llevar un análisis y monitoreo de una aplicación, por parte de los usuarios que la utilizan, Google Analytics (GA), es una de las mejores opciones que podemos encontrar actualmente. El presente artículo no trata sobre si GA es la mejor opción o no, sino de cómo puedes integrar tu proyecto con esta herramienta, que además de ser gratuita y al alcance de todos, permite que de una manera muy sencillas tengas detalladas estadísticas de tu aplicación.

Por tanto, si después de haber hecho un estudio sobre cual es la herramienta de monitoreo que vas a utilizar en tu aplicación, resulta que GA es la elegida, y React es la tecnología en cuestión, pues no dudes en continuar con lo que te presento, dado que en rápidos y sencillos pasos te muestro cómo integrar tu aplicación React con Google Analytics.

Integrando react-ga con en el proyecto

Para instalar la dependencia, solo hay que ejecutar el siguiente comando en la raíz del proyecto

npm install --save react-ga

Una vez instalada la dependencia, es necesario integrarla en el routing de la aplicación React. Para esto hay que crear un método que espíe todas las rutas de la aplicación y por medio de la dependencia envíe los datos a Google Analytics. Para hacer este método, se creará una clase Spy que agregaremos a la ruta principal de la aplicación. A continuación, un ejemplo de cómo quedaría la clase:

// Spy.js
import React from 'react';
import {withRouter} from 'react-router-dom'
import ReactGA from 'react-ga'
import config from "../config";

class Spy extends React.Component {
    constructor(props) {
        super(props);
        ReactGA.initialize(config.googleAnalytics);
        this.props.history.listen(location => ReactGA.pageview(location.pathname));
    }

    render() {
        return null;
    }
}

const GlobalHistory = withRouter(Spy);

export default GlobalHistory;

En el caso de las configuración, que se encuentran en el fichero config.js, podrían utilizar una configuración como la siguiente. Esto permite que cuando se tiene un proyecto con varios entornos despliegue (producción, desarrollo, etc), poder definir las configuración de cada uno de estos entornos.

// config.js
export const config = {
    ...
    googleAnalytics: "4568755", // utilizar su google analytics id
    ...
};

export default {
    ...config
};

Hecho esto, solo queda integrar el componente a las rutas de la aplicación. A continuación muestro una de las maneras en las que se puede hacer esto.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Route, BrowserRouter} from 'react-router-dom';
import {createBrowserHistory} from "history";
import {Provider} from "react-redux";

import './index.css';
import * as serviceWorker from './serviceWorker';
import App from "./pages/App";
import Help from "./pages/Help";
import store from "./redux/store";
import GlobalHistory from "./pages/Spy";

const routing = (
    <Provider store={store}>
        <BrowserRouter history={createBrowserHistory()}>
            <div>
                <GlobalHistory/>
                <Route exact path="/" component={App}/>
                <Route path="/help" component={Help}/>
            </div>
        </BrowserRouter>
    </Provider>
)

ReactDOM.render(routing, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Como se puede apreciar en el código anterior, en la línea 19 del fichero index.js, se integró el componente GlobalHistory el cual, se tendrá en cuenta, cada vez que la aplicación cambie de ruta.

Enlaces

Conclusiones

Espero que el presente artículo te haya ayudado en la integración de tu proyecto con GA. Lo que he compartido en el mismo, no es más que los pasos que seguí en uno de mis propios proyectos. En este caso en particular, es un proyecto bien interesante que no es más que un juego para desarrolladores, donde cada desarrollador debe crear su propia estrategia y ponerla a competir con las de otros desarrolladores. En caso de que quieras echarle un vistazo, tanto para ver referencias de la integración, como para ver el proyecto en sí, aquí te dejo el link del proyecto.