React Router BrowserRouter 历史推送和 Google Analytics

Question

我有一个轮播组件，我想更改URL，以便Google Analytics可以查看用户到达了哪些步骤（无需重新加载页面）。

我使用React Router和它的BrowserRouter组件来更新路由，使用this.props.history.push(`#${value}`);和withRouter成功更新了URL路由。但是，Google Analytics似乎没有看到任何区别...如果您想要检查行为，请访问以下网站链接：http://upscale-technology.com

- FlyingZipper

---

GA不会在历史记录推送时自动触发任何数据。如果有历史记录推送，您需要在相同的位置放置一个触发器来触发页面浏览量。 - Tushar

在您的帮助下，我找到了这个模块，我认为它有望完成工作：https://github.com/nfl/react-metrics！非常感谢！ - FlyingZipper

Answer 1

通常情况下，当HTML文件加载时，您的Google Analytics详细信息会添加到触发页面视图的HTML文件中。当您访问同一网站的另一个页面并且已经实现了Google Analytics，它会记录新页面。

在单页应用程序中，路由是在客户端上处理的，而不需要重新加载页面。您需要找到一种方法来让Google Analytics知道当执行某个操作时应记录页面视图。这可能是点击事件、状态更改或路由更改。由您决定。

为了实现此目的，可以使用React-GA库。以下是使用方式。

// Import it at the top of the file
import ReactGA from 'react-ga';

// Initialize it once, e.g. in your componentDidMount for example.
ReactGA.initialize('UA-000000-01');

// Whenever you want to log anything to Google Analytics, use the below. 
ReactGA.pageview('/carousel/#1');

注意：
在实现.pageview([url])函数时要小心。如果不小心，它可能会在重新渲染时被触发。这意味着您的分析数据会出现错误的页面浏览次数，从而影响您的分析结果。

- Roy Scheffers

---

// 每当您想要将任何内容记录到Google Analytics时，请使用以下内容。在我看来，缺少了一些重要的东西，标准功能是当路由器更改history.location时——因此，这个必须是自动的，而不是手动调用。 - yves amsellem