Google React JS 站点上的分析输出不正确的数据（会话中断？）

Question

我们有一个网站，其中大部分内容由 Wordpress 管理，但是当用户导航到搜索页面（用户搜索产品）时，它由 React JS 处理。

它们都在同一个域中，因此用户永远不会知道他们正在与两个不同的应用程序交互。

Google 但是，网站上的分析似乎无法正确识别会话。它将站点的入口（登陆页面）记录为具有相当长 URL 的搜索页面：

像这样的着陆页有数千个，而且网站是新网站，所以不可能所有流量都来自外部链接
所有这些会话的引用路径都是“（未设置）”
过滤内部 IP 地址
流量来自各种 sources/mediums，表明会话以某种方式中断（下面的屏幕截图）

目前，GA 设置了 GTM。我尝试 using this 在 React 中触发 GTM 标签。

还尝试使 GTM 中的 GA 标记在浏览器历史记录更改时触发，而不是在页面浏览时触发（在 React 中触发历史更改，在 Wordpress 中触发正常页面浏览）。但是这些修改仍然存在问题。

请注意，这些会话并不特定于任何一种浏览器：

Answer 1

您遇到的问题源于搜索时的事实，您正在切换入口点并将页面硬刷新到 React 应用程序。即使域似乎没有改变，它仍然被浏览器视为新的页面加载，因此在您的分析中显示为这样，如此请求所示：

你还没有真正告诉你是否在你的应用程序中使用了 react-router（我假设你有不同的路径），解决这个问题的方法是使用 react-ga而不是默认的 GA 脚本并利用 react-router 的 onUpdate 回调。

首先使用您的 GA id 导入并初始化模块：

import ReactGA from 'react-ga'

ReactGA.initialize('UA-000000-01')

然后在您的路由配置中，在 <Router> 上添加 onUpdate 属性并创建一个仅使用路径名调用 google 分析的方法，这样您不会以仪表板中令人讨厌的所有查询参数结束。

const onUpdate = () => {
  ReactGA.set({ page: window.location.pathname })
  ReactGA.pageview(window.location.pathname)
}

<Router onUpdate={onUpdate}>
  ...
</Router>

不过，如果您想跟踪用户搜索，我建议改用事件，并在搜索时执行类似以下操作：

ReactGA.event({
  category: 'User',
  action: 'Search',
  value: 'your formatted search value'
})

它还可以让您以任意方式设置搜索值的格式，这对您来说比查询参数更具可读性。

Google React JS 站点上的分析输出不正确的数据（会话中断？）

Google Analytics on React JS site outputting incorrect data (broken sessions?)

javascript

google-analytics

google-tag-manager

reactjs