javascript - React JS 站点上的 Google Analytics 输出不正确的数据( session 中断？)

Question

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

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

但是，该网站上的 Google Analytics 似乎无法正确识别 session 。它将站点的入口(登录页面)记录为具有相当长 URL 的搜索页面:

• 有成千上万个这样的着陆页，而且该网站是新网站，所以不可能所有流量都来自外部链接
• 所有这些 session 的引用路径都是“(未设置)”
• 过滤内部 IP 地址
• 流量来自各种来源/媒介，表明 session 以某种方式中断(下面的屏幕截图)

目前，GA 是使用 GTM 设置的。我试过 using this在 React 中触发 GTM 标签。

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

请注意，这些 session 并不特定于任何一种浏览器:

Answer 1

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

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

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

import ReactGA from 'react-ga'

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

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

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'
})

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