谷歌分析僅在頁面刷新時更新頁面視圖

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 不會發生在您輸入的每條路線上。