In my react
app I have some pages:
I need to track users activity with Google Analytics. I googled react-ga and it's just fine. But with this library I have to initialize my GA on every route I use. For example:
Route "/" - main page:
class Main extends Component {
componentDidMount() {
initGA();
}
render() {
return (
<div>
<Component1 />
<Component2 />
</div>
)
}
}
My initGA()
looks like:
import ReactGA from 'react-ga';
export const initGA = () => {
ReactGA.initialize('UA-00000000-1');
ReactGA.pageview(window.location.pathname + window.location.search);
console.log(window.location.pathname + window.location.search);
}
My App class
looks like:
class App extends Component {
render() {
return (
<BrowserRouter>
<div className="App">
<Switch>
<Route exact path="/" component={Main} />
<Route exact path="/signup" component={SignupLayout} />
<Route component={PublicLayout} />
</Switch>
</div>
</BrowserRouter>
);
}
}
In my way of using react-ga
I'm adding initGA()
function on every component which renders on route response. I think it is not right to duplicate initGA()
in every component. Please, guys, how do you use react-ga
? What is right way to use react-ga?
To make it work need to use Router
functionality.
So in App component import { Router } from 'react-router-dom'
. It has to be Router not BrowserRouter.
Then import createHistory from 'history/createBrowserHistory'
const history = createHistory()
ReactGA.initialize('UA-000000-1');
history.listen((location, action) => {
ReactGA.pageview(location.pathname + location.search);
console.log(location.pathname)
});
This code will fire on every route change!
Than give a history attribute to your Router component.
Complete code:
import React, { Component } from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory'
import Main from './components/pages/Main';
import ReactGA from 'react-ga';
const history = createHistory()
ReactGA.initialize('UA-00000000-1');
history.listen((location, action) => {
ReactGA.pageview(location.pathname + location.search);
console.log(location.pathname)
});
class App extends Component {
render() {
return (
<Router history={history}>
<div className="App">
<Switch>
<Route exact path="/" component={Main} />
<Route exact path="/signup" component={SignupLayout} />
<Route component={PublicLayout} />
</Switch>
</div>
</Router>
);
}
}
export default App;