使用document.createElement添加Google Analytics 4脚本失败，求正确实现方式

你的代码问题在于：创建的<script>标签既没有内容也没指定外部脚本地址，还把GTM初始化逻辑放在了onload事件里——这个事件只有脚本加载外部资源时才会触发，导致你的初始化代码根本没机会运行。

下面是两种正确的实现方式，选一种即可：

方法一：直接插入带GTM初始化逻辑的脚本标签 #

这种方式和Google官方提供的代码逻辑完全一致，直接把自执行函数写入动态创建的script标签：

// 用户点击接受Cookie按钮后执行这段代码
function loadGTM() {
  const gtmScript = document.createElement('script');
  // 替换下面的 {GA-ID} 为你的实际GTM容器ID，比如 GTM-ABC123
  gtmScript.textContent = `(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', '{GA-ID}');`;
  document.head.appendChild(gtmScript);
}

// 绑定到接受Cookie按钮的点击事件（替换按钮ID为你页面的实际ID）
document.getElementById('accept-cookie-btn').addEventListener('click', loadGTM);

方法二：拆分逻辑，动态创建外部脚本标签 #

如果你想分开处理初始化逻辑和脚本加载，也可以这样写：

function loadGTM() {
  // 初始化dataLayer（如果页面还没创建的话）
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
  
  // 创建并插入GTM外部脚本
  const gtmScript = document.createElement('script');
  gtmScript.async = true;
  // 替换 {GA-ID} 为你的实际GTM容器ID
  gtmScript.src = `https://www.googletagmanager.com/gtm.js?id={GA-ID}`;
  
  // 把GTM脚本插在页面第一个script标签前面，和官方代码逻辑一致
  const firstScript = document.getElementsByTagName('script')[0];
  firstScript.parentNode.insertBefore(gtmScript, firstScript);
}

// 绑定点击事件
document.getElementById('accept-cookie-btn').addEventListener('click', loadGTM);

关键注意点 #

• 必须把代码中的{GA-ID}替换成你自己的GTM容器ID（格式为GTM-XXXXXX），否则脚本无法正确加载。
• 确保accept-cookie-btn是你页面中接受Cookie按钮的实际ID，或者根据你的按钮选择器调整绑定逻辑。

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