如何在浏览器DOM或window.document中获取GA4的medium属性？

GA4的medium属性是其内部计算的流量维度数据，无法直接通过DOM或window.document访问，它不属于浏览器原生暴露的属性范畴。想要获取这个值，可以通过以下几种方式：

1. 使用GA4的gtag.js API获取 #

如果你的页面集成了gtag.js，可以调用gtag('get')方法获取会话级别的媒介信息：

// 替换为你的GA4测量ID（格式为G-XXXXXXXXX）
const GA_MEASUREMENT_ID = 'G-XXXXXXXXX';

gtag('get', GA_MEASUREMENT_ID, 'session', (sessionData) => {
  // 返回格式为"source/medium"，例如"google/organic"、"(direct)/(none)"
  console.log(sessionData.source_medium);
});

2. 解析URL中的UTM参数 #

如果流量是通过带有utm_medium参数的链接进入的，可以直接从URL中提取该参数：

function getUtmMedium() {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get('utm_medium');
}

// 示例：如果URL是https://example.com/?utm_medium=social，会返回"social"
console.log(getUtmMedium());

注意：这种方法只能获取手动设置的UTM媒介，GA4自动识别的媒介（如直接访问、自然搜索）无法通过该方式获取。

3. 读取GA4的dataLayer数据 #

GA4会将部分会话数据推送到页面的dataLayer数组中，你可以监听或读取这个数组来获取媒介信息：

window.dataLayer = window.dataLayer || [];

// 监听dataLayer的推送事件
const originalPush = window.dataLayer.push;
window.dataLayer.push = function(item) {
  // 当会话启动事件触发时，读取媒介数据
  if (item.event === 'session_start' && item.session_data?.source_medium) {
    console.log(item.session_data.source_medium);
  }
  return originalPush.apply(this, arguments);
};

注意：dataLayer的数据结构可能会随GA4版本或配置变化，需根据实际情况调整判断逻辑。

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