如何从Google Analytics获取数据在网页显示浏览量

当然可以在网页上展示Google Analytics的页面浏览量，但得先清楚GA的一些限制——比如它的数据不是实时的（通常有几小时延迟），而且不能直接从前端调用数据（会泄露敏感密钥），得通过后端中转来实现。下面分新版GA4和旧版UA两种情况给你捋清楚步骤：

1. 准备API权限与密钥 #

• 登录Google Cloud控制台，创建一个新项目（或使用已有项目），关联你的GA4属性
• 搜索并启用「Analytics Data API v1」
• 创建一个服务账号，下载对应的JSON密钥文件（这个文件要妥善存在后端，绝对不能暴露给前端）
• 回到GA4的管理界面，给这个服务账号添加「查看者」权限，确保它能读取你的GA4数据

2. 后端编写数据请求逻辑 #

因为前端不能直接调用API，所以得用后端语言（比如Node.js、PHP）来请求数据。这里举个Node.js的例子：
首先安装依赖：

npm install @google-analytics/data

然后编写获取页面浏览量的代码：

const { BetaAnalyticsDataClient } = require('@google-analytics/data');

async function getPageViews(propertyId, pagePath) {
  const client = new BetaAnalyticsDataClient({
    keyFilename: './你的服务账号密钥.json'
  });

  const [response] = await client.runReport({
    property: `properties/${propertyId}`,
    dateRanges: [{ startDate: '2020-01-01', endDate: 'today' }],
    dimensions: [{ name: 'pagePath' }],
    metrics: [{ name: 'screenPageViews' }],
    dimensionFilter: {
      filter: {
        fieldName: 'pagePath',
        stringFilter: { matchType: 'EXACT', value: pagePath }
      }
    }
  });

  const row = response.rows?.[0];
  return row ? row.metricValues[0].value : '0';
}

// 调用示例：替换成你的GA4属性ID和目标页面路径
getPageViews('123456789', '/about')
  .then(views => console.log(`页面浏览量：${views}`))
  .catch(err => console.error(err));

3. 前端展示数据 #

后端把获取到的浏览量封装成一个接口（比如/api/page-views?path=/about），前端通过AJAX或者fetch请求这个接口，拿到数据后渲染到页面的指定位置即可。

如果你还在使用旧版的UA属性，可以用Core Reporting API来实现：

1. 准备API权限 #

• 同样在Google Cloud控制台启用「Analytics Reporting API v4」
• 创建服务账号，下载密钥，给UA属性添加「查看者」权限

2. 后端请求数据 #

举个PHP的简单示例：

require __DIR__ . '/vendor/autoload.php';

$client = new Google\Client();
$client->setAuthConfig('./你的服务账号密钥.json');
$client->addScope('https://www.googleapis.com/auth/analytics.readonly');

$analytics = new Google\Service\AnalyticsReporting($client);

$viewId = 'ga:12345678'; // 替换成你的UA视图ID
$pagePath = '/about'; // 目标页面路径

$dateRange = new Google\Service\AnalyticsReporting\DateRange();
$dateRange->setStartDate('2020-01-01');
$dateRange->setEndDate('today');

$metric = new Google\Service\AnalyticsReporting\Metric();
$metric->setExpression('ga:pageviews');
$metric->setAlias('pageviews');

$dimension = new Google\Service\AnalyticsReporting\Dimension();
$dimension->setName('ga:pagePath');

$filterClause = new Google\Service\AnalyticsReporting\DimensionFilterClause();
$filter = new Google\Service\AnalyticsReporting\DimensionFilter();
$filter->setDimensionName('ga:pagePath');
$filter->setOperator('EXACT');
$filter->setExpressions([$pagePath]);
$filterClause->setFilters([$filter]);

$request = new Google\Service\AnalyticsReporting\ReportRequest();
$request->setViewId($viewId);
$request->setDateRanges([$dateRange]);
$request->setMetrics([$metric]);
$request->setDimensions([$dimension]);
$request->setDimensionFilterClauses([$filterClause]);

$body = new Google\Service\AnalyticsReporting\GetReportsRequest();
$body->setReportRequests([$request]);

$response = $analytics->reports->batchGet($body);
$rows = $response->getReports()[0]->getData()->getRows();
$pageViews = $rows ? $rows[0]->getMetrics()[0]->getValues()[0] : '0';

echo $pageViews;

3. 前端展示 #

和GA4的方式一样，后端提供接口，前端请求后渲染数据。

• 数据延迟：GA的常规数据通常有1-24小时的延迟，如果需要实时数据，可以使用Real-Time API，但配额限制更严格，且只能获取最近30分钟的数据
• 安全问题：服务账号的密钥绝对不能放在前端代码里，必须由后端处理API请求，避免密钥泄露导致数据被盗用
• API配额：GA的API有每日调用次数限制，记得合理缓存请求结果，减少API调用
• 页面路径匹配：确保API请求里的pagePath和页面实际的URL路径完全一致（比如是否带斜杠、参数等），否则会获取不到正确的数据

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