it-swarm.com.de

So richten Sie Google Analytics für React-Router ein

Ich versuche, Google Analytics auf meiner React-Site einzurichten, und habe ein paar Pakete gefunden, von denen jedoch keines so eingerichtet ist, wie es mir Beispiele angeht. Hatte gehofft, jemand könnte etwas Licht in diese Sache bringen. 

Das Paket, das ich mir anschaue, ist: reagiere ga .

Meine Rendermethode auf meinem index.js sieht 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'));
48
John Fu

Behalten Sie einen Verweis auf Ihrem History-Objekt bei. d.h.

var history = createBrowserHistory();

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

Fügen Sie dann einen Listener hinzu, um jeden Seitenzugriff aufzuzeichnen. (Dies setzt voraus, dass Sie das window.ga-Objekt bereits wie gewohnt eingerichtet haben.)

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

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

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

<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 in <Router> (jedoch nicht als direktes untergeordnetes Element eines <Switch>).

Was passiert, ist, dass jedes Mal, wenn sich die Ortsstütze ändert, ein erneutes Rendern dieser Komponente bewirkt wird (und nicht tatsächlich etwas gerendert wird), das einen Seitenaufruf auslöst.

22
heyhugo

Ich verwende den React Router v4 und das Google Analytics Global Site Tag , das zum Zeitpunkt der Erstellung dieses Dokuments empfohlen wird.

Und hier ist meine Lösung:

Erstellen Sie eine Komponente, die in withRouter aus react-router-dom eingeschlossen ist:

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 Ihren Router ein (ich glaube im Idealfall nach übereinstimmenden Routen und nach Switch-Komponenten, da die Analysefunktion keine Priorität gegenüber der Rendering 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 der .__ ändert. gleiche Requisiten wie Render Requisiten

Wenn sich also die Route ändert, wird die GoogleAnalytics-Komponente aktualisiert, sie erhält den neuen Standort als Requisiten, und history.action wird entweder Push für ein neues Verlaufselement oder POP, um das Rückwärtsgehen der Historie zu signalisieren (was meiner Meinung nach keine auslösen sollte Seitenansicht, aber Sie können die if -Anweisungen in componentWillUpdate anpassen, wie Sie es für richtig halten (Sie könnten componentDidUpdate auch mit this.props versuchen, aber ich bin nicht sicher, welche besser ist).

17
bozdoz

Wenn Sie das react-router-dom-Paket von react-router-4 verwenden, können Sie dies wie folgt 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 Paket history (npm install history) installieren müssen. Dies ist bereits eine Abhängigkeit von dem Reakt-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 wirklich dünner Wrapper um das Router-Objekt ist. Wir erstellen die BrowserRouter-Funktionalität hier mit <Router history={history}> wo const history = createBrowserHistory();.

16
Peter Berg

Ich würde vorschlagen, das hervorragende react-router-ga - Paket zu verwenden, das extrem leicht und einfach zu konfigurieren ist, insbesondere wenn der Wrapper BrowserRouter verwendet wird.

Importieren Sie die Komponente:

import Analytics from 'react-router-ga';

Dann fügen Sie einfach den <Analytics> in Ihre BrowserRouter ein:

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

Legen Sie zunächst in Ihrer index.js-Funktion onUpdate fest, um ga aufzurufen

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

Gehen Sie immer mit dem empfohlenen Weg der Bibliothek

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;
3
Paras

Wenn Sie 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 ./verfolgung.es6

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

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

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

0
Jöcker

hier ist eine einfachste Möglichkeit, alle Pfade mit einigen Workarounds zu verfolgen:

npm i --save history react-ga

eine Datei erstellen 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 an dem Ort, an dem Ihre Router eingestellt ist.

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

0
fsilva

Ich empfehle die Verwendung der Segment-Analysebibliothek und das Befolgen der React-Kurzanleitung , um Seitenaufrufe mithilfe der rea-router - Bibliothek zu verfolgen. Sie können zulassen, dass die Komponente <Route /> bei der Wiedergabe der Seite verarbeitet wird, und verwenden Sie componentDidMount, um page-Aufrufe aufzurufen. Das folgende Beispiel zeigt eine Möglichkeit, dies zu tun:

    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 Umschalten eines Switches ein- und ausschalten, wenn Sie mehrere Analysetools ausprobieren möchten (wir unterstützen mehr als 250 Ziele), ohne zusätzlichen Code schreiben zu müssen. ????

0
William

grundlegende Reag-ga-Implementierung mit Ihren 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