on React应用程序不起作用

Question

我在github页面上托管了我的投资组合(目前还在开发中)。它只是一个带有静态内容的web应用程序。我需要将添加到我的投资组合中，并获得访问次数(主要是为了熟悉这个过程)。我发现了反应-加模块，它可以在React上配置Google (它是用created创建的)。

并遵循这教程并对其进行配置和托管。我用测试流量检查了这个站点，但是Google仪表板没有更新。可能是什么案子？它应该按照教程工作。因为我是谷歌分析的新手，所以我很难弄清楚这个问题。

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

Answer 1

反应v16.8或更高

可以在useEffect函数中生成页面视图；withRouter用于在路由更改时注入支持：

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);

在作出反应之前

您需要在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;

Answer 2

不幸的是，在React路由器v4中被删除，这意味着您的fireTracking函数永远不会触发。

在react-ga文档中，包含了用于此场景的朱莉娅·朱有个例子，其中涉及到将应用程序包装在HoC中。

Answer 3

如果您对跟踪页面访问(以及接下来的用户行为)感兴趣，我建议使用分段分析库并跟踪我们的反应快速启动指南使用反应路由器库跟踪页面调用。您可以允许组件在页面呈现时处理，并使用componentDidMount调用page调用。下面的示例展示了这样做的一种方法：

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

export default App;

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

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

我是https://github.com/segmentio/analytics-react的维护者。使用分段，如果您对尝试多个分析工具(我们支持250+目的地)感兴趣，就可以通过开关的翻转切换不同的目标，而无需编写任何额外的代码。