Мне нравится, как Mark Thomas MГјller предлагает здесь :
В Вашем 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>
)
}
}
Короткий, масштабируемый и простой:)
вот самый простой способ отследить все пути с некоторой работой arounds:
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
Ссылки:
Я предлагаю пользоваться библиотекой аналитики Сегмента и следовать эти , Реагируют руководство по быстрому началу работы для отслеживания вызовов страницы с помощью реагировать-маршрутизатор библиотека. Можно позволить <Route />
компонент обрабатывать когда рендеринг страницы и использование componentDidMount
для вызова page
вызовы. Пример ниже показывает один способ, которым Вы могли сделать это:
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>
);
}
}
I’m специалист по обслуживанию https://github.com/segmentio/analytics-react. С Сегментом, you’ll быть в состоянии включить и выключить различные места назначения зеркальным отражением переключателя, если Вы интересуетесь попыткой нескольких инструментов аналитики (мы поддерживаем более чем 250 + места назначения), не имея необходимость писать любой дополнительный код. рџ™‚