如何通过JavaScript调用Google Analytics API获取当前页面流量渠道？

阿华AIGC实验室

2026-5-19

当然可行！不过得分两种场景来聊——要是你想实时拿到当前访问用户的流量渠道，和想获取页面的历史/聚合流量渠道数据，实现路子不一样，我给你拆解清楚：

一、实时获取当前用户的流量渠道（前端直接实现）

其实不用专门调用API，Google Analytics（不管是GA4还是旧版UA）都会把用户的来源信息存在浏览器的cookie或者通过自身的JS接口暴露出来，直接读取就行，效率还高。

针对GA4（目前主流版本）

GA4的gtag.js提供了获取当前会话来源数据的方法，你可以直接调用gtag('get')拿到sessionSource、sessionMedium这些核心字段，再自己映射成对应的渠道：

// 替换成你的GA4测量ID，比如G-XXXXXXXXXX
const GA_MEASUREMENT_ID = '你的GA4测量ID';

// 获取会话来源数据
gtag('get', GA_MEASUREMENT_ID, ['sessionSource', 'sessionMedium', 'sessionCampaign'], (data) => {
  const { sessionSource: source, sessionMedium: medium } = data;
  let channel;

  // 根据source和medium映射成你需要的渠道名称
  if (medium === 'organic') {
    channel = source.includes('google') ? 'google search（谷歌搜索）' : 'organic（自然搜索）';
  } else if (medium === 'referral') {
    channel = 'referral（推荐访问）';
  } else if (medium === 'direct') {
    channel = 'direct（直接访问）';
  } else if (medium.includes('social')) {
    channel = 'social（社交访问）';
  } else if (medium === 'email') {
    channel = 'email（邮件访问）';
  } else {
    channel = 'other（其他渠道）';
  }

  console.log('当前用户的流量渠道：', channel);
});

针对旧版Universal Analytics（UA）

UA会把来源数据存在_utmz cookie里，你可以解析这个cookie拿到utm_source、utm_medium等字段，再做渠道映射：

// 解析UA的_utmz cookie
function getUAChannelData() {
  const utmCookie = document.cookie.split('; ').find(row => row.startsWith('_utmz='));
  if (!utmCookie) return null;

  const cookieValue = utmCookie.split('=')[1];
  const params = cookieValue.split('|');
  const channelData = {};

  params.forEach(param => {
    const [key, value] = param.split('=');
    switch(key) {
      case 'utmcsr': channelData.source = value; break; // 来源
      case 'utmcmd': channelData.medium = value; break; // 媒介
      case 'utmccn': channelData.campaign = value; break; // 推广活动
    }
  });
  return channelData;
}

// 映射成渠道名称
function mapUAChannel(channelData) {
  if (!channelData) return 'direct（直接访问）';
  const { source, medium } = channelData;

  if (medium === 'organic') {
    return source.includes('google') ? 'google search（谷歌搜索）' : 'organic（自然搜索）';
  } else if (medium === 'referral') {
    return 'referral（推荐访问）';
  } else if (medium === 'direct') {
    return 'direct（直接访问）';
  }
  return 'other（其他渠道）';
}

// 使用示例
const uaData = getUAChannelData();
const channel = mapUAChannel(uaData);
console.log('当前用户的流量渠道：', channel);

二、获取页面的聚合/历史流量渠道数据（调用Analytics API）

要是你想拿到某个页面所有访问的流量渠道分布（比如过去7天里，各个渠道带来了多少会话），那就得调用Google的Analytics API，不过注意：不能在前端直接调用（会泄露API密钥），必须通过后端代理来实现。

步骤大致是：

在Google Cloud Console创建项目，启用对应API（UA用Analytics Reporting API v4，GA4用GA4 Data API）。
创建服务账号，下载密钥JSON文件，然后在GA后台把这个服务账号添加为「查看者」权限。
后端编写代码调用API，这里用Node.js举个GA4的例子：

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

// 初始化认证
const auth = new google.auth.GoogleAuth({
  keyFile: './service-account-key.json', // 替换成你的密钥文件路径
  scopes: ['https://www.googleapis.com/auth/analytics.readonly'],
});

// 调用GA4 Data API获取页面渠道数据
async function getPageChannelStats(propertyId, pagePath) {
  const ga4 = google.analyticsdata('v1beta');
  const client = await auth.getClient();

  const response = await ga4.properties.runReport({
    property: `properties/${propertyId}`,
    requestBody: {
      dateRanges: [{ startDate: '7daysAgo', endDate: 'today' }],
      dimensions: [
        { name: 'sessionDefaultChannelGroup' }, // 渠道分组
        { name: 'pagePath' } // 页面路径
      ],
      metrics: [{ name: 'sessions' }], // 会话数
      dimensionFilter: {
        filter: {
          fieldName: 'pagePath',
          stringFilter: { matchType: 'EXACT', value: pagePath }
        }
      }
    }
  });

  // 处理返回结果
  const rows = response.data.rows || [];
  return rows.map(row => ({
    channel: row.dimensionValues[0].value,
    page: row.dimensionValues[1].value,
    sessions: row.metricValues[0].value
  }));
}

// 使用示例：替换成你的GA4 property ID和页面路径
getPageChannelStats('YOUR_GA4_PROPERTY_ID', '/your-target-page')
  .then(stats => console.log('页面流量渠道统计：', stats))
  .catch(err => console.error('API调用出错：', err));