前端如何处理用户同意GDPR Cookie才能加载第三方脚本？

你这个问题其实挺典型的，很多团队一开始都这么干，但确实容易踩坑。动态插入 script 标签只是第一步，关键在于：所有依赖这个脚本的代码（比如 gtag('config', ...)）都必须等脚本真正加载完才能执行，否则浏览器会报错，而且可能在脚本还没准备好时就触发了事件，导致数据丢失或者合规风险。

JS 里面最稳妥的做法是分三步走：

1. 先别在页面里直接写 gtag('config', ...) 这种调用，改成把所有跟踪命令先缓存到一个数组里，比如叫 gtagQueue，Google 官方文档里其实也推荐这么干（叫“Command Queue”模式），这样即使脚本没加载，也不会报错。

2. 用户点击“同意”后，动态插入 GA 的 script，同时把缓存的命令数组一次性注入给 gtag。

3. 脚本加载完成后，把后续的 gtag 调用直接转发到真正的 gtag 函数上，而不是继续塞队列。

具体可以这么写：

// 页面初始化时，先初始化一个命令队列（放在所有 gtag 调用之前）

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

function gtag(){dataLayer.push(arguments);}

// 这里别调用 gtag('config', ...), 全部先跳过，或者先存起来



// 假设你之前有代码是 gtag('config', 'G-XXXXXX'); 这种，先注释掉

// 改成先记录到一个临时数组里（如果你不确定哪些地方调了，可以全局搜索替换）

const pendingCommands = [];

// 比如之前有：pendingCommands.push(['config', 'G-XXXXXX']);

// 或者你用一个高阶函数包装一下：

const originalGtag = gtag;

gtag = function(...args) {

  pendingCommands.push(args);

};

// 但更推荐：在真正加载前，所有 gtag 调用都先不执行，统一在同意后处理



// 当用户同意后，比如点击了按钮

function onConsentGranted() {

  // 1. 先插入 GA 脚本

  const script = document.createElement('script');

  script.async = true;

  script.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXX';

  script.onload = () => {

    // 2. 脚本加载完成后，重新绑定 gtag 函数（指向真正的 gtag）

    // 注意：gtag 函数在脚本加载后会自动挂到 window 上

    window.gtag = window.gtag || function() {

      dataLayer.push(arguments);

    };

    // 3. 把之前缓存的命令全部执行一遍

    pendingCommands.forEach(args => {

      window.gtag(...args);

    });

    // 4. 之后可以恢复直接调用

    gtag = window.gtag;

  };

  script.onerror = () => {

    console.error('GA script failed to load');

  };

  document.head.appendChild(script);

}



// Facebook Pixel 同理，只是它的初始化方式是 window.fbq = ...

// FB 的 queue 机制是原生支持的，它会自动缓存命令直到脚本加载完

// 你只需要在同意后插入 script，然后调用一次 fbq('init', 'XXXX') 就行

// 不用自己维护队列（但如果你提前调用了 fbq('track', ...)，它也会自动排队）

另外提醒几个坑：

- Google Analytics 4 的 gtag('config', ...) 必须在脚本加载后调用，而且不能重复调用（重复会报错或合并失败），所以队列里如果有多次 config，只保留第一次。

- 如果你用了 Tag Manager（GTM），那更麻烦，因为 GTM 本身会注入一堆脚本，GDPR 合规得用 GTM 的 Consent Mode，或者自己控制 consent 状态，这里就不展开说了。

- Facebook Pixel 有个细节：它会在脚本加载前自动缓存命令（用 fbq.queue），但如果你在脚本没加载时就调用了 fbq('track', ...)，它虽然不会报错，但可能丢失事件（因为脚本加载前调用可能没生效），所以最好也控制时机。

- 本地开发时注意：浏览器缓存可能让你误以为“好像能用”，真上测试环境才暴露问题。

最后说句实话：GDPR 合规不是纯技术问题，建议你再加个 Cookie 同意管理平台（比如 Osano、Usercentrics），它们有现成的 SDK，能帮你管理 consent 状态、暂停脚本、记录日志，比自己从零写靠谱多了——自己写容易漏细节，审计时容易被卡。