Google Analytics Cookie无法显示及删除，Cookie横幅故障求助

问题根源拆解 #

你的代码存在4个关键错误，直接导致GA Cookie无法生成/删除：

1. 提前加载GA脚本：页面头部直接引入gtag.js，不管用户是否同意就加载，既不合规，也会让拒绝按钮失效
2. accept函数URL错误：动态加载的gtag脚本URL写了G-E，应为完整跟踪IDG-Eaaaaaaaa
3. refuse函数语法&逻辑错误：Cookies.remove引号未闭合，删除GA Cookie时缺少匹配属性（path、domain），且未清理已加载的GA实例
4. 未保存用户偏好：没有用Cookie记录用户选择，刷新页面后横幅重复出现

分步修复方案 #

1. 移除提前加载的GA脚本

删掉页面头部的<script async src="https://www.googletagmanager.com/gtag/js?id=G-Eaaaaaa"></script>，仅在用户同意后动态加载。

2. 修复acceptAllCookies函数

修正URL、增加偏好记录、隐藏横幅：

function acceptAllCookies() {
  // 记录用户同意状态，有效期1年
  Cookies.set('cookie_consent', 'accepted', { expires: 365, path: '/' });
  
  // 动态加载完整GTAG脚本
  var gaScript = document.createElement('script');
  gaScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-Eaaaaaaaa';
  document.head.appendChild(gaScript);

  gaScript.onload = function() {
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-Eaaaaaaaa');
  };
  
  // 隐藏Cookie横幅
  document.getElementById('cookieBanner').style.display = 'none';
}

3. 修复refuseAllCookies函数

修复语法、匹配GA Cookie属性、清理GA实例：

function refuseAllCookies() {
  // 记录用户拒绝状态
  Cookies.set('cookie_consent', 'refused', { expires: 365, path: '/' });
  
  // GA Cookie的通用属性（需和GA创建时一致）
  var cookieAttrs = {
    path: '/',
    // 若网站用HTTPS，启用此行：secure: true,
    // 若为子域名网站，启用此行：domain: 'yourdomain.com'
  };
  
  // 删除所有GA相关Cookie
  ['_ga', '_gid', '_ga_Eaaaaaaaa'].forEach(function(cookieName) {
    Cookies.remove(cookieName, cookieAttrs);
  });
  
  // 清除GA运行环境，阻止后续跟踪
  if (window.dataLayer) window.dataLayer = [];
  delete window.gtag;
  
  // 隐藏横幅
  document.getElementById('cookieBanner').style.display = 'none';
}

4. 增加页面加载时的偏好检查

自动读取用户之前的选择，避免重复弹窗：

window.addEventListener('load', function() {
  var consent = Cookies.get('cookie_consent');
  if (consent === 'accepted') {
    acceptAllCookies();
  } else if (consent === 'refused') {
    document.getElementById('cookieBanner').style.display = 'none';
  }
});

完整修复代码 #

<?php session_start() ?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Création de Cookie</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.1/js.cookie.min.js"></script>
</head>
<body>
<script>
function acceptAllCookies() {
  Cookies.set('cookie_consent', 'accepted', { expires: 365, path: '/' });
  
  var gaScript = document.createElement('script');
  gaScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-Eaaaaaaaa';
  document.head.appendChild(gaScript);

  gaScript.onload = function() {
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-Eaaaaaaaa');
  };
  
  document.getElementById('cookieBanner').style.display = 'none';
}

function refuseAllCookies() {
  Cookies.set('cookie_consent', 'refused', { expires: 365, path: '/' });
  
  var cookieAttrs = {
    path: '/',
    // secure: true,
    // domain: 'yourdomain.com'
  };
  
  ['_ga', '_gid', '_ga_Eaaaaaaaa'].forEach(function(cookieName) {
    Cookies.remove(cookieName, cookieAttrs);
  });
  
  if (window.dataLayer) window.dataLayer = [];
  delete window.gtag;
  
  document.getElementById('cookieBanner').style.display = 'none';
}

window.addEventListener('load', function() {
  var consent = Cookies.get('cookie_consent');
  if (consent === 'accepted') {
    acceptAllCookies();
  } else if (consent === 'refused') {
    document.getElementById('cookieBanner').style.display = 'none';
  }
});
</script>
<div id="cookieBanner" style="background-color: #fff; padding: 10px; border: 1px solid #ccc; position: fixed; bottom: 0; left: 0; width: 100%;">
    <p>Nous utilisons des cookies pour améliorer votre expérience. Veuillez choisir vos préférences :</p>
    <button onclick="acceptAllCookies()">Accepter tous les cookies</button>
    <button onclick="refuseAllCookies()">Refuser tous les cookies</button>
</div>
</body>
</html>

测试注意事项 #

• 测试前清空浏览器现有Cookie，避免旧GA Cookie干扰
• HTTPS网站必须启用secure: true属性，否则无法删除GA的Secure Cookie
• 子域名网站需配置正确的domain属性

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