Google Tag Manager – Hide debug frame by default

When we’re “working” with Google Tag Manager, the default debug view mode can become quite annoying, being visible all the time; personally I would prefer to keep it hidden by default and if I need it, to slide it up.

But by default, it’s always displayed. So, how can we hide it?

Personally I came to the following solution:

I created a new HTML tag (which I called “Hide GTM Options” as a good reference name) with the following code:

<script>
  var hideGtmFunc = function() {
    if (window.jQuery('iframe[src="about:blank"]').length > 0
        && window.jQuery('iframe[src="about:blank"]').height() > 0
    ) {
      window.jQuery('iframe[src="about:blank"]').height(0);
      window
        .jQuery('iframe[src="about:blank"]')
        .next()
        .height(0);
    } else {
      setTimeout(function() {
        hideGtmFunc();
      }, 50);
    }
  }
  if ({{Debug Mode}}) {
    hideGtmFunc();
  }
</script>