反应路由器浏览器路由器历史记录推送和Google Analytics（分析）

Question

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

我使用React Router及其BrowserRouter组件在this.props.history.push(`#${value}`);和withRouter的帮助下成功地更新了URL路由，从而更新了路由。但是Google Analytics（分析）似乎看不出有什么区别...网站位于此链接上如果您要检查行为，请执行以下操作： http://upscale-technology.com

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