VueJS多租户应用中动态插入Google Tag Manager脚本后无法被Google Tag Assistant识别ID的问题

嗨，我来帮你分析下这个问题~

你遇到的核心问题是：用insertAdjacentHTML把GTM脚本插入到DOM后，虽然在HTML里能看到代码，但浏览器并没有实际执行这段脚本，所以Google Tag Assistant自然识别不到GTM的ID。

为什么会这样？ #

insertAdjacentHTML只是把字符串解析成DOM节点插入到页面中，但对于其中的<script>标签，浏览器出于安全和性能考量，默认不会自动执行里面的代码——它只会把脚本节点加到DOM里，不会触发脚本的执行逻辑，GTM的初始化代码没跑起来，Tag Assistant就检测不到对应的ID。

解决方案：动态创建并执行script元素 #

与其直接插入HTML字符串，不如手动创建<script>元素，把GTM的代码注入进去并挂载到页面，这样浏览器会正常执行脚本。这里分两种情况处理：

情况1：数据库里的脚本是内联GTM初始化代码

假设你从数据库拿到的client.customScripts是这样的（生产时XXXX会替换成真实ID）：

<script>(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','XXXX');</script>

你可以这么处理：

mounted() {
  const actualTenantId = '你的租户真实ID'; // 替换成实际获取的ID
  // 先提取脚本里的内联代码，替换占位符
  const scriptContent = client.customScripts
    .replace('<script>', '')
    .replace('</script>', '')
    .replace('XXXX', actualTenantId);
  
  // 创建script元素并注入代码
  const scriptEl = document.createElement('script');
  scriptEl.innerHTML = scriptContent;
  document.head.appendChild(scriptEl);

  // 如果还有noscript部分的GTM代码，也要单独处理插入到body开头
  const noscriptContent = client.customNoscriptScripts; // 假设你还有noscript的字符串
  if (noscriptContent) {
    const noscriptEl = document.createElement('noscript');
    noscriptEl.innerHTML = noscriptContent.replace('XXXX', actualTenantId);
    document.body.insertAdjacentElement('afterbegin', noscriptEl);
  }
}

情况2：数据库里的脚本是指向GTM的src链接

如果你的脚本是类似<script src="https://www.googletagmanager.com/gtm.js?id=XXXX"></script>这种，那就更简单：

mounted() {
  const actualTenantId = '你的租户真实ID';
  const scriptEl = document.createElement('script');
  scriptEl.src = `https://www.googletagmanager.com/gtm.js?id=${actualTenantId}`;
  scriptEl.async = true;
  document.head.appendChild(scriptEl);

  // 同样处理noscript部分
  const noscriptEl = document.createElement('noscript');
  noscriptEl.innerHTML = `<iframe src="https://www.googletagmanager.com/ns.html?id=${actualTenantId}"
height="0" width="0" style="display:none;visibility:hidden"></iframe>`;
  document.body.insertAdjacentElement('afterbegin', noscriptEl);
}

额外注意事项 #

• 尽量在Vue的mounted钩子中执行这段代码，确保页面DOM已经渲染完成
• 如果是单页应用，切换租户时要注意清除之前的dataLayer状态，避免多个租户的GTM数据混淆
• 测试时，记得先开启Google Tag Assistant再刷新页面，因为Tag Assistant是在页面加载初期检测GTM脚本的，如果脚本是后期动态插入的，可能需要刷新后重新检测

备注：内容来源于stack exchange，提问作者Vinicius Yonezawa