Binary Coffee

Integrando React con Google Analytics

javascript react 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.

Happy coding!

Opiniones