Google 跟踪代码管理器中的代码仅在 debug/preview 模式下工作

Question

我写了一些需要被 Google 标签管理器触发的代码。基本上，它会在页面中注入一些 HTML 元素并在几秒钟后显示一个弹出窗口。

可以在此处查看预期工作的行为：https://codepen.io/jfix/pen/dxdBVK

Tag配置为"Custom HTML"及以下代码，定时触发：

<style type="text/css">
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
div#popup {
  display: none;
}
.box {
  background: white;
  padding: 2em;
}
.bordered {
  border-radius: 10px 10px 10px 10px;
  box-shadow: 10px 10px 30px 10px rgba(0,0,0,0.75);
}
iframe#popupIframe {
  height: 600px;
  width: 810px;
  border: none;
  overflow: hidden;
  z-index: 4;
}
#popup #close {
  float: right;
  font-size: 200%;
  font-weight: bold;
  cursor: pointer;
}
</style>

<script>
window.addEventListener("load", function() {
    try {
      var body = document.querySelector("body");
      var div = document.createElement("div");
      div.innerHTML = '<div class="centered bordered box" id="popup">' + 
        '<div id="close">&times;</div>' +
        '<iframe id="popupIframe" src="about:blank" data-src="https://survey2018.oecd.org/Survey.aspx?s=0f083fb30cc34e04977ae35d45ce3258"></iframe>' + 
        '</div>';
      var popup = body.insertBefore(div, null);
    } catch(e) {
        console.log('Error in addEventListener:', e);
    }

  // display popup and load iframe on demand
  function showPopup() {
    try {
        var iframe = document.getElementById("popupIframe");
        var url = iframe.getAttribute("data-src");
        iframe.setAttribute("src", url);
        var popup = document.getElementById("popup");
        popup.style.display = "block";
        popup.style.zIndex = "3";
    } catch(e) {
        console.log('Error in showPopup():', e);
    }
  }

  // hide popup
  function dismissPopup() {
    try {
      var popup = document.getElementById("popup");
      popup.style.display = "none";
    } catch(e) {
      console.log('Error in dismissPopup(): ', e);
    }
  }

  // display popup after 3 seconds
  //setTimeout(showPopup, 3000); // GTM has already a waiting period of three seconds ...
  showPopup()

  // mechanics to dismiss popup when clicking
  // close button or anywhere outside it.
  popup.addEventListener("click", dismissPopup);
  window.addEventListener("click", function(event) {
    if (event.target !== popup) {
      dismissPopup();
    }
  });
});
</script>

只要我处于 Preview/Debug 模式，即 GTM Preview/Debug 窗格显示在目标页面上，它就可以正常工作。

例如，如果我从隐身 window 发布更改和测试，则什么也不会发生。控制台中没有错误消息，什么都没有。

我还更改了触发器以查看问题是否存在，不是在计时器上而是在 window 加载时触发标签，没有变化。

有一个 document.write 支持选项，我没有使用。我已经尝试使用选项 select 和 deselected。运气不好。

Note that I've made sure that no jQuery is used, only Vanilla Javascript, no ES2015 or other advanced features (arrow functions, backtick string templates, nothing fancy).

Answer 1

事实证明，出于某种原因，GTM 不喜欢 iframe 元素的打开和关闭元素，例如 <iframe src="..."></iframe>。我能够通过使用一个空的 <iframe src="..."/> 元素来实现我的目标。就这些了。

Answer 2

我遇到了同样的问题。

我必须创建第二个环境并发布到该环境，然后它才能在预览模式之外运行。

所以你点击提交 -> 发布到环境（编辑） -> 创建指向你的 url.

的新环境

Answer 3

对我来说，我只需要通过单击 'submit'（右上角）来发布容器。调试模式显然适用于未发布的容器。您可以通过单击版本选项卡确认它已发布。

Google 跟踪代码管理器中的代码仅在 debug/preview 模式下工作

Code in Google Tag Manager only working in debug/preview mode

javascript

google-tag-manager