元素
元素
工具
博客
问答

Cookie Banner 同意后怎么让第三方脚本重新加载？

晨曦 Dev 阅读 37
安全

我在用 React 做一个 GDPR 合规的 Cookie Banner，用户点击“接受”后，我想动态加载 Google Analytics 这类第三方脚本。但试了几次，脚本好像没生效，是不是我加的方式不对？

目前我是这样写的：

useEffect(() => {
  if (cookieConsent === 'granted') {
    const script = document.createElement('script');
    script.src = 'https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID';
    script.async = true;
    document.head.appendChild(script);
  }
}, [cookieConsent]);

但控制台没报错，GA 也没收到数据，是不是漏了什么初始化步骤？

隐私保护
我来解答 赞 8 收藏
二维码
手机扫码查看
反馈
2 条解答
萌新.君杰
萌新.君杰 Lv1
你这个问题挺常见的，通常情况下你这样写应该是没问题的，但是有几个地方可以检查一下确保一切正常。

首先，确认 cookieConsent 的值确实是 'granted'，可以在加载脚本前打个 console.log 来确认一下。

其次，Google Analytics 需要初始化，你不仅需要加载脚本，还要调用相应的初始化代码。你可以在脚本加载完成后添加初始化逻辑。这里有一个示例：

useEffect(() => {

  if (cookieConsent === 'granted') {

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

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

    script.async = true;



    script.onload = () => {

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

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

      gtag('js', new Date());



      gtag('config', 'GA_MEASUREMENT_ID');

    };



    document.head.appendChild(script);

  }

}, [cookieConsent]);


这段代码会在脚本加载完成后执行初始化步骤，应该能解决你提到的问题。

最后，检查一下浏览器的网络请求，看看是否有相关的 GA 请求发出，有时候可能是 GA 的配置问题或者网络问题导致的。浏览器兼容性一般没问题，但也可以排除一下。

希望这能帮到你，如果还有问题再问我。
点赞
2026-03-23 02:09
小克培
小克培 Lv1
光把脚本插进去没用，你漏了初始化配置那一步，脚本加载完后还得手动调一下 gtag('config') 才能开始追踪。试试看这段代码，记得把 ID 换成你自己的。

useEffect(() => {

  if (cookieConsent === 'granted') {

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

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

    window.gtag = gtag;



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

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

    script.async = true;

    script.onload = () => {

      window.gtag('config', 'GA_MEASUREMENT_ID');

    };

    document.head.appendChild(script);

  }

}, [cookieConsent]);
点赞
2026-03-03 21:46
相关推荐
元素
元素
工具
博客
问答
登录/注册