提示页面已经加载GTM

通过修改Google Tag Manager容器跟踪代码，可以在代码中添加一段js检测提示Google Tag Manager库已经被加载。

这个信息对你有什么意义呢？如果你直接通过GTM的界面操作，例如，在建立请求之前的界面操作是没有任何意义的。

你需要把下面的代码添加到容器跟踪代码里面，在+i+dl的桌面，在f.parentNode.insertBefore的前面:

j.addEventListener('load', function() {
  var _ge = new CustomEvent('gtm_loaded', { bubbles: true });
  d.dispatchEvent(_ge);
});

修改后的容器跟踪代码是这样的：

(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;

j.addEventListener('load', function() {
  var _ge = new CustomEvent('gtm_loaded', { bubbles: true });
  d.dispatchEvent(_ge);
});

f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXX');

当GTM容器跟踪代码从谷歌服务器被加载的时候，负载监听器将分派一个名为gtm_loaded的新浏览器事件，如果你想为这个事件建立一个判断，你可以再次使用addEventListener（）方法，如：

if (!!window.google_tag_manager) {
  // <a href="https://www.ichdata.com/tag/google-tag-manager" title="查看更多关于Google Tag Manager的文章" target="_blank">Google Tag Manager</a> has already been loaded
  doSomethingWith(window.google_tag_manager);
} else {
  window.addEventListener('gtm_loaded', function() {
    // <a href="https://www.ichdata.com/tag/google-tag-manager" title="查看更多关于Google Tag Manager的文章" target="_blank">Google Tag Manager</a> has been loaded
    doSomethingWith(window.google_tag_manager);
  });
}

在这个例子中，代码首先检查GTM是否已经被加载。 如果没有，它会在窗口对象上创建一个新的侦听器，等待gtm_loaded事件出现。 只要下载并初始化GTM库，就会调用该事件，并且gtm_loaded的侦听器将关闭。

说两句：这种检测就是一个判断跟踪，效果类似：检测Goolge Analytics和Google Tag Manager代码是否被浏览器屏蔽掉

来源：https://www.simoahava.com