React应用上的Google Analytics(分析)不起作用 [英] Google Analytics on React app doesn't work
问题描述
我将我的投资组合(仍在开发中)托管在github页面上。它只是一个包含静态内容的网络应用。而且我需要将Google Analytics(分析)添加到我的投资组合中并获得访问次数(主要是为了熟悉该过程)。我发现了 react-ga 模块,该模块可用于在React Apps上配置Google Analytics(分析) (使用create-react-app创建)。
I hosted my portfolio (which is still under development) on github pages. It's just a web app with static content. And I needed to add Google Analytics to my portfolio and get the number of visits (mainly to get familiar with the process). I found out react-ga module which can be used to configure Google Analytics on React Apps (which created using create-react-app).
然后跟随此教程,并对其进行配置和托管。我用测试流量检查了该网站,但Google Analytics(分析)信息中心没有更新。可能是什么情况?它应该根据教程工作。由于我是 Google Analytics(分析)的新手,所以我很难找出问题所在。
And followed this tutorial and configured it and hosted. And I checked the site with test traffic but Google Analytics dashboard doesn't update. What maybe the case ? It should work according to the tutorial. As I'm new to Google Analytics it's hard for me to figure out the issue.
这是我的 App.js
import React, { Component } from "react";
import HeaderList from "./components/Header";
import "./App.css";
import { Layout } from "antd";
import { Router, Route, Switch } from "react-router-dom";
import createHistory from "history/createBrowserHistory";
import ReactGA from 'react-ga';
import Keys from './config/keys';
import AboutMe from "./components/AboutMe";
import Skills from "./components/Skills";
import Contact from "./components/Contact";
import Projects from "./components/Projects";
const { Content } = Layout;
ReactGA.initialize(Keys.GOOGLE_TRACKING_ID); //Unique Google Analytics tracking number
function fireTracking() {
ReactGA.pageview(window.location.hash);
}
class App extends Component {
render() {
return (
<Router onUpdate={fireTracking} history={createHistory({ basename: process.env.PUBLIC_URL })}>
<div>
<Layout>
<HeaderList />
<Content className="Content">
<div className="RouteContent">
<Switch>
<Route exact path="/" component={AboutMe} />
<Route path="/skills" component={Skills} />
<Route path="/projects" component={Projects} />
<Route path="/Contact" component={Contact} />
</Switch>
</div>
</Content>
</Layout>
</div>
</Router>
);
}
}
export default App;
推荐答案
反应v16.8或更高版本
浏览量可以通过 useEffect
函数生成; withRouter
用于在路线更改时注入道具:
React v16.8 or higher
The pageviews can be generated in a useEffect
function; withRouter
is used to inject props on route changes:
import React, { useEffect } from 'react';
import { Switch, Route, withRouter } from 'react-router-dom';
import ReactGA from 'react-ga';
import Keys from './config/keys';
//Unique Google Analytics tracking number
ReactGA.initialize(Keys.GOOGLE_TRACKING_ID);
const App = () => {
useEffect( () => {
// This line will trigger on a route change
ReactGA.pageview(window.location.pathname + window.location.search);
});
return (/* Code here */);
}
export default withRouter(App);
React v16.8之前的版本
您需要在componentDidMount和componentDidUpdate中生成综合浏览量:
Prior to React v16.8
You need to generate a pageview in componentDidMount and componentDidUpdate:
componentDidMount = () => ReactGA.pageview(window.location.pathname + window.location.search);
componentDidUpdate = () => ReactGA.pageview(window.location.pathname + window.location.search);
因此,最终代码:
import React, { Component } from "react";
import HeaderList from "./components/Header";
import "./App.css";
import { Layout } from "antd";
import { Router, Route, Switch } from "react-router-dom";
import createHistory from "history/createBrowserHistory";
import ReactGA from 'react-ga';
import Keys from './config/keys';
import AboutMe from "./components/AboutMe";
import Skills from "./components/Skills";
import Contact from "./components/Contact";
import Projects from "./components/Projects";
const { Content } = Layout;
ReactGA.initialize(Keys.GOOGLE_TRACKING_ID); //Unique Google Analytics tracking number
class App extends Component {
componentDidMount = () => ReactGA.pageview(window.location.pathname + window.location.search);
componentDidUpdate = () => ReactGA.pageview(window.location.pathname + window.location.search);
render() {
return (
<Router>
<div>
<Layout>
<HeaderList />
<Content className="Content">
<div className="RouteContent">
<Switch>
<Route exact path="/" component={AboutMe} />
<Route path="/skills" component={Skills} />
<Route path="/projects" component={Projects} />
<Route path="/Contact" component={Contact} />
</Switch>
</div>
</Content>
</Layout>
</div>
</Router>
);
}
}
export default App;
这篇关于React应用上的Google Analytics(分析)不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!