如何使用reach路由器和谷歌分析跟踪react中的页面浏览量

Question

我正在将主干应用程序移植到React应用程序。在主干网应用程序中，我有以下片段

<!-- Begin UA code -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-xxx', 'auto');
// Load plugins
// Rewrite all GA pages with /ra_minisite prefix
ga('require', 'cleanUrlTracker', {
stripQuery: true,
queryDimensionIndex: 1,
urlFieldsFilter: function(fieldsObj, parseUrl) {
fieldsObj.page = '/ra_minisite'+parseUrl(fieldsObj.page).pathname
return fieldsObj;
},
});
ga('require', 'eventTracker');
ga('require', 'maxScrollTracker');
// Customize so WS.com not tracked as outbound link
ga('require', 'outboundLinkTracker');
ga('require', 'socialWidgetTracker');
ga('require', 'urlChangeTracker');
// Commented out so we can call after all API calls are done
// Called from metaManager
// ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<script async src="/autotrack.js"></script>
<!-- end UA code -->

然后在更新元标签后的每个页面上渲染它调用

window.ga('send', 'pageview');

我想我可以把init逻辑放到index.html中，但有什么好的、简单的方法可以把window.ga('send', 'pageview');挂接到reach路由器中，这样当路由更改或更新时，pageview就会被发送到GA？

Answer 1

您可以监听全局历史对象。在您的App.js:中

import { globalHistory } from '@reach/router';
globalHistory.listen(({ location }) => {
window.ga('send', 'pageview');
// or use the new gtag API
window.gtag('config', 'GA_MEASUREMENT_ID', {'page_path': location.pathname});
});

这是最简单的方法，代码量最少，而且与顶部答案中的LocationProvider方法不同，它不会破坏全局navigateAPI。

不幸的是，globalHistory似乎在任何地方都没有记录，所以这是一个很难找到的结果。

Answer 2

您可以手动创建历史对象，使用createHistory函数可以监听该对象的更改。您可以附加一个侦听器并在那里发送一个pageview事件。

示例

import { createHistory, LocationProvider } from '@reach/router';
const history = createHistory(window);
history.listen(() => {
window.ga('send', 'pageview');
});
const App = () => (
<LocationProvider history={history}>
<Routes />
</LocationProvider>
);

Answer 3

您可以从reach路由器使用位置提供商API：

import { Router,createHistory,LocationProvider }from "@reach/router";
import ReactGA from "react-ga";
ReactGA.initialize("UA-103xxxxx-xx");
const history= createHistory(window);
history.listen( window => {
ReactGA.pageview(window.location.pathname+ window.location.search);
console.log('page=>',window.location.pathname);
});

然后在使用它的路线：

<LocationProvider history={history}>
<Router></Router>
</LocationProvider>

这是完整的解决方案。