求助：将UA版实时用户请求转换为GA4 API格式

核心变化说明 #

GA4的Google Analytics Data API v1 Beta与UA的Analytics V3 API差异较大：

• 请求方式从GET改为POST
• 接口地址更换为GA4专属端点
• 指标名称、参数结构完全重构
• GA4使用属性ID（格式如properties/123456789）替代UA的ga:XXXXXX视图ID

改造后的完整代码 #

const login = useGoogleLogin({
    onSuccess: async response => {
        try {
            console.log(response.access_token);
            // 替换为你的GA4属性ID，格式为properties/XXXXXX
            const ga4PropertyId = "properties/你的GA4属性ID";
            // GA4 Data API v1 Beta 请求
            const res = await axios.post(
                `https://analyticsdata.googleapis.com/v1beta/${ga4PropertyId}:runReport`,
                {
                    dateRanges: [{ startDate: "today", endDate: "today" }],
                    metrics: [{ name: "activeUsers" }]
                },
                {
                    headers: {
                        "Authorization": `Bearer ${response.access_token}`,
                        "Content-Type": "application/json"
                    }
                }
            );

            // 解析GA4响应数据
            let activeUsers = 0;
            if (res.data.rows && res.data.rows.length > 0) {
                // GA4返回的数值在metricValues的value字段
                activeUsers = parseInt(res.data.rows[0].metricValues[0].value);
            }

            reponseGlobal = response;
            setactiveUsers(activeUsers);
            setloggedin(true);

            // 定时刷新任务，注意同步改造fetch函数内容
            const interval = setInterval(() => {
                fetchActiveUsers(response.access_token, ga4PropertyId);
            }, 5000);

        } catch (err) {
            console.error("GA4 API请求错误:", err);
        }
    },
    // 权限范围保持不变
    scope: 'https://www.googleapis.com/auth/analytics.readonly'
});

// 提取定时刷新的请求逻辑，便于复用
const fetchActiveUsers = async (accessToken, propertyId) => {
    try {
        const res = await axios.post(
            `https://analyticsdata.googleapis.com/v1beta/${propertyId}:runReport`,
            {
                dateRanges: [{ startDate: "today", endDate: "today" }],
                metrics: [{ name: "activeUsers" }]
            },
            {
                headers: {
                    "Authorization": `Bearer ${accessToken}`,
                    "Content-Type": "application/json"
                }
            }
        );
        let activeUsers = 0;
        if (res.data.rows?.length > 0) {
            activeUsers = parseInt(res.data.rows[0].metricValues[0].value);
        }
        setactiveUsers(activeUsers);
    } catch (err) {
        console.error("定时刷新GA4数据错误:", err);
    }
};

关键改造点解析 #

1. GA4属性ID获取：在GA4后台「管理」>「属性设置」中查看，格式必须是properties/XXXXXX
2. 请求结构：使用runReport端点，通过请求体指定日期范围和指标，而非URL参数
3. 响应解析：GA4返回的指标值嵌套在rows[0].metricValues[0].value中，需要转换为数字类型
4. 定时任务：将请求逻辑提取为独立函数，避免重复代码，确保定时刷新时使用GA4请求

内容的提问来源于stack exchange，提问作者Sheru