Reactjs React应用程序上的Google Analytics没有'；行不通

我在github页面上托管了我的投资组合（仍在开发中）。它只是一个包含静态内容的web应用程序。我需要将谷歌分析添加到我的投资组合中，并获得访问量（主要是为了熟悉流程）。我找到了一个模块，该模块可用于在React应用程序（使用CreateReact应用程序创建）上配置谷歌分析

并按照教程进行了配置和托管。我用测试流量检查了该网站，但谷歌分析仪表板没有更新。可能是什么情况？它应该根据教程工作。由于我是谷歌分析的新手，我很难理解这个问题

这是我的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;

import React，{Component}来自“React”；
从“/components/Header”导入标题列表；
导入“/App.css”；
从“antd”导入{Layout}；
从“react Router dom”导入{Router，Route，Switch}；
从“历史记录/createBrowserHistory”导入createHistory；
从“react ga”导入ReactGA；
从“/config/Keys”导入密钥；
从“/components/AboutMe”导入AboutMe；
从“/components/Skills”导入技能；
从“/components/Contact”导入联系人；
从“/components/Projects”导入项目；
const{Content}=布局；
ReactGA.initialize（Keys.GOOGLE\u TRACKING\u ID）//唯一的谷歌分析追踪号码
函数fireTracking（）{
pageview（window.location.hash）；
}
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

React v16.8或更高版本 可在

useffect

功能中生成页面视图

withRouter

用于在路线更改时插入道具：

import React，{useffect}来自“React”；
从“react router dom”导入{Switch，Route，withRouter}；
从“react ga”导入ReactGA；
从“/config/Keys”导入密钥；
//唯一的谷歌分析追踪号码
ReactGA.initialize（Keys.GOOGLE\u TRACKING\u ID）；
常量应用=（）=>{
useffect（（）=>{
//此线路将在路线更改时触发
页面视图（window.location.pathname+window.location.search）；
});
返回（/*此处代码*/）；
}
使用路由器（App）导出默认值；

在反应v16.8之前 您需要在componentDidMount和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;

import React，{Component}来自“React”；
从“/components/Header”导入标题列表；
导入“/App.css”；
从“antd”导入{Layout}；
从“react Router dom”导入{Router，Route，Switch}；
从“历史记录/createBrowserHistory”导入createHistory；
从“react ga”导入ReactGA；
从“/config/Keys”导入密钥；
从“/components/AboutMe”导入AboutMe；
从“/components/Skills”导入技能；
从“/components/Contact”导入联系人；
从“/components/Projects”导入项目；
const{Content}=布局；
ReactGA.initialize（Keys.GOOGLE\u TRACKING\u ID）//唯一的谷歌分析追踪号码
类应用程序扩展组件{
componentDidMount=（）=>ReactGA.pageview（window.location.pathname+window.location.search）；
componentDidUpdate=（）=>ReactGA.pageview（window.location.pathname+window.location.search）；
render（）{
返回(
);
}
}
导出默认应用程序；

不幸的是，这意味着您的

fireTracking

功能永远不会启动

---

在react ga文档中，包含的正是这个场景，其中涉及到将应用程序包装到一个HoC中。

如果您对跟踪页面访问（以及沿途的用户行为）感兴趣，我建议使用Segment analytics库并遵循我们的步骤，使用该库跟踪页面调用。您可以允许组件在页面呈现时进行处理，并使用

componentDidMount

调用

page

调用。下面的示例显示了一种方法：

const App = () => (
  <div>
    <Switch>
       <Route exact path="/" component={Home} />
       <Route path="/about" component={About} />
    </Switch>
  </div>
);

export default App;

const-App=（）=>(
);
导出默认应用程序；

导出默认类主扩展组件{
componentDidMount（）{
window.analytics.page（“主页”）；
}
render（）{
返回(
主页。
);
}
}

---

我是这个世界的维护者。使用Segment，如果您有兴趣尝试多个分析工具（我们支持超过250个目的地），您可以通过翻转开关打开和关闭不同的目的地，而无需编写任何其他代码。您使用的是什么版本的react路由器？版本4<代码>“react router dom”：“^4.2.2”@ztadic91为什么删除发布的答案？关于这个问题有什么帮助吗？我们可以把这个GA代码放在多个组件上还是放在一个特定的页面上？如果你把代码放在多个组件上，它会工作的。但是，最好在父组件上编写代码，而不需要在其他组件上复制代码。

export default class Home extends Component {
  componentDidMount() {
    window.analytics.page('Home');
  }

  render() {
    return (
      <h1>
        Home page.
      </h1>
    );
  }
}