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 - [C√≥mo configurar y utilizar Google Analytics en aplicaciones React](https://medium.com/alturasoluciones/como-configurar-y-utilizar-google-analytics-en-aplicaciones-react-f5dbd6b36390) - [How to get history on react-router v4? (pregunta en stackoverflow)](https://stackoverflow.com/questions/42672842/how-to-get-history-on-react-router-v4) # 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](https://github.com/wil92/dev-game-client), adem√°s del [proyecto en online](https://game.binary-coffee.dev/). > Happy coding!
Opiniones