web-dev-qa-db-fra.com

Comment configurer Google Analytics pour React-Router?

J'essaie d'installer Google Analytics sur mon site de réaction et je suis tombé sur quelques packages, mais aucun d'entre eux n'a le type d'installation que j'ai en termes d'exemples. J'espérais que quelqu'un pourrait nous éclairer à ce sujet. 

Le paquet que je regarde est, react-ga .

Ma méthode de rendu sur mon index.js ressemble à ceci.

React.render((
<Router history={createBrowserHistory()}>
    <Route path="/" component={App}>
        <IndexRoute component={Home} onLeave={closeHeader}/>
        <Route path="/about" component={About} onLeave={closeHeader}/>
        <Route path="/gallery" component={Gallery} onLeave={closeHeader}/>
        <Route path="/contact-us" component={Contact} onLeave={closeHeader}>
            <Route path="/contact-us/:service" component={Contact} onLeave={closeHeader}/>
        </Route>
        <Route path="/privacy-policy" component={PrivacyPolicy} onLeave={closeHeader} />
        <Route path="/feedback" component={Feedback} onLeave={closeHeader} />
    </Route>
    <Route path="*" component={NoMatch} onLeave={closeHeader}/>
</Router>), document.getElementById('root'));
google-analyticsreactjsreact-router
48
John Fu

Conservez une référence à votre objet d'historique. c'est à dire.

var history = createBrowserHistory();

ReactDOM.render((
    <Router history={history}>
        [...]

Ajoutez ensuite un écouteur pour enregistrer chaque page vue. (Cela suppose que vous avez déjà configuré l'objet window.ga de la manière habituelle.)

history.listen(function (location) {
    window.ga('set', 'page', location.pathname + location.search);
    window.ga('send', 'pageview');
});
55
David L. Walsh

Étant donné que Google Analytics est chargé et initialisé avec un identifiant de suivi.

Voici une solution pour react-router version 4 utilisant le composant <Route> pour effectuer le suivi des pages vues.

<Route path="/" render={({location}) => {
  if (typeof window.ga === 'function') {
    window.ga('set', 'page', location.pathname + location.search);
    window.ga('send', 'pageview');
  }
  return null;
}} />

Vous rendez simplement ce composant dans le <Router> (mais pas en tant qu'enfant direct d'un <Switch>).

Qu'est-ce qui se passe, c'est que chaque fois que la propriété prop change, il provoque un re-rendu de ce composant (pas réellement le rendu) qui déclenche une page view.

22
heyhugo

J'utilise React Router v4 et le balise de site Google Analytics Global , qui semble être recommandé au moment de la rédaction de cet article.

Et voici ma solution:

Créez un composant encapsulé dans withRouter à partir de 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);

Ajoutez simplement le composant dans votre routeur (idéalement, je pense après tous les itinéraires qui seraient mis en correspondance et tous les composants Switch, car la fonction d'analyse ne doit pas être prioritaire par rapport à votre rendu de site):

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 = () => (
    <Router>
        <Switch>
            <Route exact path="/" component={IndexPage} />
            <Route component={NotFoundPage} />
        </Switch>
        <GoogleAnalytics />
    </Router>
);

Comme indiqué: 

withRouter rendra à nouveau son composant chaque fois que la route changera avec le mêmes accessoires que rendre les accessoires

Ainsi, lorsque la route changera, le composant GoogleAnalytics sera mis à jour, il recevra le nouvel emplacement sous forme d'accessoires et history.action sera soit Push pour un nouvel élément d'historique, soit POP pour signaler le retour en arrière dans l'historique page, mais vous pouvez ajuster les instructions if dans componentWillUpdate comme bon vous semble (vous pouvez même essayer componentDidUpdate avec this.props à la place, mais je ne sais pas ce qui est préférable)).

17
bozdoz

Notez que si vous utilisez le paquet react-router-dom à partir de react-router-4, vous pouvez gérer ceci de la manière suivante:

import { Router, Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();
const initGA = (history) => {
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).Push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'YOUR_IDENTIFIER_HERE', 'auto');
  ga('send', 'pageview');

  history.listen((location) => {
    console.log("tracking page view: " + location.pathname);
    ga('send', 'pageview', location.pathname);
  });
};

initGA(history);

class App extends Component { //eslint-disable-line
  render() {
    return
      (<Router history={history} >
         <Route exact path="/x" component={x} />
         <Route exact path="/y" component={y} />
       </Router>)
  }
}

Notez que cela nécessite l'installation du package history (npm install history). C'est déjà une dépendance de react-router-dom, vous n'ajoutez donc pas le poids de la page ici.

Notez également qu'il n'est pas possible d'utiliser le composant BrowserRouter ET l'instrument de votre suivi ga de cette façon. Cela n’est pas un problème, car le composant BrowserRouter n’est qu’un emballage très fin pour l’objet Router. Nous recréons ici la fonctionnalité BrowserRouter avec <Router history={history}> où const history = createBrowserHistory();.

16
Peter Berg

Je suggérerais d'utiliser l'excellent paquet react-router-ga qui est extrêmement léger et facile à configurer, en particulier lors de l'utilisation de l'encapsuleur BrowserRouter.

Importer le composant:

import Analytics from 'react-router-ga';

Ensuite, ajoutez simplement le <Analytics> dans votre BrowserRouter:

<BrowserRouter>
    <Analytics id="UA-ANALYTICS-1">
        <Switch>
            <Route path="/somewhere" component={SomeComponent}/>
        </Switch>
    </Analytics>
</BrowserRouter>
6
Toshe

Tout d’abord, dans votre index.js, définissez la fonction onUpdate pour appeler ga

import ga from 'ga.js';
onUpdate() {
  console.log('=====GA=====>', location.pathname);
  console.log('=====GA_TRACKING_CODE=====>', GA_TRACKING_CODE);
  ga("send", "pageview", location.pathname);
}

render() {
  return (
    <Router onUpdate={this.onUpdate.bind(this)}>...</Router>
  );
}

Et ga.js:

'use strict';
if(typeof window !== 'undefined' && typeof GA_TRACKING_CODE !== 'undefined') {
  (function(window, document, script, url, r, tag, firstScriptTag) {
    window['GoogleAnalyticsObject']=r;
    window[r] = window[r] || function() {
      (window[r].q = window[r].q || []).Push(arguments)
    };
    window[r].l = 1*new Date();
    tag = document.createElement(script),
    firstScriptTag = document.getElementsByTagName(script)[0];
    tag.async = 1;
    tag.src = url;
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  })(
    window,
    document,
    'script',
    '//www.google-analytics.com/analytics.js',
    'ga'
  );

  var ga = window.ga;

  ga('create', GA_TRACKING_CODE, 'auto');

  module.exports = function() {
    return window.ga.apply(window.ga, arguments);
  };
} else {
  module.exports = function() {console.log(arguments)};
}
4
WeiYuan

Toujours suivre la méthode recommandée par la bibliothèque

Dans la documentation de React-GA, ils ont ajouté un composant de communauté recommandé pour une utilisation avec React Router: https://github.com/react-ga/react-ga/wiki/React-Router-v4-withTracker

La mise en oeuvre

import withTracker from './withTracker';

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Route component={withTracker(App, { /* additional attributes */ } )} />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root'),
);

Code

import React, { Component, } from "react";
import GoogleAnalytics from "react-ga";

GoogleAnalytics.initialize("UA-0000000-0");

const withTracker = (WrappedComponent, options = {}) => {
  const trackPage = page => {
    GoogleAnalytics.set({
      page,
      ...options,
    });
    GoogleAnalytics.pageview(page);
  };

  // eslint-disable-next-line
  const HOC = class extends Component {
    componentDidMount() {
      // eslint-disable-next-line
      const page = this.props.location.pathname + this.props.location.search;
      trackPage(page);
    }

    componentDidUpdate(prevProps) {
      const currentPage =
        prevProps.location.pathname + prevProps.location.search;
      const nextPage =
        this.props.location.pathname + this.props.location.search;

      if (currentPage !== nextPage) {
        trackPage(nextPage);
      }
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };

  return HOC;
};

export default withTracker;
3
Paras

Si vous utilisez l'historique du hachage ou du navigateur, vous pouvez effectuer les opérations suivantes:

import trackingHit from 'tracking';

import { Router, browserHistory } from 'react-router';
browserHistory.listen(trackingHit);
// OR
import { Router, hashHistory } from 'react-router';
hashHistory.listen(trackingHit);

où ./tracking.es6

export default function(location) {
    console.log('New page hit', location.pathname);
    // Do your shizzle here
}
0
sidonaldson

J'aime comment Mark Thomas Müller suggère ici :

Dans votre index.js 

import ReactGA from 'react-ga'

ReactGA.initialize('YourAnalyticsID')

ReactDOM.render(<App />, document.getElementById('root'))

Où se trouvent vos itinéraires:

import React, { Component } from 'react'
import { Router, Route } from 'react-router-dom'
import createHistory from 'history/createBrowserHistory'
import ReactGA from 'react-ga'

const history = createHistory()
history.listen(location => {
    ReactGA.set({ page: location.pathname })
    ReactGA.pageview(location.pathname)
})

export default class AppRoutes extends Component {
    componentDidMount() {
        ReactGA.pageview(window.location.pathname)
    }

    render() {
        return (
            <Router history={history}>
                <div>
                    <Route path="/your" component={Your} />
                    <Route path="/pages" component={Pages} />
                    <Route path="/here" component={Here} />
                </div>
            </Router>
        )
    }
}

Court, évolutif et simple :)

0
Jöcker

voici un moyen plus simple de suivre tous les chemins avec quelques solutions:

npm i --save history react-ga

créer un fichier history.js

import { createBrowserHistory } from "history"
import ReactGA from "react-ga"

ReactGA.initialize(process.env.REACT_APP_GA)

const history = createBrowserHistory()
history.listen((location) => {
    ReactGA.pageview(location.pathname)
})

// workaround for initial visit
if (window.performance && (performance.navigation.type === performance.navigation.TYPE_NAVIGATE)) {
    ReactGA.pageview("/")
}

export default history

puis importez-le où est défini votre Router

import history from "./history"

...

class Route extends Component {
render() {
    return (
        <Router history={history}>
            <Switch>
              <Route path="/" exact component={HomePage} />
              ...
            </Switch>
        </Router>
    )
}

export default Route

Références:

Gustavo Gonzalez | medium.com

Histoire | GitHub

0
fsilva

Je suggère d'utiliser la bibliothèque d'analyse de segment et de suivre le guide de démarrage rapide de React pour suivre les appels de page à l'aide de la bibliothèque react-router . Vous pouvez autoriser le composant <Route /> à gérer le rendu de la page et utiliser componentDidMount pour appeler des appels page. L'exemple ci-dessous montre une façon de procéder:

    const App = () => (
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    );

    export default App;

    export default class Home extends Component {
      componentDidMount() {
        window.analytics.page('Home');
      }

      render() {
        return (
          <h1>
            Home page.
          </h1>
        );
      }
    }

Je suis le responsable de https://github.com/segmentio/analytics-react . Avec Segment, vous pourrez activer et désactiver différentes destinations en un tournemain si vous souhaitez essayer plusieurs outils d'analyse (nous prenons en charge plus de 250 destinations) sans avoir à écrire de code supplémentaire. ????

0
William

implémentation de base react-ga avec votre index.js

var ReactGA = require('react-ga'); // require the react-ga module
ReactGA.initialize('Your-UA-ID-HERE'); // add your UA code 

function logPageView() { // add this function to your component
  ReactGA.set({ page: window.location.pathname + window.location.search });
  ReactGA.pageview(window.location.pathname + window.location.search);
}

React.render((
<Router history={createBrowserHistory()} onUpdate={logPageView} > // insert onUpdate props here
    <Route path="/" component={App}>
        <IndexRoute component={Home} onLeave={closeHeader}/>
        <Route path="/about" component={About} onLeave={closeHeader}/>
        <Route path="/gallery" component={Gallery} onLeave={closeHeader}/>
        <Route path="/contact-us" component={Contact} onLeave={closeHeader}>
            <Route path="/contact-us/:service" component={Contact} onLeave={closeHeader}/>
        </Route>
        <Route path="/privacy-policy" component={PrivacyPolicy} onLeave={closeHeader} />
        <Route path="/feedback" component={Feedback} onLeave={closeHeader} />
    </Route>
    <Route path="*" component={NoMatch} onLeave={closeHeader} />
</Router>), document.getElementById('root'));
0
Isaac Pak