除Google Analytics API外，如何将实时报表数据接入React.js应用？

1. 使用Google Analytics Embed API #

这是官方专为嵌入仪表盘/报表设计的工具，相比直接调用Core API，更适合快速复用官方现成的实时报表视图：

• 核心步骤：
  • 在Google Cloud Console启用Embed API，配置OAuth客户端ID并添加你的React应用域名到授权白名单
  • 在React组件中通过useEffect动态加载Embed API脚本
  • 完成授权后，直接调用API渲染官方封装的实时报表组件，比如实时活跃用户、流量来源分布等模块
• 极简实现示例：

import { useEffect, useRef } from 'react';

const GARealTimeDashboard = () => {
  const chartContainer = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://analytics.google.com/analytics/js/embed.js';
    script.onload = initGAEmbed;
    document.body.appendChild(script);

    function initGAEmbed() {
      if (!window.gapi || !chartContainer.current) return;
      window.gapi.analytics.ready(() => {
        const realTimeChart = new window.gapi.analytics.googleCharts.DataChart({
          query: {
            ids: 'ga:YOUR_VIEW_ID', // 替换为你的GA视图ID
            metrics: 'rt:activeUsers',
            dimensions: 'rt:source',
            'max-results': 8,
          },
          chart: {
            container: chartContainer.current,
            type: 'BAR',
            options: { width: '100%', height: 400 }
          }
        });
        realTimeChart.execute();
      });
    }

    return () => document.body.removeChild(script);
  }, []);

  return <div ref={chartContainer}></div>;
};

export default GARealTimeDashboard;

2. 基于社区封装的React组件库 #

社区有不少针对GA Embed API做了React封装的库，能帮你省去底层脚本加载、授权处理的重复代码：

• 只需引入对应库，配置GA视图ID和基础参数，就能快速渲染实时报表组件
• 选择时优先考虑维护活跃、文档完善的库，避免依赖过时的API版本

3. 嵌入GA官网报表的iframe（限固定场景） #

如果你的GA账号有对应权限，可以在官网实时报表页面生成可嵌入的iframe代码：

• 直接在React组件中通过iframe标签嵌入，或者用dangerouslySetInnerHTML渲染
• 缺点：样式定制空间极小，且需处理跨域权限限制，仅适合快速嵌入固定视图的场景

通用注意事项 #

• 无论采用哪种方案，都要确保React应用的域名已加入GA的授权白名单，避免权限报错
• 实时数据的刷新频率可通过对应API参数配置，Embed API默认会自动完成数据刷新，无需手动轮询

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