Vue3项目中如何获取GA4分析数据并展示至后台页面？

核心前提 #

要获取已关联网站的GA4数据集，必须通过**Google Analytics Data API（GA4）**实现——前端无法直接读取GA4的原始用户数据，所有请求都需要经过身份验证，因此必须结合后端代理或使用官方提供的嵌入方案。

一、原生JavaScript实现（推荐用于公开后台） #

由于GA4 API的密钥不能暴露在前端，必须通过后端转发请求，以下是完整的前后端示例：

1. 准备工作 #

• 在Google Cloud控制台创建项目，启用「Analytics Data API」
• 创建服务账号，下载JSON格式的密钥文件
• 在GA4后台给该服务账号添加「查看者」权限
• 记录GA4的Property ID（格式：2XXXXXXXXX）

2. Vue3前端代码（组件示例） #

<template>
  <div class="ga-dashboard">
    <h3>网站访问统计</h3>
    <div v-if="loading">数据加载中...</div>
    <div v-else class="stats">
      <p>近7天活跃用户数: {{ activeUsers }}</p>
      <p>今日访问量: {{ todaySessions }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const loading = ref(true)
const activeUsers = ref('0')
const todaySessions = ref('0')

onMounted(async () => {
  try {
    // 调用自建后端接口，由后端处理GA4 API请求
    const res = await fetch('/api/ga4/get-site-stats', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ propertyId: '2XXXXXXXXX' })
    })
    const data = await res.json()
    activeUsers.value = data.activeUsers
    todaySessions.value = data.todaySessions
  } catch (err) {
    console.error('GA4数据获取失败:', err)
  } finally {
    loading.value = false
  }
})
</script>

3. 后端代理示例（Node.js） #

const { google } = require('googleapis')
const express = require('express')
const app = express()
app.use(express.json())

// 加载服务账号密钥
const auth = new google.auth.GoogleAuth({
  keyFile: './ga4-service-account.json',
  scopes: ['https://www.googleapis.com/auth/analytics.readonly']
})

// 自定义接口：获取网站核心统计数据
app.post('/api/ga4/get-site-stats', async (req, res) => {
  const { propertyId } = req.body
  const analyticsData = google.analyticsdata({ version: 'v1beta', auth })

  try {
    // 同时请求近7天活跃用户和今日访问量
    const [activeUsersRes, todaySessionsRes] = await Promise.all([
      analyticsData.properties.runReport({
        property: `properties/${propertyId}`,
        requestBody: {
          dateRanges: [{ startDate: '7daysAgo', endDate: 'today' }],
          metrics: [{ name: 'activeUsers' }]
        }
      }),
      analyticsData.properties.runReport({
        property: `properties/${propertyId}`,
        requestBody: {
          dateRanges: [{ startDate: 'today', endDate: 'today' }],
          metrics: [{ name: 'sessions' }]
        }
      })
    ])

    res.json({
      activeUsers: activeUsersRes.data.rows[0].metricValues[0].value,
      todaySessions: todaySessionsRes.data.rows[0].metricValues[0].value
    })
  } catch (err) {
    res.status(500).json({ error: err.message })
  }
})

app.listen(3001, () => console.log('GA4代理服务运行在3001端口'))

二、官方嵌入方案（适合内部后台） #

如果是仅供内部人员使用的后台，可以直接使用GA4的Embed API，无需自建后端，但需要用户登录Google账号授权：

<template>
  <div id="ga-embed-container"></div>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  // 加载Google Charts脚本（Embed API依赖）
  const script = document.createElement('script')
  script.src = 'https://www.gstatic.com/charts/loader.js'
  script.onload = initGaDashboard
  document.body.appendChild(script)

  function initGaDashboard() {
    window.google.charts.load('current', { packages: ['analytics'] })
    window.google.charts.setOnLoadCallback(renderDashboard)
  }

  function renderDashboard() {
    const analytics = window.google.analytics
    // 授权弹窗（用户需登录拥有GA4权限的Google账号）
    analytics.auth.authorize({
      container: 'ga-embed-container',
      clientid: '你的OAuth客户端ID', // 从Google Cloud控制台获取
      scope: 'https://www.googleapis.com/auth/analytics.readonly'
    })

    // 渲染视图选择器（可切换不同GA4属性）
    const viewSelector = new analytics.ViewSelector2({
      container: 'ga-embed-container'
    })
    viewSelector.execute()

    // 渲染访问趋势折线图
    const dataChart = new analytics.DataChart({
      container: 'ga-embed-container',
      query: {
        metrics: 'ga:sessions',
        dimensions: 'ga:date',
        'start-date': '30daysAgo',
        'end-date': 'today'
      },
      chart: {
        type: 'LINE',
        options: { width: '100%', height: 400 }
      }
    })
    dataChart.execute()
  }
})
</script>

关键注意事项 #

• 服务账号密钥绝对不能放在前端代码中，否则会导致密钥泄露，引发安全风险
• GA4 Data API有调用配额限制，需合理控制请求频率
• 公开后台必须使用后端代理方案，内部后台可选择Embed API简化开发

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