如何解决带有React和React Router的Google Analytics分析
我一直试图将Google Analytics(分析)集成到我的react应用程序中,并且我使用了此thread中提到的所有方法,但所有解决方案都失败了。以下是我尝试的方法以及我遇到的相应错误。希望有人能帮忙
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;
第一页正常加载,但是如果我单击交换机上的任何链接,则会得到空白页和以下警告
react_devtools_backend.js:2450 [react-ga] path is required in .pageview()
我尝试了钩子的第二种方法,我得到了同样的错误
import React,{ Fragment,useEffect } from 'react';
import store from './Store';
import { Router,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()且没有历史记录的第三种方式
import React,useEffect } from 'react';
import store from './Store';
import {
BrowserRouter as Router,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属性ID(G-XXXXXXXX),而有问题的React Analytics软件包适用于Universal Analytics。建议您创建一个Universal Analytics属性(如下图所示),并使用相对标识符UA-XXXXXXX-X:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。