如何借助GTM收集网站运行时的全部网络请求？

完全可以实现，核心思路是通过浏览器API捕获网络请求数据，推送到GTM的dataLayer后触发GA事件标签上报。以下是具体实现步骤：

1. 捕获网络请求的代码实现 #

有两种常用的捕获方式，按需选择：

方式一：拦截Fetch和XHR请求 #

这种方式能实时捕获请求发起时机，适合追踪请求状态。将以下代码放在GTM的自定义HTML标签中，触发时机设为document_start（确保在页面请求发起前完成拦截）：

// 拦截Fetch请求
const originalFetch = window.fetch;
window.fetch = function(...args) {
  const requestUrl = args[0] instanceof Request ? args[0].url : args[0];
  // 过滤GTM/GA自身请求，避免冗余上报
  if (!requestUrl.includes('google-analytics.com') && !requestUrl.includes('googletagmanager.com')) {
    window.dataLayer.push({
      event: 'network_request',
      request_url: requestUrl,
      request_type: 'fetch'
    });
  }
  return originalFetch.apply(this, args);
};

// 拦截XMLHttpRequest请求
const originalXhrOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url) {
  this._requestUrl = url;
  this._requestMethod = method;
  originalXhrOpen.apply(this, arguments);
  
  this.addEventListener('load', () => {
    // 仅上报成功请求，可按需调整
    if (this.status >= 200 && this.status < 400) {
      if (!this._requestUrl.includes('google-analytics.com') && !this._requestUrl.includes('googletagmanager.com')) {
        window.dataLayer.push({
          event: 'network_request',
          request_url: this._requestUrl,
          request_method: this._requestMethod,
          request_type: 'xhr',
          response_status: this.status
        });
      }
    }
  });
};

方式二：使用PerformanceObserver监听资源请求 #

这种方式能捕获所有已加载的资源（脚本、HTML、图片等），适合统计页面资源加载情况。同样放在自定义HTML标签，触发时机设为document_start：

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType === 'resource') {
      // 过滤GTM/GA自身资源
      if (!entry.name.includes('google-analytics.com') && !entry.name.includes('googletagmanager.com')) {
        window.dataLayer.push({
          event: 'network_resource',
          resource_url: entry.name,
          resource_type: entry.initiatorType,
          resource_load_time: Math.round(entry.duration),
          resource_size: entry.transferSize
        });
      }
    }
  }
});

observer.observe({ entryTypes: ['resource'] });

2. GTM中配置触发器和GA标签 #

• 创建自定义事件触发器：
  新建触发器，选择「自定义事件」，事件名称填network_request或network_resource（对应你采用的捕获方式），触发条件按需设置（比如全站点触发）。
• 创建GA事件标签：
  以GA4为例，新建「Google Analytics: GA4事件」标签：
  • 事件名称设为network_request或network_resource
  • 添加事件参数：比如request_url、resource_type等，参数值选择「数据层变量」，对应dataLayer里的字段名
  • 关联对应的GA4配置标签，选择之前创建的自定义事件触发器

3. 关键注意事项 #

• 过滤冗余请求：必须过滤GTM、GA自身的请求，否则会产生大量无效上报，占用GA配额。
• 跨域限制：跨域请求的部分数据（如响应体）无法获取，若需要完整信息需服务器配置CORS允许。
• 性能影响：大量请求捕获可能轻微影响页面性能，建议只收集你需要的资源类型（比如仅脚本、HTML）。
• 合规性：确保收集的请求数据不包含用户敏感信息，符合隐私法规要求。

内容的提问来源于stack exchange，提问作者Mateusz Kozłowski