Google Analytics Data API集成问题：登录后无法加载数据

问题背景 #

我从YouTube视频获取Google Analytics集成代码后，初始登录按钮无法显示。推测是Google Sign-In服务停用导致，于是在easyData-google-analytics.js中添加plugin_name配置：

• 新增const GA_PLUGIN_NAME = "quickstart"
• 修改gapi.auth2.init方法，添加plugin_name参数
• 更新signIn函数，传入plugin_name参数

修改后登录按钮正常显示，但登录完成后脚本无法加载GA数据，页面无数据展示，控制台出现异常。相关代码文件及问题截图如下：

相关代码 #

index.html #

<!-- 此处粘贴你的index.html代码内容 -->

easyData-google-analytics.js #

// 此处粘贴你的easyData-google-analytics.js代码内容

控制台异常信息 #

此处粘贴控制台输出的具体错误内容

排查与修复方案 #

1. 验证OAuth权限范围 #

登录Google Cloud控制台，检查你的OAuth 2.0客户端ID是否配置了正确的GA权限范围：

• 需包含https://www.googleapis.com/auth/analytics.readonly
• 确保已启用Analytics Reporting API或你使用的对应GA API服务

2. 确认plugin_name参数传递正确性 #

检查gapi.auth2.init和signIn函数的参数传递是否符合规范：

// 初始化示例
const GA_PLUGIN_NAME = "quickstart";
gapi.auth2.init({
  client_id: "YOUR_CLIENT_ID",
  plugin_name: GA_PLUGIN_NAME
});

// 登录函数示例
function signIn() {
  gapi.auth2.getAuthInstance().signIn({
    plugin_name: GA_PLUGIN_NAME
  }).then(() => {
    // 确保数据加载逻辑在此回调内执行
    loadAnalyticsData();
  }).catch(err => {
    console.error("登录错误:", err);
  });
}

3. 检查数据加载时机 #

确保GA数据加载逻辑仅在用户成功登录后触发，可通过监听登录状态实现：

gapi.auth2.getAuthInstance().isSignedIn.listen(isSignedIn => {
  if (isSignedIn) {
    loadAnalyticsData();
  }
});

4. 验证API请求有效性 #

• 检查GA数据请求的端点是否正确（如Analytics Reporting API v4的端点为https://analyticsreporting.googleapis.com/v4/reports:batchGet）
• 确认请求参数中的视图ID（viewId）、日期范围、指标维度是否配置正确
• 测试API请求是否能在Postman等工具中正常返回数据，排除权限或参数问题

5. 根据控制台错误针对性修复 #

• 403 Forbidden：检查用户是否拥有目标GA视图的访问权限，或OAuth范围是否配置完整
• CORS错误：在Google Cloud控制台的OAuth客户端设置中，添加当前域名到已授权的JavaScript来源列表
• API调用错误：对照GA官方文档，检查请求体格式、参数拼写是否符合要求

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