静态站点基于Cookie授权在浏览器源码注入GA4脚本的技术咨询

核心思路 #

要让GA4脚本出现在「查看页面源码」中，必须在HTML响应发送到浏览器之前完成脚本注入——因为「查看页面源码」展示的是服务器最初返回的原始HTML，客户端DOM操作添加的元素只会出现在元素面板，不会进入原始源码。结合你的静态站点场景，推荐以下两种可行方案：

方案1：边缘计算/CDN响应改写（最通用） #

利用Cloudflare Workers、Vercel Edge Functions、Netlify Edge Functions这类边缘服务，在请求到达静态文件存储（如S3、托管平台CDN）后、返回HTML前，检查用户的Cookie授权状态，动态注入GA4脚本。

示例（Cloudflare Workers） #

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  // 读取请求中的Cookie授权标记
  const cookieHeader = request.headers.get('Cookie') || '';
  const hasConsent = cookieHeader.includes('cookie_consent=accepted');

  // 获取原始静态HTML文件
  const response = await fetch(request);
  if (response.headers.get('Content-Type')?.includes('text/html')) {
    let html = await response.text();
    
    // 用户已授权则注入GA4脚本到head末尾
    if (hasConsent) {
      const gaScript = `
        <!-- GA4 Tracking Script -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-YOUR_TRACKING_ID"></script>
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'G-YOUR_TRACKING_ID');
        </script>
      `;
      html = html.replace('</head>', `${gaScript}</head>`);
    }

    // 返回修改后的HTML
    return new Response(html, {
      headers: response.headers
    });
  }

  // 非HTML文件直接返回原始响应
  return response;
}

操作步骤 #

1. 在对应边缘服务平台创建函数，将上述代码部署（替换G-YOUR_TRACKING_ID为你的GA4 ID）
2. 配置路由规则，让所有HTML页面请求经过该函数处理
3. 确保你的Cookie授权系统设置的Cookie名称（示例中为cookie_consent）与函数内一致

方案2：静态托管平台的动态渲染功能 #

如果站点托管在Vercel、Netlify等平台，可直接使用它们提供的动态渲染能力：

• Vercel：通过Edge Functions拦截请求并修改HTML
• Netlify：使用Edge Functions或On-demand Builders实现动态注入

示例（Vercel Edge Function） #

在项目根目录创建middleware.js：

import { NextResponse } from 'next/server';

export async function middleware(request) {
  const hasConsent = request.cookies.get('cookie_consent')?.value === 'accepted';
  const url = new URL(request.url);

  // 仅处理HTML页面请求
  if (url.pathname.endsWith('.html') || url.pathname === '/') {
    const originalHtml = await fetch(url).then(res => res.text());
    let modifiedHtml = originalHtml;

    if (hasConsent) {
      const gaScript = `
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-YOUR_TRACKING_ID"></script>
        <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'G-YOUR_TRACKING_ID');
        </script>
      `;
      modifiedHtml = originalHtml.replace('</head>', `${gaScript}</head>`);
    }

    return new NextResponse(modifiedHtml, {
      headers: { 'Content-Type': 'text/html' }
    });
  }

  return NextResponse.next();
}

// 指定需要处理的页面路径
export const config = {
  matcher: ['/', '/about', '/*.html']
};

注意事项 #

• 确保授权Cookie是跨路径/域名的，避免边缘服务无法读取到授权状态
• 测试时需清除浏览器缓存或使用无痕模式，避免旧的静态HTML缓存干扰
• 若无法使用边缘服务，也可通过Nginx反向代理在请求阶段改写HTML，但需要自行维护服务器

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