Как сделать запрос API отчетов Google Analytics из реагирующего компонента? - PullRequest
Новая
       12

Как сделать запрос API отчетов Google Analytics из реагирующего компонента?

0 голосов
/ 07 ноября 2019

Я пытаюсь создать аналитическую панель с помощью React / Gatsby и API отчетов Google Analytics v4. Я включил скрипты в свой компонент макета из руководства по быстрому запуску google api .

Я знаю, что он загружается на странице, потому что в консоли инструментов разработчика браузера я могу получить доступ к window.gapi икнопка входа в Google отображается правильно. Но в компоненте моей страницы есть хук useEffect. Когда компонент монтируется, я хочу сделать запрос, используя window.gapi.client.request(...).

Я попытался обернуть запрос в это: if (typeof window !== undefined) { ... } согласно документам Гэтсби

Layout.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>

Index.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'))
    }
  }

Я ожидаю, что у меня будет доступ к window.gapi из ловушки useEffect, но я получаю TypeError: window.gapi is undefined.

...