React-Router用にGoogleアナリティクスを設定する方法は？
私は自分の反応サイトでGoogle Analyticsを設定しようとしていますが、いくつかのパッケージに出くわしましたが、どの例も私が例に関して持っているような設定をしていません。誰かがこれに何らかの光を当てることを望んでいた。
私が見ているパッケージは、 react-ga です。
index.jsのrenderメソッドは次のようになります。
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'));
履歴オブジェクトへの参照を保持します。つまり.
import createBrowserHistory from 'history/createBrowserHistory';
var history = createBrowserHistory();
ReactDOM.render((
<Router history={history}>
[...]
次に、各ページビューを記録するリスナーを追加します。 （これは、通常の方法でwindow.gaオブジェクトを既にセットアップしていることを前提としています。）
history.listen(function (location) {
window.ga('set', 'page', location.pathname + location.search);
window.ga('send', 'pageview');
});
Google Analyticsがロードされ、トラッキングIDで初期化されると仮定します。
以下は、<Route>コンポーネントを使用してページビューを追跡する、react-routerバージョン4のソリューションです。
<Route path="/" render={({location}) => {
if (typeof window.ga === 'function') {
window.ga('set', 'page', location.pathname + location.search);
window.ga('send', 'pageview');
}
return null;
}} />
このコンポーネントを<Router>内でレンダリングするだけです（ただし、<Switch>の直接の子としてではありません）。
起こるのは、場所の小道具が変更されるたびに、ページビューを発生させるこのコンポーネントの再レンダリング（実際には何もレンダリングしない）が発生することです。
React Router v4とGoogle Analytics Global Site Tag を使用しています。これは、この記事の執筆時点で推奨されているようです。
そして、ここに私の解決策があります：
react-router-domから withRouter でラップされたコンポーネントを作成します。
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);
ルーター内にコンポーネントを追加するだけです（分析機能はサイトのレンダリングよりも優先されるべきではないため、一致するルートとスイッチコンポーネントの後に理想的だと思います）。
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>
);
述べたように：
withRouterは、レンダリングプロップと同じプロップでルートが変更されるたびにコンポーネントを再レンダリングします
したがって、ルートが変更されると、GoogleAnalyticsコンポーネントが更新され、新しい場所が小道具として受信され、history.actionは新しい履歴アイテムのPushまたはPOPになります履歴をさかのぼって通知する（ページビューをトリガーするべきではないが、componentWillUpdateのifステートメントを調整することができます（componentDidUpdateをthis.props代わりに、しかしどちらが良いかわからない））。
react-router-domのreact-router-4パッケージを使用している場合、次のように処理できることに注意してください。
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>)
}
}
これには、historyパッケージ（npm install history）をインストールする必要があることに注意してください。これはすでにreact-router-domの依存関係であるため、ここではページの重みを追加していません。
注：BrowserRouterコンポーネントを使用して、この方法でgaトラッキングを計測することはできません。 BrowserRouterコンポーネント はRouterオブジェクトの本当に薄いラッパーであるため、これは問題ありません。ここで<Router history={history}> where const history = createBrowserHistory();を使用してBrowserRouter機能を再作成します。
特にBrowserRouterラッパーを使用する場合は、非常に軽量で構成が簡単な優れた react-router-ga パッケージを使用することをお勧めします。
コンポーネントをインポートします。
import Analytics from 'react-router-ga';
次に、BrowserRouter内に<Analytics>を追加します。
<BrowserRouter>
<Analytics id="UA-ANALYTICS-1">
<Switch>
<Route path="/somewhere" component={SomeComponent}/>
</Switch>
</Analytics>
</BrowserRouter>
常にライブラリの推奨方法に従ってください
React-GAのドキュメントには、Reactルーターでの使用を推奨するコミュニティコンポーネントが追加されています。 https://github.com/react-ga/react-ga/wiki/React- Router-v4-withTracker
実装
import withTracker from './withTracker';
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<Route component={withTracker(App, { /* additional attributes */ } )} />
</ConnectedRouter>
</Provider>,
document.getElementById('root'),
);
コード
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;
まず、index.jsでonUpdate関数を設定して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>
);
}
そして、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)};
}
マークトーマスミュラーの提案が気に入っています こちら ：
あなたのindex.js
import ReactGA from 'react-ga'
ReactGA.initialize('YourAnalyticsID')
ReactDOM.render(<App />, document.getElementById('root'))
ルートは次のとおりです。
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>
)
}
}
短く、スケーラブルでシンプル:)
いくつかの回避策を使用してすべてのパスを追跡する最も簡単な方法を次に示します。
npm i --save history react-ga
ファイルを作成する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
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
参照：
ハッシュまたはブラウザの履歴を使用する場合、次のことができます。
import trackingHit from 'tracking';
import { Router, browserHistory } from 'react-router';
browserHistory.listen(trackingHit);
// OR
import { Router, hashHistory } from 'react-router';
hashHistory.listen(trackingHit);
ここで、。/ tracking.es6
export default function(location) {
console.log('New page hit', location.pathname);
// Do your shizzle here
}
セグメント分析ライブラリを使用し、 Reactクイックスタートガイド に従って、 react-router ライブラリを使用してページ呼び出しを追跡することをお勧めします。ページのレンダリング時に<Route />コンポーネントが処理できるようにし、componentDidMountを使用してpage呼び出しを呼び出します。以下の例は、これを行うことができる1つの方法を示しています。
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>
);
}
}
私は https://github.com/segmentio/analytics-react のメンテナーです。セグメントを使用すると、追加のコードを記述することなく、複数の分析ツール（250以上の宛先をサポート）を試すことに興味がある場合、スイッチを切り替えるだけで異なる宛先をオン/オフに切り替えることができます。 ????
index.jsを使用した基本的なreact-gaの実装
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'));