Google 跟踪代码管理器中的代码仅在调试/预览模式下工作

Question

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

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

标签配置是“自定义 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>

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

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

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

有一个我不使用的支持document.write 的选项。我已经尝试过选择和取消选择选项。没有运气。

请注意，我确保没有使用 jQuery，仅使用 Vanilla Javascript，没有 ES2015 或其他高级功能（箭头函数、反引号字符串模板，没什么花哨的）。

Answer 1

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

Answer 2

我遇到了同样的问题。

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

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

Answer 3

这非常有帮助。过去两天我一直在解决一个问题，想知道您是否有任何建议。我正在使用标签管理器。我将campaignSource 更新为URL 末尾的片段。当我以预览模式进入网站时，一切都按照我想要的方式进行。但是，一旦我离开预览模式，源就不会被更新。你有没有遇到过这种情况？