javascript - 如何从反应组件发出谷歌分析报告 API 请求？

Question

我正在尝试使用 React/Gatsby 和 Google Analytics Reporting API v4 构建分析仪表板。我已经在我的布局组件中包含了来自google api quickstart guide的脚本。

我知道它正在页面上加载，因为在浏览器开发人员工具控制台中我可以访问window.gapi并且谷歌登录按钮正确显示。但是在我的页面组件中，我有一个 useEffect 挂钩。当组件安装时，我想使用window.gapi.client.request(...).

我尝试将请求包装在此：if (typeof window !== undefined) { ... }根据gatsby 文档

布局.js

      <Helmet>
        <meta
          name="google-signin-client_id"
          content="MYCLIENTID"
        />
        <meta
          name="google-signin-scope"
          content="https://www.googleapis.com/auth/analytics.readonly"
        />
        <script src="https://apis.google.com/js/client:platform.js"></script>
      </Helmet>

索引.js

  useEffect(querySuccessfulSubmissions, [])

  function querySuccessfulSubmissions() {
    if (typeof window !== `undefined`) {
      window.gapi.client
        .request({
          path: "/v4/reports:batchGet",
          root: "https://analyticsreporting.googleapis.com/",
          method: "POST",
          body: {
            reportRequests: [
              {
                viewId: "MYVIEWID",
                samplingLevel: "LARGE",
                dateRanges: [
                  {
                    startDate: "365daysAgo",
                    endDate: "yesterday",
                  },
                ],
                metrics: [
                  {
                    expression: `ga:goal1Completions`,
                    alias: "",
                  },
                ],
                dimensions: [
                  {
                    name: "ga:yearMonth",
                  },
                ],
              },
            ],
          },
        })
        .then(response => console.log('success'))
    }
  }

我希望可以从 useEffect 挂钩访问 window.gapi，但我得到了TypeError: window.gapi is undefined.

标签： javascriptreactjsgoogle-analytics-apigatsbyuse-effect

Answer 1

您可以尝试使用该setInterval函数查看何时window.gapi加载，然后在加载后将其清除：

useEffect(window.interval = setInterval(waitForAPI, 1000), [])

waitForAPI() {
    if (window.gapi.client.request !== undefined) {
        querySuccessfulSubmissions();
        clearInterval( window.interval );
    }
}