Question

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

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

Answer 1

对于单页应用，您可以跟踪docs中提供的“虚拟”综合浏览量：

页面更改时，请执行

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

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

ga('send', 'pageview');

我建议你使用类似react-ga之类的东西来做得更方便，它有像

这样的功能

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

Answer 2

你需要使用像这样的路线来查找所有路径，

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

然后使用全球Google Analytics（ga）方法（可通过窗口对象访问）使用window.location.pathname

发送综合浏览量

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

注意：您需要将从Google Analytics中获取的跟踪代码放在主HTML（index.html）中，以便全部工作。

Answer 3

或者，您可以侦听createBrowserHistory的更改并发送综合浏览量事件。

import { createBrowserHistory } from 'history'

const history = createBrowserHistory()

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

Answer 4

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

1-在您所有的路线集装箱中，使用 ga 中的 set 命令并更新跟踪器

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

2-在您的所有路径容器中，使用 ga 中的发送命令并更新跟踪器

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

Google Analytics（分析）不建议使用send命令的第二种解决方案

这是因为在跟踪器上未设置通过send命令传递的字段，它们仅适用于当前匹配。如果您的应用程序发送了任何非综合浏览量（例如事件或社交互动），则不更新跟踪器会导致问题，因为这些匹配将与跟踪器创建时具有的页面值相关联。

参考：Google Anaylytics

如何在React上跟踪综合浏览量

4 个答案: