Это запрос, который я делаю, используя метод UA для вызова V3 API, завернутый в библиотеку присяги для реагирования. Но с июня 2023 года он устаревает, и я не могу понять, как воссоздать его в бета-API GA4 v1, также известном как API данных Google Analytics. Я пытался следовать документации Google, но я просто не могу понять, как сделать запрос...
const login = useGoogleLogin({
onSuccess: async response => {
try {
console.info(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.info(err)
}
},
scope: 'https://www.googleapis.com/auth/analytics.readonly'
});
Эй, в том-то и дело, что у меня нет кода GA4, я пытаюсь написать его в форме GA4, также известной как API данных бета-аналитики v1 от Google. То, что я пытаюсь извлечь, — это активные пользователи, которые уже работают в приведенном выше коде, за исключением того, что он берет идентификатор представления из свойства Universal Analytics, устаревшего. И теперь мне нужна помощь, чтобы кто-то написал точно такой же запрос (извлечение активных пользователей), но с использованием идентификатора GA4 вместо идентификатора просмотра в системе UA.
Кроме того, в вашей отправленной ссылке activeUsers я был в проводнике запросов, но, в отличие от UA, GA4 показывает только запрос JSON вместо HTTP, который я ищу...
Ну, трудно помочь вам исправить ваш код, если у вас его нет. Начните с того, что посмотрите, есть ли вообще клиентская библиотека для JavaScript reactJs. Я знаю, что есть один для node.js
API-интерфейсы GA4 — это API-интерфейсы grpc, они возвращают только json. TBH API отчетов для UA также вернул json, не уверен, что вы имеете в виду, возвращая html.
UA действительно возвращает JSON, я имел в виду запрос. Запросы UA представляют собой http-ссылки с аргументами внутри, и я почти уверен, что запросы GA4 тоже? Просто во всех примерах используются библиотеки, которые принимают все метрики в виде JSON, а затем сами привязывают их сзади, поэтому я не могу понять, как выглядит HTTP-запрос. Ответ может быть любым, что на 100% холодно, я просто не понимаю, как работает GA4, например, они просят меня также отправить с ним файлы учетных данных JSON, что idk, как это сделать? Это очень запутанно.
Что касается библиотеки реагирования, то для аналитики их много, но все они работают с UA, по крайней мере те, с которыми я сталкивался до сих пор. Я еще не нашел библиотеку, которая работает с v1Beta API, нет...
Может быть, еще не один. Насколько я могу судить, есть только один для Node.js.
В настоящее время нет клиентской библиотеки клиентской библиотеки для реагирования. Возможно, вам придется закодировать его самостоятельно. В документации описаны все вызовы RunReportResponse
Существует клиентская библиотека для node.js, если бы вы могли переключиться на это Краткое руководство по Node.js
Помните, что API все еще находится в бета-версии, поэтому они все еще работают над ним.
/**
* 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.info('Report result:');
response.rows.forEach(row => {
console.info(row.dimensionValues[0], row.metricValues[0]);
});
}
runReport();
Насколько я вижу, нет облачной клиентской библиотеки Google для JavaScript, здесь обычно лежит API данных. Не имея клиентской библиотеки для облака, я не знаю, погода или нет, они создадут библиотеку для JavaScript и reactjs.
Я отправил сообщение команде, чтобы спросить, работают ли они над библиотекой react.js для API данных Analytics.
Ответ заключался в том, что в настоящее время не планируется никаких работ по внедрению библиотеки данных API, специально разработанной для ReactJ.
Они предлагают google-api-javascript-client По-видимому, GA4 Dimensions & Metrics Explorer использует его с ReactJs. Они предлагают ga-dev-tools и onInitialClientRender.js в качестве примера
Я обновил ответ ответом команды, работающей над API Google Analytics.
Хорошо, мне потребовалось некоторое время, чтобы понять, но я получил данные, которые искал, по крайней мере, вот полный компонент для дальнейшего использования кем-либо. Следующий код берет ваш идентификатор GA4 и возвращает текущих активных пользователей в реальном времени за последние 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.info(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.info(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.info(res.data.rows['0'].metricValues["0"].value)
} catch (err) {
console.info("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 Я просто хочу, чтобы это уже существовало, чтобы мне не пришлось проходить через весь ад, чтобы понять это, но это все равно было очень весело, несмотря на то, что ответы уже не были закодированы каким-то образом для формы. что мне просто нужно немного изменить, чтобы заставить их работать с моим проектом.
Вы пробовали просто использовать метрику activeUsers? Опубликуйте свой код GA4 и опишите, что вы пытаетесь извлечь и какие проблемы возникают.