任何人都可以帮我重新创建这个完全相同的请求，但使用 GA4 格式而不是当前使用的 UA ID 方法吗？

问题描述 投票：0回答：2

这是使用调用 V3 API 的 UA 方法发出的请求，包装在誓言库中进行反应。 但它从 2023 年 6 月开始被弃用，我不知道如何在 GA4 v1 Beta API（又名 Google Analytics Data API）中重新创建它。 我尝试过遵循谷歌的文档，但我一生都无法理解如何提出请求......

const login = useGoogleLogin({
    onSuccess: async response => {
        try {
             console.log(response.access_token);
            const res = await axios.get(`https://www.googleapis.com/analytics/v3/data/realtime?ids=ga:${gaID}&metrics=rt:activeUsers&access_token=${response.access_token}`, {
                headers: {
                    "authorization": `Bearer ${response.access_token}`
                }
                
                
            })
            if (res.data.rows == null) {
                res.data.rows = 0
            }
            reponseGlobal = response
           
            setactiveUsers(res.data.rows);
            setloggedin(true);
            const interval = setInterval(function() {
                fetch ();
              }, 5000);
          
        } catch (err) {
            console.log(err)
        }
    },
    scope: 'https://www.googleapis.com/auth/analytics.readonly'
});
javascript reactjs axios google-analytics google-analytics-api
2个回答
0
投票

目前还没有react的客户端库。您可能需要自己编写一个代码。该文档描述了所有调用 RunReportResponse

有一个 Node.js 客户端库（如果您可以切换到该库）Node.js 快速入门

请记住，API 仍处于 Beta 阶段，因此他们仍在开发中。

/**
   * TODO(developer): Uncomment this variable and replace with your
   *   Google Analytics 4 property ID before running the sample.
   */
  // propertyId = 'YOUR-GA4-PROPERTY-ID';

  // Imports the Google Analytics Data API client library.
  const {BetaAnalyticsDataClient} = require('@google-analytics/data');

  // Using a default constructor instructs the client to use the credentials
  // specified in GOOGLE_APPLICATION_CREDENTIALS environment variable.
  const analyticsDataClient = new BetaAnalyticsDataClient();

  // Runs a simple report.
  async function runReport() {
    const [response] = await analyticsDataClient.runReport({
      property: `properties/${propertyId}`,
      dateRanges: [
        {
          startDate: '2020-03-31',
          endDate: 'today',
        },
      ],
      dimensions: [
        {
          name: 'city',
        },
      ],
      metrics: [
        {
          name: 'activeUsers',
        },
      ],
    });

    console.log('Report result:');
    response.rows.forEach(row => {
      console.log(row.dimensionValues[0], row.metricValues[0]);
    });
  }

  runReport();

据我所知，没有适用于 JavaScript 的谷歌云客户端库，这通常是数据 api 所在的位置。 如果没有云客户端库，我会质疑天气，他们会为 JavaScript 和 Reactjs 创建一个库

更新

我向团队发送了一条消息，询问他们是否正在开发用于 Analytics 数据 API 的 React.js 库。

得到的答复是，目前没有工作计划实现专门为 ReactJs 设计的数据 api 库

他们建议 google-api-javascript-client 显然 GA4 Dimensions & Metrics Explorer 将其与 ReactJs 一起使用。 他们提供 ga-dev-tools 和 onInitialClientRender.js 作为示例

0
投票

好吧，我花了一些时间来理解，但我至少已经得到了我正在寻找的数据，这是任何人进一步用例的完整组件。以下代码获取您的 GA4 ID 并返回过去 60 秒内的实时当前活跃用户。在完整的应用程序（查看我的 GitHub）中，它具有向后兼容性，您可以根据项目选择是否要使用 UA View ID 或 GA4 ID。

import {
  useGoogleLogin
} from '@react-oauth/google';
import axios from "axios"
import React from "react";
import {
  useState
} from 'react';
import './formcss.css';








function App() {
  let reponseGlobal;
  const login = useGoogleLogin({
    onSuccess: async response => {
      try {
        console.log(response.access_token);
        const res = await axios.post(`https://content-analyticsdata.googleapis.com/v1beta/properties/307948141:runRealtimeReport?alt=json`,

          {

            "metrics": [{
              "name": "activeUsers"
            }]
          }, {
            headers: {
              "Authorization": `Bearer ${response.access_token}`
            }
          }
        )
        if (res.data.rows['0'].metricValues["0"].value == null) {
          res.data.rows['0'].metricValues["0"].value = 0
        }
        reponseGlobal = response

        setactiveUsers(res.data.rows['0'].metricValues["0"].value);
        setloggedin(true);
        const interval = setInterval(function() {
          fetch();
        }, 5000);

      } catch (err) {
        console.log(err)
      }
    },
    scope: 'https://www.googleapis.com/auth/analytics.readonly'
  });





  async function fetch() {
    try {

      const res = await axios.post(`https://content-analyticsdata.googleapis.com/v1beta/properties/${gaID}:runRealtimeReport?alt=json`,

        {

          "metrics": [{
            "name": "activeUsers"
          }]
        }, {
          headers: {
            "Authorization": `Bearer ${reponseGlobal.access_token}`
          }
        }
      )
      if (res.data.rows['0'].metricValues["0"].value == null) {
        res.data.rows['0'].metricValues["0"].value = 0
      }
      setactiveUsers(res.data.rows['0'].metricValues["0"].value);
      console.log(res.data.rows['0'].metricValues["0"].value)
    } catch (err) {
      console.log("something died")
    }
  }



  const [gaID, setgaId] = useState('')
  const [activeUsers, setactiveUsers] = useState('')
  const [name, setName] = useState('')
  const [loggedin, setloggedin] = useState('')

  return (

    <
    div className = "form" >

    {!loggedin &&

      <
      div className = "Appheader" >
      <
      input
      placeholder = 'GA4 ID'
      name = "gaID"
      type = "gaID"
      onChange = {
        event => setgaId(event.target.value)
      }
      value = {
        gaID
      }
      className = "inputFields"

      /
      >
      <
      input
      placeholder = 'Project Name (any)'
      name = "name"
      type = "name"
      onChange = {
        event => setName(event.target.value)
      }
      value = {
        name
      }
      className = "inputFields"

      /
      >
      <
      button id = 'submit'
      onClick = {
        login
      } >
      Continue with google <
      /button>

      <
      /div>

    } {
      loggedin &&
        <
        div id = 'results' >
        <
        p > {
          name
        } < /p>

        <
        p id = 'total' > {
          activeUsers
        } < /p> < /
      div >
    } <
    /div>
  );
};
export default App;
.form {
  border-radius: 20px;
  background-color: thistle;
  width: 310px;
  height: 358px;
  background: rgba(0, 0, 0, 0.5);
}

input {
  font-size: 25px;
  padding: 5px;
  width: 100%;
}

.Appheader {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 30px;
  align-items: center;
}

#submit {
  font-size: large;
  border-radius: 20px;
  width: 90%;
  margin-top: 150px;
  height: 40px;
  border-width: 3px;
  border-style: groove;
  color: white;
  background-color: rgba(0, 0, 0, 0);
}

.inputFields {
  text-align: center;
  width: 90%;
  margin-top: 10px;
  border-radius: 20px;
  color: white;
  background-color: rgba(0, 0, 0, 0);
  border-width: 5px;
  border-style: groove;
}

::placeholder {
  text-align: center;
}

#results {
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 15px;
}

#total {
  font-size: 80px;
}

h1 {
  font-size: 20px;
  margin-bottom: 20px;
}

p {
  font-size: 20px;
}

@media (min-width: 1200px) {
  .weather-side {
    left: 0px;
  }
  .container {
    width: 100%;
  }
  .form {
    width: 100%;
    margin-top: 20px;
  }
  .Appheader {
    padding: 10px;
  }
}

对于完整的应用程序以及有关用例的任何进一步担忧或不知道其他什么？查看我的 github 我只是希望这个已经存在，这样我就不必费尽心思去弄清楚它，但它仍然很有趣，不管答案是否已经以某种形式编码出来我只需要稍作修改即可使它们适用于我的项目。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.