提示页面已经加载GTM

Google Tag Manager Haran 7年前 (2018-04-19) 3512次浏览 0个评论

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

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

提示页面已经加载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


如有疑问,可以在文章底部留言或邮件(haran.huang@ichdata.com) 我~
喜欢 (2)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址