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, ie 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.

Answer 2

I had the same issue.

I had to create a second environment, and publish to that, before it would work outside of preview mode.

So you hit submit -> publish to environment (edit) -> create new environment pointed to your url.

Answer 3

This was super helpful. I have been working on a problem the past 2 days and was wondering if you had any suggestions. I am using tag manager. I updated the campaignSource to be the fragment at the end of the URL. When I go on to the website in preview mode everything works exactly how I want. However, once I leave preview mode source is not being updated. Has this ever happened to you?

Answer 4

For me I just needed to publish the container by clicking 'submit' (top right). The debug mode apparantly works for non-published containers. You can confirm it is published by clicking on the versions tab.