谷歌分析仅在页面刷新时更新页面视图

Question

我将 react-ga 用于我的谷歌分析，react-router 用于路由，而我的导航栏使用推送来在页面之间传输。 虽然我尝试将其更改为<Link>，但并没有解决问题。

这是我的 app.js 文件的相关部分：

function App() {
  useEffect(() => {
    ReactGA.initialize("<myCode>");
    ReactGA.pageview(window.location.pathname + window.location.search);
  }, []);

  return (
    <div className="App">
      <Router>
        <Switch>
          <Route exact path="/" component={Homepage} />
          <Route path="/register" component={Register} />

当我在浏览器的地址栏中输入地址时，正确的页面将被更新，甚至使用导航栏切换页面然后点击“刷新”。但如果我只通过导航栏移动页面，它将不会更新。

我明白这个问题很可能是因为这行：

ReactGA.pageview(window.location.pathname + window.location.search);

当我在页面之间移动时可能没有执行，但不确定修复它的最佳做法是什么。

这是我导航栏的相关部分：

        <div
          className={styles.navOption}
          onClick={() => {
            this.movePage("/"); // <--- Calls this.props.history.push
          }}

        >
          home
        </div>

Answer 1

您需要将 useEffect 放在您想要分析的每个组件中，而不是放在主应用程序组件中，因为您希望每个模块都有不同的分析， 并且因为在这种情况下 App 组件只渲染一次，所以写的地方不对，所以你写的 useEffect 不会在你输入的每个路由中发生。