问题标签 [react-ga]

我正在尝试使用react-ga在路线更改时需要触发的库来实现 Google Analytics。我在 App.js 中有以下设置：

当我在整个应用程序中单击 a 时NavLink，路线会更改并加载适当的组件，但该history.listen()功能永远不会触发。但是，如果我使用浏览器的后退/前进功能，它会触发。

如何收听由 a 触发的路由更改NavLink？

编辑：在这里进行进一步讨论：https ://github.com/react-ga/react-ga/issues/122#issuecomment-316427527

我正在尝试将react-ga添加到 Rails 5 API 和 React-Redux 应用程序。我已按照文档中概述的步骤进行操作，启用调试模式后，事件会记录在控制台中，但 Google Analytics（分析）未收到任何跟踪信息。我很好奇这里是否有人对潜在问题有任何想法。我的 index.js 文件包含在下面 - 请注意，我在此处发布之前从代码中删除了我的实际 UID。谢谢！

客户端/src/index.js

由于我的一些逻辑是前端（页面浏览量）和一些面向服务器端的（在用户做一些事情后拍摄的异步事件，并不总是“点击”某事）我正在尝试将前端和服务器的报告结合到谷歌分析边。

前端报告使用 React.GA，后端使用 Google Universal-analytics npm 包。

在设置 userId 感知视图并打开会话合并之后，我正在使用自定义 userId 的文档。在前端，我将其设置为：

在后端我报告：

但谷歌分析仍然向我显示这个错误

网页浏览命中必须先于事件命中，以便事件命中包含触发它们的页面。如果事件命中之前没有浏览量，则 Google Analytics（分析）没有事件命中的页面，因此它们的页面是（未设置）。

并且所有事件都显示为未设置页面

先前的研究：类似的问题，比如这个问题要么已经过时，要么已经重复了我已经做过的步骤

关于我错过了什么的任何线索？谢谢

我正在使用React-GA，它按预期工作，但我需要将用户电子邮件放入事件跟踪中：

我在示例中看到了这一点：

我有每个用户的电子邮件作为字符串。我最好把它放在请求中的哪个位置？

是否有使用 javascript 检索给定 GTM 代码的 Google Analytics（分析）“网络资产 ID”的方法？

我在页面的 HEAD 中包含了 GTM 的代码段，Google Tag Assistant 扩展程序可以正确看到这些标签，包括“Web Property Id”（UA-XXXXX-XX）。我正在使用ReactGA模块发送 GA 事件，我需要“Web Property Id”来初始化它。

如果我复制它以像这样初始化模块；

它工作正常，但我更愿意动态地检索它：我已经映射了 GTM 代码，如果我可以从 GTM 代码中检索它们，我看不出有任何理由对网络资产 ID 做同样的事情。

我通过以下方式使用 React Router 设置了 React-ga：

如果我已经在页面上并访问另一条路径，我会在控制台上看到以下内容：

但是，如果我第一次访问该页面（通过单击链接或直接在浏览器上输入路径），我在控制台上什么也得不到。

为了计算第一次访问，我是否缺少任何步骤？

我正在尝试将 Google Analytics 添加到 React Web 应用程序。

我知道如何在 HTML/CSS/JS 网站中做到这一点，并且我也将它集成到了 AngularJS 应用程序中。但是，当涉及到反应时，我不太确定如何去做。

使用 HTML/CSS/JS，我刚刚将它添加到每个页面。

我对 AngularJS 所做的是将 GTM 和 GA 脚本添加到 index.html 并将 UA 标签添加到 HTML div（和按钮）以获取点击。

我怎样才能用 React 做到这一点？

请帮忙！

我react-ga在我的应用程序中使用，一切正常，但我想更改每个设备的客户端 ID。这就是我初始化 react-ga的方式。

通常在js中我们这样做

我如何在 react-ga 中更改客户端 ID

我对谷歌分析套件相当陌生，目前正在尝试将谷歌优化集成到一个反应应用程序中进行 A/B 测试。

我已经到了在所需网页上显示变体更改的地步，但仅在预览模式下，并且对于如何继续在实时站点上查看变体更改​​感到困惑。

至今：

• 谷歌优化脚本安装在应用程序中

  <style>.async-hide { opacity: 0 !important} </style> <script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date; h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer',4000, {'GTM-XXXXXXX':true});</script>

• 使用 ReactGA 设置 ga 跟踪

• GTM 已设置并正在触发跟踪代码

• 在自定义激活事件上触发谷歌优化实验并使用 dataLayer 推送新事件

  const initializeReactGa = () => { console.log('called to initialize react ga'); ReactGA.initialize(config.gaTag) ReactGA.ga('require', config.optimizeTag); ReactGA.pageview(window.location.pathname + window.location.search); }

  const googleOptimizeLoader = () => { console.log('called google optimize loader'); if(window.dataLayer) { window.dataLayer.push({'event': 'optimize.activate'}) } }

问题

• 无法在实时站点中看到变体更改（未运行预览）

任何帮助表示赞赏。

TIA

奈伊尔

[解决了]

能够确定问题与设置无关。问题是谷歌优化的 cookie 管理无法设置过期所需的 cookie localhost:3000，而是指向 的自定义域localhost，类似于XXXX.local:3000.

我需要使用谷歌分析集成我的反应应用程序。我发现 react-ga 库看起来可靠且“易于”使用。但我过去没有使用谷歌分析，我遇到了一些困难。首先，我在 react-ga github 项目的演示页面中使用 withTracker 组件，然后在我的路由器中，我用这个包装器包装了我的主页组件。我需要做一个非常简单的任务，但我找不到如何做。我需要跟踪访问主页的访问者数量。withTracker 组件是这样的：

我的主页是这样的：

你能帮我解决这个问题吗？非常感谢