如何在使用react router Redirect切换页面时获取Google Analytics url参数信息

Question

我正在使用重定向转到我网站上的最后一页。在这个重定向中，我给它提供了一堆url参数，告诉我用户到目前为止做了什么。

问题是，当我添加谷歌分析时，它没有发现任何我希望能够收集数据的参数。以下是index.js:中的代码

import Analytics from 'react-router-ga';
import ReactGA from 'react-ga';
ReactGA.initialize('UA-11111111111-1');
ReactGA.pageview(window.location.pathname + window.location.search);
const allGiftsPage = () => { return ( <Results quizType="allgifts" title="All Gifts" /> )}
const popularGiftsPage = () => { return ( <Results quizType="populargifts" title="Popular Gifts" /> )}
const quizResultsPage = () => { return ( <Results title="Results" /> )}
ReactDOM.render(
<Fragment>
<title>Find Their Gifts</title>
<BrowserRouter>
<Analytics id='UA-111111111-1'>
<Route exact path="/" component={App}></Route>
<Route path="/results" component={quizResultsPage}></Route>
<Route path="/allgifts" component={allGiftsPage}></Route>
<Route path="/populargifts" component={popularGiftsPage}></Route>
</Analytics>
</BrowserRouter>
</Fragment>
, document.getElementById('root')
);

这是调用重定向的代码：

<Redirect to={`/results?`+
`quizType=romanticquiz` +
`&age=${this.state.age}`+
`&gender=${this.state.gender}`+
`&color=${this.state.color}`+
`&vacation=${this.state.vacation}`+
`&word=${this.state.word}`+
`&prison=${this.state.prison}`
}

在Google Analytics中，使用所有这些参数访问此页面的用户只会显示"/results"，但如果您在结果页面上刷新，您将获得包含所有参数的完整url。

有没有一种好的方法可以让我在不重新修改大部分代码的情况下实现这个功能？

谢谢！

Answer 1

首先，不确定为什么要使用react-ga和react-router-ga。

本质上，react ga包非常灵活，react router ga包实际上只是一个简单的组件。

让我们看看为什么没有传递参数：https://github.com/fknussel/react-router-ga/blob/master/index.js#L53

第53行：window.ga('set', 'page', location.pathname);

如果你只是想让它起作用，那么将其更改为包括URL的其他部分就可以了。请参见位置对象上的参考。

另一个解决方案是使用react ga解决方案与路由器一起使用：

https://github.com/react-ga/react-ga/blob/master/demo/app/withTracker.jsx