React Router BrowserRouter 历史推送和谷歌分析答案

【问题标题】：React Router BrowserRouter History Push & Google AnalyticsReact Router BrowserRouter 历史推送和谷歌分析
【发布时间】：2019-01-03 22:46:12
【问题描述】：

我有一个轮播组件，我想更改 URL，以便谷歌分析可以看到用户执行了哪些步骤（无需重新加载页面）。

我使用 React Router 及其 BrowserRouter 组件在 this.props.history.push(`#${value}`); 和 withRouter 的帮助下更新路由，这成功更新了 URL 路由。但谷歌分析似乎没有看到区别......网站在这个链接如果你想检查行为： http://upscale-technology.com

【问题讨论】：

GA 本身不会在历史推送中触发任何命中。如果有历史推送，那么您需要通过在其上放置触发器来触发综合浏览量。
在您的帮助下，我找到了这个模块，我认为它有望完成这项工作：github.com/nfl/react-metrics！非常感谢！

标签： reactjs google-analytics react-router-v4

【解决方案1】：

通常，您的 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]) 函数的地方要小心。如果您不小心，它可能会在重新渲染时触发。这意味着您会在指标中获得错误的页面浏览量，从而扭曲您的分析。

【讨论】：

// Whenever you want to log anything to Google Analytics, use the below 错过了一些重要的事情，IMO，标准功能是当路由器更改 history.location 时 - 所以这个必须是自动的，而不是手动调用。