如何实现用户接受Cookie后再加载Google Tag Manager脚本？

完全可以通过按钮点击触发脚本加载，而且不是必须调用外部.js文件（代码量少的话直接写在页面里就行，代码多的话抽成外部文件会更整洁），下面是具体实现思路和代码：

1. 保留你已有的阻止方案 #

继续用你当前的方式标记GTM脚本，同时给它加个id方便后续操作：

<script type="text/plain" data-categories="analytics" id="gtm-script">
  // 这里是你的Google Tag Manager完整代码
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXXXX');
</script>

2. 编写Cookie同意横幅和触发逻辑 #

直接在页面里添加横幅和脚本逻辑就行，核心思路是：

• 用localStorage记录用户的Cookie同意状态，避免重复弹窗
• 用户点击同意后，修改GTM脚本的执行权限并重新触发它

示例代码：

<!-- Cookie同意横幅 -->
<div id="cookie-banner" style="position: fixed; bottom: 0; left: 0; right: 0; background: #f5f5f5; padding: 1.5rem; text-align: center;">
  本网站使用分析类Cookie优化体验，是否同意启用？
  <button id="accept-cookies" style="margin-left: 1rem; padding: 0.5rem 1rem; background: #2196F3; color: white; border: none; border-radius: 4px;">同意</button>
  <button id="reject-cookies" style="margin-left: 0.5rem; padding: 0.5rem 1rem; background: #e0e0e0; border: none; border-radius: 4px;">拒绝</button>
</div>

<script>
// 检查用户是否已经同意过Cookie
const hasConsented = localStorage.getItem('cookie-consent') === 'accepted';
const banner = document.getElementById('cookie-banner');
const gtmScript = document.getElementById('gtm-script');

// 如果已同意，直接加载脚本并隐藏横幅
if (hasConsented) {
  loadGTM();
  banner.style.display = 'none';
} else {
  banner.style.display = 'block';
}

// 同意按钮点击事件
document.getElementById('accept-cookies').addEventListener('click', () => {
  localStorage.setItem('cookie-consent', 'accepted');
  loadGTM();
  banner.style.display = 'none';
});

// 拒绝按钮逻辑（可选）
document.getElementById('reject-cookies').addEventListener('click', () => {
  localStorage.setItem('cookie-consent', 'rejected');
  banner.style.display = 'none';
});

// 加载GTM脚本的核心函数
function loadGTM() {
  // 修改原脚本的type为可执行类型
  gtmScript.type = 'text/javascript';
  // 由于修改type后浏览器不会自动重新执行，需要把脚本内容放到新标签里运行
  const newScript = document.createElement('script');
  newScript.textContent = gtmScript.textContent;
  document.head.appendChild(newScript);
  // 移除原脚本避免重复
  gtmScript.remove();
}
</script>

关键说明 #

• 不需要额外的外部.js文件，把上面的逻辑直接写在页面的<script>标签里就能运行；如果你的项目有统一的JS文件，也可以把这段代码整合进去，方便后续维护。
• 用localStorage记录同意状态，用户下次访问时会自动加载脚本，不用重复弹窗。
• 重新创建脚本标签是因为修改原脚本的type属性后，浏览器不会自动重新执行它，必须把内容放到新标签里才能触发执行。

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