¿Cómo configurar Google Analytics para React-Router?

Presta atención porque en este post encontrarás el arreglo que buscas.Este post fue aprobado por nuestros expertos para garantizar la calidad y exactitud de nuestro post.

Solución:

Mantenga una referencia a su objeto de historial. es decir

import  createBrowserHistory  from 'history';

var history = createBrowserHistory();

ReactDOM.render((
    
        [...]

Luego agregue un oyente para registrar cada página vista. (Esto supone que ya ha configurado el window.ga objeto de la manera habitual.)

history.listen((location) => 
    window.ga('set', 'page', location.pathname + location.search);
    window.ga('send', 'pageview');
);

Dado que Google Analytics se carga e inicializa con una identificación de seguimiento.

Aquí hay una solución para reaccionar-router versión 4 usando el componente para realizar un seguimiento de las visitas a la página.

 
  if (typeof window.ga === 'function') 
    window.ga('set', 'page', location.pathname + location.search);
    window.ga('send', 'pageview');
  
  return null;
 />

Simplemente renderizas este componente dentro del (pero no como hijo directo de un ).

Lo que sucede es que cada vez que cambia la propiedad de ubicación, se vuelve a renderizar este componente (en realidad, no se renderiza nada) que activa una vista de página.

Estoy usando React Router v4 y la etiqueta de sitio global de Google Analytics, que parece recomendarse al momento de escribir esto.

Y aquí está mi solución:

Cree un componente envuelto en withRouter desde react-router-dom:

import React from 'react';
import  withRouter  from 'react-router-dom';
import  GA_TRACKING_ID  from '../config';

class GoogleAnalytics extends React.Component 
    componentWillUpdate ( location, history ) 
        const gtag = window.gtag;

        if (location.pathname === this.props.location.pathname) 
            // don't log identical link clicks (nav links likely)
            return;
        

        if (history.action === 'PUSH' &&
            typeof(gtag) === 'function') 
            gtag('config', GA_TRACKING_ID, 
                'page_title': document.title,
                'page_location': window.location.href,
                'page_path': location.pathname
            );
        
    

    render () 
        return null;
    


export default withRouter(GoogleAnalytics);

Simplemente agregue el componente dentro de su enrutador (creo que idealmente después de cualquier ruta que coincida y cualquier componente Switch, porque la función de análisis no debería ser una prioridad sobre la representación de su sitio):

import React from 'react';
import  BrowserRouter as Router, Route, Switch  from 'react-router-dom';
import IndexPage from './IndexPage';
import NotFoundPage from './NotFoundPage';
import GoogleAnalytics from './GoogleAnalytics';

const App = () => (
    
        
            
            
        
        
    
);

Como se indica:

withRouter volverá a renderizar su componente cada vez que cambie la ruta con los mismos accesorios que los accesorios de renderizado

Entonces, cuando la ruta cambia, el GoogleAnalytics el componente se actualizará, recibirá la nueva ubicación como accesorios y history.action será cualquiera PUSH para un nuevo elemento de historial o POP para señalar retroceder en el historial (que creo que no debería desencadenar una vista de página, pero puede ajustar las declaraciones if en componentWillUpdate como mejor le parezca (incluso podría intentar componentDidUpdate con this.props en cambio, pero no estoy seguro de cuál es mejor)).

Calificaciones y reseñas

Si guardas algún recelo o forma de aclarar nuestro tutorial te inspiramos añadir una aclaración y con gusto lo estudiaremos.

---

---

Utiliza Nuestro Buscador