如何将Google Analytics实时活跃用户数公开并嵌入Web应用用于推广

你的核心问题是：现有Embed API需要用户登录授权才能查看数据，但你想公开展示这个实时用户数给所有访问你应用的用户（不需要他们登录谷歌账号）。直接用前端的Embed API肯定不行，因为它依赖用户的个人授权，我们需要换一种服务器端获取数据的方式，再把数据提供给前端展示。

下面是完整的实现方案：

一、准备工作：配置Google Cloud服务账号与Analytics权限 #

要绕过用户授权，我们需要用Google Cloud服务账号来调用Analytics的Real Time API，步骤如下：

• 登录Google Cloud控制台，创建一个新的服务账号，下载JSON格式的密钥文件（务必妥善保存，仅在服务器端使用）
• 打开你的Google Analytics（UA或GA4均可，操作逻辑类似），进入「管理」→「用户管理」，把刚才创建的服务账号邮箱添加为「读取者」权限，确保它能访问你的Analytics数据

二、服务器端：编写接口获取实时活跃用户数 #

我们需要在自己的服务器上写一个接口，用服务账号认证后调用Google Analytics Real Time API，拿到数据后返回给前端。这里以Node.js为例：

首先安装依赖：

npm install googleapis express

然后编写核心代码（比如server.js）：

const { google } = require('googleapis');
const express = require('express');
const app = express();

// 加载服务账号密钥
const auth = new google.auth.GoogleAuth({
  keyFile: './your-service-account-key.json', // 替换成你的密钥文件路径
  scopes: ['https://www.googleapis.com/auth/analytics.readonly'],
});

// 初始化Analytics服务（UA版本，GA4需调整为analyticsdata/v1beta）
const analytics = google.analytics({
  version: 'v3',
  auth: auth,
});

// 定义获取实时用户的接口
app.get('/api/active-users', async (req, res) => {
  try {
    const response = await analytics.data.realtime.get({
      ids: 'ga:YOUR_VIEW_ID', // 替换成你的UA视图ID（格式为ga:xxxxxx）
      metrics: 'rt:activeUsers',
    });
    res.json({ activeUsers: response.data.rows[0][0] });
  } catch (error) {
    console.error('获取实时用户数失败:', error);
    res.status(500).json({ error: '无法获取数据' });
  }
});

app.listen(3000, () => {
  console.log('服务器运行在http://localhost:3000');
});

三、前端：展示实时用户数并自动更新 #

现在前端可以直接调用你自己的后端接口，不需要用户授权，然后每隔几秒刷新一次数据：

<div id="active-users-container">加载中...</div>

<script>
// 定义获取数据的函数
async function fetchActiveUsers() {
  try {
    const response = await fetch('/api/active-users');
    const data = await response.json();
    document.getElementById('active-users-container').textContent = `当前实时活跃用户：${data.activeUsers}人`;
  } catch (error) {
    console.error('获取数据失败:', error);
    document.getElementById('active-users-container').textContent = '数据加载失败';
  }
}

// 页面加载时获取一次，之后每隔5秒自动刷新
fetchActiveUsers();
setInterval(fetchActiveUsers, 5000);
</script>

关键注意事项 #

• 为什么不用原来的Embed API？因为Embed API是给个人用户查看自己的Analytics数据设计的，必须用户登录授权，完全不适合公开展示给所有访客
• 服务账号的密钥文件绝对不能暴露在前端代码里，必须放在服务器端安全存储
• 如果使用GA4，需要调用GA4的Real Time API（版本为analyticsdata/v1beta），请求参数和UA略有差异，可根据官方文档调整

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