技术求助：如何实现OneTrust脚本优先于Google Tag Manager（GTM）执行？

要解决OneTrust与GTM的执行顺序问题，核心是等待OneTrust完全初始化完成后，再加载并执行GTM脚本。你之前尝试的方法存在几个关键问题：

• 仅调整head中的脚本顺序：如果OneTrust默认带async属性异步加载，浏览器会并行下载执行脚本，无法保证顺序。
• 给GTM加async/defer：这两个属性会让GTM异步加载，反而打破顺序控制逻辑。
• 用DOMContentLoaded触发GTM加载：该事件仅表示DOM构建完成，不代表OneTrust已经初始化完毕，时机不对。

推荐解决方案 #

方法1：监听OneTrust官方就绪事件

OneTrust加载完成后会触发OneTrustLoaded全局事件，通过监听这个事件来启动GTM加载：

// 监听OneTrust加载完成事件
window.addEventListener('OneTrustLoaded', function() {
  // 创建并插入GTM脚本
  const gtmScript = document.createElement('script');
  gtmScript.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-你的ID';
  gtmScript.async = false; // 禁用异步，确保按顺序执行
  document.head.appendChild(gtmScript);
});

// 兜底轮询方案：防止事件未触发的极端情况
function checkOneTrustReady() {
  // 检查OneTrust核心方法是否就绪
  if (window.OneTrust && typeof window.OneTrust.GetDomainData === 'function') {
    const gtmScript = document.createElement('script');
    gtmScript.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-你的ID';
    gtmScript.async = false;
    document.head.appendChild(gtmScript);
  } else {
    // 每100ms检查一次，可根据需求调整间隔和次数
    setTimeout(checkOneTrustReady, 100);
  }
}
// 启动兜底检查
checkOneTrustReady();

方法2：使用OneTrust初始化回调

如果是直接在页面中引入OneTrust脚本，可通过官方提供的OneTrustInit回调触发GTM加载：

<!-- 同步加载OneTrust脚本（移除async/defer属性） -->
<script src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js" type="text/javascript" charset="UTF-8" data-domain-script="你的OneTrust域名ID"></script>
<script>
// 定义OneTrust初始化完成后的回调
window.OneTrustInit = function() {
  // 加载GTM
  const gtmScript = document.createElement('script');
  gtmScript.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-你的ID';
  document.head.appendChild(gtmScript);
};
</script>

注意事项 #

• 不要给GTM脚本添加async或defer属性，确保它在OneTrust之后按顺序执行。
• 若使用OneTrust的Cookie横幅，还需确保用户的Cookie偏好设置完成后再加载GTM，可通过OneTrust.OnConsentChanged事件监听偏好变更。

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