reactjs - React Router BrowserRouter History Push & Google Analytics

Question

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

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

Answer 1

通常，您的 Google Analytics(分析)详细信息会添加到 HTML 文件中，在加载该文件时触发页面 View 。当您访问同一网站的另一个页面并且在那里实现 Google Analytics 时，它将记录新页面。

在单页面应用程序中，路由在客户端上处理，无需重新加载页面。您正在寻找的是一种让 Google Analytics 知道它应该在采取特定操作时记录页面 View 的方法。它可以是点击事件、状态更改或路线更改。这取决于你。

要实现此目的，您可以使用 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]) 函数的位置。如果您不小心，它可能会在重新渲染时触发。这意味着您的指标中会出现错误的页面浏览量，从而影响您的分析。