在 Reactjs 中异步加载谷歌分析嵌入 api 脚本

Posted 2023-02-19

【中文标题】在 Reactjs 中异步加载谷歌分析嵌入 api 脚本

【英文标题】：load google analytics embed api script asynchronously in Reactjs

【发布时间】：2017-08-03 17:35:38

【问题描述】：

首先，我想说的是，我对反应还很陌生。 我的目标是构建第三方自定义 Google 分析仪表板，但是我遇到了一些问题，无法在 google 上找到合适的答案。

我正在关注本教程Embed API third party visualizations

我显然想在 react 中编写演示代码。在这样做时，我已经在第一步遇到了麻烦。在尝试在反应中运行此代码时，我不断收到消息“gapi 未定义”。这是（经过大量谷歌搜索后）因为第一步中的脚本从未加载，这意味着库从未加载，这就是为什么其余代码不知道 gapi 是什么的原因。

我认为这是因为我必须异步加载脚本..我只是不知道如何以及在哪里执行它。 我是否在 componentDidMount 中执行此操作？或者有什么特殊的方法可以做到这一点？

我得到的唯一 google 结果使用了 google maps api 的示例，这与我尝试完成的不同。

一旦我加载了这个库，我就可以继续构建其余部分。

提前感谢您的帮助！

【问题讨论】：

我解决了我的问题，如here 所述。

【参考方案1】：

我知道这已经一岁了，但希望这对其他人有所帮助。如果您在 react 应用程序之外加载 google api 库，则需要通过窗口访问它。

示例： window.gapi.analytics.auth.authorize( container: 'auth-button', clientid: CLIENT_ID, );