如何在 React 上跟踪网页浏览量

所以我遇到的问题是我的网站正在使用reactjs，所以它不会重新加载，我需要检测URL上的更改才能将新的网页浏览发送到Google Analytics。以前有人处理过这个问题吗？

编辑：也许我有点不清楚，我使用谷歌标签管理器，我无法控制页面上的代码，但我可以请求数据层。显而易见的解决方案是在页面更改时要求数据层，但由于我想避免这样做，所以我严格询问是否有人知道从 GTM 检测 DOM 上的这种变化的方法。

您需要使用这样的路由查找所有路径，

<Route path="/" component={updateTracking} />
<Switch>
..... //further actual routes
</Switch>

然后使用全局谷歌分析(GA)方法(可通过窗口对象访问)发送网页浏览，使用window.location.pathname

const updateTracking = () => {
window.ga('send', 'pageview', {
page: window.location.pathname
});
}

注意：您需要将从Google Analytics获得的跟踪代码放在主HTML(index.html)中，以便所有内容正常工作。

对于单页应用，您可以跟踪文档中给出的"虚拟"网页浏览量：

当页面更改时，请执行

ga('set', 'page', '/new-page.html');

在此之后，如果您执行"发送"，它将跟踪此页面。

ga('send', 'pageview');

我建议你使用类似 react-ga 的东西来更方便地做到这一点，它具有以下功能：

ReactGA.pageview('/about/contact-us');和ReactGA.modalview('/about/contact-us');

或者，您可以侦听 createBrowserHistory 更改并发送网页浏览事件。

import { createBrowserHistory } from 'history'
const history = createBrowserHistory()
history.listen(() => {
window.ga('send', 'pageview', {
page: window.location.pathname
})
}
)

useLocation钩子是在 5.1.0 中添加的，可以使用：

在您的App.js中，导入以下内容

import React, { useState } from 'react';
import { useLocation } from "react-router-dom";

以下假设您已使用create-react-app或其他某种机制创建了 react 应用程序，以从应用程序中选取GA_IDENV

在环境变量中，确保有：REACT_APP_GA_ID

function initialiseAnalytics() {
const TRACKING_ID = process.env.REACT_APP_GA_ID;
ReactGA.initialize(TRACKING_ID);
}
function usePageTracking() {
const location = useLocation();
const [initialized, setInitialized] = useState(false);
useEffect(() => {
initialiseAnalytics();
setInitialized(true);
}, []);
useEffect(() => {
if (initialized) {
ReactGA.pageview(location.pathname + location.search);
}
}, [initialized, location]);
}

最后，在你的App函数中，调用页面跟踪 -

function App() {
usePageTracking();
// Other Code Goes Here
return (
<div className="App">
<p>Sample Application</p>
</div>
);
}

任何仍在寻找答案的人，就在这里。这是像 React 这样的单页应用程序 (SPA)的预期行为。解决方案是在路线更改时更新跟踪器您可以通过两种方式处理此问题

1-在所有路由容器中使用来自ga的set命令并更新跟踪器

ga('set', 'page', '/new-page.html');

2-在所有路由容器中使用来自ga的发送命令并更新跟踪器

ga('send', 'pageview', '/new-page.html');

谷歌分析不推荐使用发送命令的第二种解决方案

这是因为通过 send 命令传递的字段未在跟踪器上设置，它们仅适用于当前匹配。如果您的应用发送任何非网页浏览点击(例如事件或社交互动)，不更新跟踪链接会导致问题，因为这些点击将与跟踪链接创建时的任何网页值相关联。

参考：谷歌阿纳利特斯

相关内容

最新更新

热门标签：