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

Question

I have written some code that needs to get triggered by Google Tag Manager. Basically, it injects some HTML elements in a page and displays a popup, after a couple of seconds.

The behaviour as it is intended to work can be seen here: https://codepen.io/jfix/pen/dxdBVK

The Tag configuration is "Custom HTML" and the following code, with a timed trigger:

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

This works fine as long as I'm in Preview/Debug mode, i.e. the GTM Preview/Debug pane is displayed on the target page.

If I publish the change and test from an Incognito window for example, nothing happens. No error message in the console, nothing.

I've also changed the trigger to see whether the problem was there, to trigger the tag not on a timer, but on window load, no change.

There is an option for support for document.write which I don't use. I've tried with both the option select and deselected. No luck.

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

It turned out that for some reason GTM doesn't like opening and closing elements for the iframe element, like so <iframe src="..."></iframe>. I was able to achieve my goal by using an empty <iframe src="..."/> element. That was all.