adjust size of Matomo Tag Manager preview / debug console

matomo-resize-tagcode.html

<script>
//use this script to adjust size of Matomo Tag Manager preview / debug console
//usage: create html tag in MTM, paste this code and fire tag on DOM ready, if "Preview Mode" is "1"
var mtmPreviewSize;

//resize MTM preview via console 
function resizeMtmPreview(prz) {
  //only in preview mode
  if ({{PreviewMode}}) {
    var mtm = document.querySelector('iframe#mtmDebugFrame');
    //someday the id might change
    if (mtm) {
      mtm.style.height = prz.toString()+'%';
      if (prz > 0) mtmPreviewSize = prz;
      
      //add margin to body for 100% scrollable content 
      document.body.style.marginBottom= (prz + 10).toString()+'%';
     
      //add switch to DOM
      if (!document.querySelector('#mtmDebugSwitch')) {
        var swDiv = document.createElement("div"); 
        swDiv.id = "mtmDebugSwitch";
        swDiv.style.position = "fixed";
        swDiv.style.background = "#3450A3";
        swDiv.style.color = "#fff";
        swDiv.style.fontSize = "15px";
        swDiv.style.right = "20px";
        swDiv.style.bottom = "10px";
        swDiv.style.boxShadow = "0 2px 3px 0 rgba(0,0,0,0.16), 0 0px 3px 0 rgba(0,0,0,0.12);";
        swDiv.style.width = "20px";
        swDiv.style.height = "20px";
        swDiv.style.borderRadius = "50%";
        swDiv.style.zIndex = "10000000000";
       //quick and dirty button as innerHTML
        swDiv.innerHTML = "<a href='#' style='text-decoration:none;color:#fff' onclick='toggleMtmPreview();return false;' id='mtmSwitchButton'>\u25BC</a>";
        document.body.appendChild(swDiv); 
      }
    } 
  }
}

function toggleMtmPreview() {
  var mtm = document.querySelector('iframe#mtmDebugFrame'); 
  if (mtm.style.height === "0%") {
    resizeMtmPreview(mtmPreviewSize); 
    document.getElementById('mtmSwitchButton').innerHTML = "\u25BC"; 
  } else {
    resizeMtmPreview(0);  
    document.getElementById('mtmSwitchButton').innerHTML = '\u25B2'; 
  }
}

//initialize with 50% preview height 
resizeMtmPreview(50);

</script>