如何将GTM容器内动态注入脚本的async改为defer属性

GTM主脚本初始化时设置的defer属性仅作用于主gtm.js本身，容器内配置的标签脚本是主脚本运行后动态创建的，GTM源码默认强制给这类脚本加async属性，没有内置配置项可以直接修改，需要通过DOM监听在脚本插入页面前拦截修改属性。

操作步骤 #

• 把下面的拦截脚本放在你现有GTM初始化代码之前，确保监听逻辑在GTM主脚本加载运行前就启动，避免漏过最早注入的标签脚本：

// 拦截GTM动态注入的脚本，替换async为defer
new MutationObserver(mutations => {
  mutations.forEach(mut => {
    mut.addedNodes.forEach(node => {
      if (node.tagName !== 'SCRIPT') return;
      // 匹配GTM相关脚本，避免影响其他第三方动态脚本
      const isGtmScript = node.src.includes('googletagmanager.com') || node.hasAttribute('data-gtm-id');
      if (isGtmScript && node.async) {
        node.async = false;
        node.defer = true;
      }
    })
  })
}).observe(document.documentElement, {
  childList: true,
  subtree: true
});

• 你原来给主GTM脚本配置的j.defer = true逻辑可以完全保留，不需要修改，和上述拦截代码配合即可覆盖所有GTM相关脚本。

注意事项 #

不要直接全局替换页面所有动态脚本的async属性，会导致其他非GTM的第三方脚本加载顺序错乱，上述代码仅匹配GTM域名下的脚本和带GTM标识属性的脚本，不会干扰页面其他资源的正常加载。

如果部分自定义HTML标签里你自行编写的脚本注入逻辑没有带GTM标识，可以在匹配规则里补充对应脚本的域名特征即可。

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