带有React和React Router的Google Analytics(分析) [英] Google Analytics with react and react router
问题描述
我一直在尝试将Google Analytics(分析)集成到我的react应用程序中,并且使用了
I have been trying to integrate Google analytics in my react app and i used every way mentioned on this thread and all solutions are failing. Below are the methods i tried and the corresponding error i am getting. Hope someone can help
import React, { Fragment } from 'react';
import store from './Store';
import { Router, Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import Navbar from './components/layout/Navbar';
import Login from './components/auth/Login';
import Footer from './components/layout/Footer';
import MobileMenu from './components/layout/MobileMenu';
import Tutorial from './components/layout/Tutorial';
import ReactGA from 'react-ga';
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
ReactGA.initialize('G-11111111');
history.listen((location, action) => {
ReactGA.pageview(location.pathname + location.search);
console.log(location.pathname);
});
const App = () => {
return (
<div className="App">
<Provider store={store}>
<MuiThemeProvider theme={theme}>
<Router history={history}>
<Fragment>
<Navbar />
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/tutorial" component={Tutorial} />
</Switch>
<MobileMenu />
<Footer />
</Fragment>
</Router>
</MuiThemeProvider>
</Provider>
</div>
);
};
export default App;
第一页正常加载,但是如果我单击交换机上的任何链接,则会得到空白页和以下警告
The first page loads normally but if i click on any link from my Switch i get a blank page and the following warning
react_devtools_backend.js:2450 [react-ga] path is required in .pageview()
我尝试了钩子的第二种方法,我得到了同样的错误
Second method i tried with hooks i get same error
import React, { Fragment, useEffect } from 'react';
import store from './Store';
import { Router, Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import Navbar from './components/layout/Navbar';
import Login from './components/auth/Login';
import Footer from './components/layout/Footer';
import MobileMenu from './components/layout/MobileMenu';
import Tutorial from './components/layout/Tutorial';
import ReactGA from 'react-ga';
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
ReactGA.initialize('G-11111111');
history.listen((location, action) => {
ReactGA.pageview(location.pathname + location.search);
});
const App = () => {
useEffect(() => {
ReactGA.pageview(window.location.pathname + window.location.search);
}, []);
return (
<div className="App">
<Provider store={store}>
<MuiThemeProvider theme={theme}>
<Router history={history}>
<Fragment>
<Navbar />
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/tutorial" component={Tutorial} />
</Switch>
<MobileMenu />
<Footer />
</Fragment>
</Router>
</MuiThemeProvider>
</Provider>
</div>
);
};
export default App;
我尝试使用useLocation()且没有历史记录的第三种方式
Third way i tried using useLocation() and no history
import React, { Fragment, useEffect } from 'react';
import store from './Store';
import {
BrowserRouter as Router,
Route,
Switch,
useLocation
} from 'react-router-dom';
import { Provider } from 'react-redux';
import Navbar from './components/layout/Navbar';
import Login from './components/auth/Login';
import Footer from './components/layout/Footer';
import MobileMenu from './components/layout/MobileMenu';
import Tutorial from './components/layout/Tutorial';
import ReactGA from 'react-ga';
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
ReactGA.initialize('G-11111111');
const App = () => {
const location = useLocation();
// Fired on every route change
useEffect(() => {
ReactGA.pageview(location.pathname + location.search);
}, [location]);
return (
<div className="App">
<Provider store={store}>
<MuiThemeProvider theme={theme}>
<Router history={history}>
<Fragment>
<Navbar />
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/tutorial" component={Tutorial} />
</Switch>
<MobileMenu />
<Footer />
</Fragment>
</Router>
</MuiThemeProvider>
</Provider>
</div>
);
};
export default App;
我收到以下错误
TypeError: Cannot read property 'location' of undefined
推荐答案
最有可能取决于您是否使用Google Analytics 4 Property ID(G-XXXXXXXX),而有问题的React Analytics软件包适用于Universal Analytics.我建议您创建一个Universal Analytics属性(如下图所示),并使用相对标识符UA-XXXXXXX-X:
Most likely it depends on whether you are using a Google Analytics 4 Property ID (G-XXXXXXXX), while the React Analytics package in question works for Universal Analytics. I suggest you create a Universal Analytics Property (as shown in following image) and use the relative identifier UA-XXXXXXX-X:
这篇关于带有React和React Router的Google Analytics(分析)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!