Wie richte ich Google Analytics für React-Router ein?

Ich versuche, Google Analytics auf meiner Reaktionsseite einzurichten, und bin auf einige Pakete gestoßen, von denen jedoch keines die Art von Einrichtung hat, die ich anhand von Beispielen habe. Ich hatte gehofft, jemand könnte etwas Licht ins Dunkel bringen.

Das Paket, das ich mir ansehe, ist, reag-ga .

Meine Rendermethode auf meinem index.jssieht so aus.

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'));

Behalten Sie einen Verweis auf Ihr Verlaufsobjekt. dh

import { createBrowserHistory } from 'history';

var history = createBrowserHistory();

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

Fügen Sie dann einen Listener hinzu, um jeden Seitenaufruf aufzuzeichnen. (Dies setzt voraus, dass Sie das window.gaObjekt bereits auf die übliche Weise eingerichtet haben.)

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

Vorausgesetzt, Google Analytics wird geladen und mit einer Tracking-ID initialisiert.

Hier ist eine Lösung für React-Router Version 4, bei der die <Route>Komponente zum Verfolgen von Seitenaufrufen verwendet wird.

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

Sie rendern diese Komponente einfach innerhalb von <Router>(aber nicht als direktes untergeordnetes Element von a<Switch> ).

Was passiert, ist, dass jedes Mal, wenn sich die Standort-Requisite ändert, diese Komponente erneut gerendert wird (ohne etwas zu rendern), wodurch ein Seitenaufruf ausgelöst wird.

Ich verwende React Router v4 und das Google Analytics Global Site Tag , das zum Zeitpunkt des Schreibens empfohlen zu sein scheint.

Und hier ist meine Lösung:

Erstellen Sie eine in withRouter eingeschlossene Komponente aus 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);

Fügen Sie einfach die Komponente in Ihrem Router hinzu (ich glaube, idealerweise nach übereinstimmenden Routen und Switch-Komponenten, da die Analysefunktion keine Priorität vor dem Rendern Ihrer Site haben sollte):

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>
);

Wie erwähnt:

withRouter rendert seine Komponente jedes Mal neu, wenn sich die Route mit denselben Requisiten wie Render-Requisiten ändert

Wenn sich die Route ändert, wird die GoogleAnalyticsKomponente aktualisiert, erhält den neuen Speicherort als Requisiten und history.actionist entweder PUSHfür ein neues Verlaufselement oder POPals Signal dafür, dass der Verlauf rückwärts durchlaufen wird (was meiner Meinung nach keine Seitenansicht auslösen sollte, aber Sie können die if - Anweisungen in einstellen , componentWillUpdatewie Sie sehen , passen (Sie sogar versuchen könnte , componentDidUpdatemit this.propsstatt, aber ich bin nicht sicher , was besser ist)).

Hinweis: Wenn Sie das react-router-domPaket von verwenden react-router-4, können Sie dies folgendermaßen behandeln:

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>)
  }
}

Beachten Sie, dass Sie dazu das historyPaket installieren müssen (npm install history ) . Dies ist bereits eine Abhängigkeit von React-Router-Dom, sodass Sie hier keine Seitengewichtung hinzufügen.

Beachten Sie auch: Es ist nicht möglich, die BrowserRouter-Komponente zu verwenden UND Ihr Ga-Tracking auf diese Weise zu instrumentieren. Dies ist in Ordnung, da die BrowserRouter-Komponente nur ein sehr dünner Wrapper um das Router-Objekt ist. Wir erstellen die BrowserRouter-Funktionalität hier mit <Router history={history}>where neu const history = createBrowserHistory();.

Ich würde vorschlagen, das hervorragende react-router-gaPaket zu verwenden, das extrem leicht und einfach zu konfigurieren ist, insbesondere wenn Sie das verwendenBrowserRouter Wrappers.

Importieren Sie die Komponente:

import Analytics from 'react-router-ga';

Dann fügen <Analytics>Sie einfach das in Ihrem BrowserRouter:

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

Mir gefällt, wie Mark Thomas Müller hier vorschlägt :

In Ihrer index.js

import ReactGA from 'react-ga'

ReactGA.initialize('YourAnalyticsID')

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

Wo Ihre Routen sind:

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>
        )
    }
}

Kurz, skalierbar und einfach :)

Da react-router v5.1.0kann dies mit viel einfacher gelöst werden useLocation.

usePageTracking.js

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

const usePageTracking = () => {
  const location = useLocation();

  useEffect(() => {
    ReactGA.initialize("UA-000000000-0");
    ReactGA.pageview(location.pathname + location.search);
  }, [location]);
};

export default usePageTracking;

App.js

const App = () => {
  usePageTracking();

  return (...);
};

Siehe auch:

• https://reactrouter.com/web/api/Hooks/uselocation
• https://github.com/react-ga/react-ga/issues/122

Hier ist eine etwas intelligentere Version:

usePageTracking.js

import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import ReactGA from "react-ga";

const usePageTracking = () => {
  const location = useLocation();
  const [initialized, setInitialized] = useState(false);

  useEffect(() => {
    if (!window.location.href.includes("localhost")) {
      ReactGA.initialize("UA-000000000-0");
    }
    setInitialized(true);
  }, []);

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

export default usePageTracking;

Befolgen Sie immer den von der Bibliothek empfohlenen Weg

In der React-GA-Dokumentation wurde eine Community-Komponente hinzugefügt, die für die Verwendung mit React Router empfohlen wird: https://github.com/react-ga/react-ga/wiki/React-Router-v4-withTracker

Implementierung

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;

Stellen Sie zunächst in Ihrer index.js die Funktion onUpdate so ein, dass ga aufgerufen wird

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>
  );
}

Und 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)};
}

Hier ist die einfachste Möglichkeit, alle Pfade mit einigen Umgehungsmöglichkeiten zu verfolgen:

npm i --save history react-ga

Erstellen Sie eine Datei 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

und importieren Sie es dann dorthin, wo es eingestellt ist 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

Verweise:

Gustavo Gonzalez | medium.com

Geschichte | GitHub

Ich schlage vor, die Segmentanalysebibliothek zu verwenden und der React-Kurzanleitung zu folgen , um Seitenaufrufe mithilfe der React -Router- Bibliothek zu verfolgen . Sie können die erlauben <Route />Komponente zu handhaben, wenn die Seite und die Nutzung macht componentDidMountaufzurufen pageAnrufe. Das folgende Beispiel zeigt eine Möglichkeit, wie Sie dies tun können:

    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>
        );
      }
    }

Ich bin der Betreuer von https://github.com/segmentio/analytics-react . Mit Segment können Sie verschiedene Ziele durch Umlegen eines Schalters ein- und ausschalten, wenn Sie mehrere Analysetools ausprobieren möchten (wir unterstützen über 250 Ziele), ohne zusätzlichen Code schreiben zu müssen. 🙂

Wenn Sie einen Hash- oder Browserverlauf verwenden, können Sie Folgendes tun:

import trackingHit from 'tracking';

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

wo ./tracking.es6

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

Grundlegende React-Ga-Implementierung mit Ihrer 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'));

Basierend auf den Vorschlägen von @ david-l-walsh und @bozdoz

Ich habe eine HOC, der das Ausführen window.ga('set','page','{currentUrl})und window.ga('send', 'pageview');Funktion und ist easly direkt im Router - Seite verwendet ...

das ist das HOC:

import React from 'react';
import { history } from '../../store'; // or wherever you createBrowserHistory(); invokation is

function withGAHistoryTrack(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
    }

    componentDidMount() {
      const { location } = history;
      const page = location.pathname + location.search;

      if (typeof window.ga === 'function') {
        window.ga('set', 'page', page);
        window.ga('send', 'pageview');
      }
    }

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

export default withGAHistoryTrack;

und wird auf der Routerseite folgendermaßen verwendet:

<Route
 path={'yourPath'}
 component={withGAHistoryTrack(yourComponent)}
 exact
/>

Zum dynamischen Aktualisieren der URL bei einem Ereignis (wie onClick usw.) kann Folgendes verwendet werden:

 //Imports
 import ReactGA from "react-ga";
 import { createBrowserHistory } from "history";

 // Add following on some event, like onClick (depends on your requirement)
 const history = createBrowserHistory();
 ReactGA.initialize("<Your-UA-ID-HERE>");
 ReactGA.pageview(history.location.pathname);