Question

我有一个标准的React项目，并且正在使用Google跟踪代码管理器在页面上加载分析数据。我在index.html的头中有Google跟踪代码管理器。我有一些代码可以从window.ga对象中检索clientId，然后将其填充到状态为“ gaClientId”的组件之一上的状态字段中。我有一个检索clientId并在componentDidMount（）中调用的方法。由于某些奇怪的原因，这在Chrome和IE中可以正常工作，但在Firefox中却无法正常工作。不完全确定问题是什么。我已检查以确保Firefox不会阻止跟踪器，并且在控制台中注意到，如果我console.log（window.ga），则在加载Google跟踪代码管理器之前会收到未定义的消息。不知道那是问题所在。这是我的方法：

getGAClientId() {
try {
  const tracker = ga.getAll()[0];
  let clientId = tracker.get("clientId");
  this.setState({ gaClientId: clientId });
} catch (e) {
  return null;
}

}

这是我在组件中的状态：

this.state = {
    firstname: '',
    lastname: '',
    email: '',
    gaClientId: ''  
};

这被设置为如下所示的隐藏表单字段的值：

<input type="hidden" value="this.state.gaClientId" name="gaClientId" />

这是我的index.html的标题，只是为了向您展示：

<head>
<!-- Google Tag Manager -->
<script>
  (function(w, d, s, l, i) {
    w[l] = w[l] || [];
    w[l].push({
      "gtm.start": new Date().getTime(),
      event: "gtm.js"
    });
    var f = d.getElementsByTagName(s)[0],
      j = d.createElement(s),
      dl = l != "dataLayer" ? "&l=" + l : "";
    j.async = true;
    j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
    f.parentNode.insertBefore(j, f);
  })(window, document, "script", "dataLayer", "GTM-xxxxxxx");
</script>
<!-- End Google Tag Manager -->
</head>

我们对此提供了任何帮助。谢谢！

Answer 1

想通了！我需要在我的componentDidMount中的getGaClientId（）调用中添加setTimeout（）。我刚刚将代码更新为以下内容以对其进行修复。

componentDidMount() {
  setTimeout(() => {
    this.getGAClientId();
  }, 2000);
}

我猜是从关闭Google Analytics（分析）加载到调用我的方法的加载顺序。

在React中使用Google跟踪代码管理器时，Firefox中的Window.ga未定义

1 个答案: