Question

我在github页面上托管了我的投资组合（目前仍在开发中）。它只是一个包含静态内容的Web应用程序。我需要将Google Analytics添加到我的投资组合中并获取访问次数（主要是为了熟悉该过程）。我找到了react-ga模块，可用于在React Apps（使用create-react-app创建）上配置Google Analytics。

并遵循this教程并对其进行配置和托管。我使用测试流量检查了网站，但Google Analytics信息中心没有更新。可能是这样的情况？它应该按照教程工作。由于我是 Google Analytics 的新手，我很难弄清楚这个问题。

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

不幸的是onUpdate was removed in React Router v4，这意味着您的$matches = DB::table('log')->where('match_id', '=', $match->match_id)->get(); @foreach ($matches as $match) {{ $match->authid }} {{ $match->message }}<br /> @endforeach`函数永远不会触发。

在react-ga文档中there's an example from Julia Giu已经包含在这个场景中，涉及将您的应用程序包装在HoC中。

Answer 2

如果您有兴趣跟踪页面访问（以及以后的用户行为），建议您使用细分分析库，并按照我们的React quickstart guide使用react-router库跟踪页面调用。您可以允许<Route />组件在页面呈现时进行处理，并使用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个目的地），而无需编写任何其他代码，则可以使用细分功能通过切换开关来打开和关闭不同的目的地。

React应用上的Google Analytics不起作用

2 个答案: