Instalar Google Analytics en una web que usa React

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

En esta lección aprenderemos a integrar Google Analytics en una aplicación creada con React utilizando la librería react-ga. Google Analytics nos permite realizar un seguimiento del comportamiento de los usuarios en nuestra web y analizar datos clave para mejorar la experiencia del usuario.

1. Instalación de react-ga

Para comenzar, debemos instalar la librería react-ga en nuestro proyecto. Podemos hacerlo con el siguiente comando:

npm i react-ga

2. Configurar el seguimiento en Tracking.js

El siguiente archivo Tracking.js se encarga de inicializar Google Analytics y registrar cada cambio de página:

Tracking.js

import { useEffect } from 'react';
import ReactGA from 'react-ga';
import { useLocation } from 'react-router';


export default () => {
    const location = useLocation();

    useEffect(() => {
        ReactGA.initialize('GA-TRACKING-CODE!!!');
    }, []);

    useEffect(() => {
        ReactGA.pageview(location.pathname);
    }, [location]);

    return null;
};

import { useEffect } from 'react';
import ReactGA from 'react-ga';
import { useLocation } from 'react-router';

export default () => {
    const location = useLocation();

    useEffect(() => {
        ReactGA.initialize('GA-TRACKING-CODE!!!');
    }, []);

    useEffect(() => {
        ReactGA.pageview(location.pathname);
    }, [location]);

    return null;
};

Explicación del código

• Se importa useEffect de React para ejecutar código en momentos específicos del ciclo de vida del componente.
• ReactGA.initialize('GA-TRACKING-CODE!!!') inicializa Google Analytics con nuestro ID de seguimiento.
• ReactGA.pageview(location.pathname) envía un evento a Google Analytics cada vez que cambia la ruta de la página.
• useLocation() de react-router nos permite obtener la ubicación actual y detectar cambios en la URL.

3. Integrar el seguimiento en routes.js

Para asegurarnos de que Google Analytics registre correctamente las visitas en nuestra aplicación, debemos incluir el componente Tracking en nuestro enrutador:

routes.js

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import NavigationBar from '../components/navbar';
import Tracking from './tracking';

import Home from '../pages/home';
import SillaCoche from '../pages/silla-coche';

export default () => (
    <BrowserRouter basename={process.env.PUBLIC_PATH}>
        <NavigationBar />
        <Tracking />
        <Switch>

            <Route exact path="/" component={Home} />
            <Route exact path="/sillitas-bebe-coche/" component={SillaCoche} />

            <Route path="*" component={() => <div>404</div>} />
        </Switch>
    </BrowserRouter>
);

Explicación del código

• BrowserRouter se encarga de manejar el enrutamiento en la aplicación.
• Tracking se coloca dentro del BrowserRouter, lo que permite registrar los cambios de ruta en toda la aplicación.
• Switch define las rutas principales:
  • / para la página de inicio (Home).
  • /sillitas-bebe-coche/ para otra página (SillaCoche).
  • Un Route genérico para manejar errores 404.

4. Verificación de Google Analytics

Para verificar que Google Analytics esté funcionando correctamente:

1. Accede a tu cuenta de Google Analytics.
2. Ve a la sección de «Tiempo real».
3. Navega por tu aplicación y verifica si se registran visitas.

Con esta configuración, nuestra aplicación React estará correctamente integrada con Google Analytics, permitiendo hacer un seguimiento del comportamiento de los usuarios en nuestra web.