Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
adjust size of Matomo Tag Manager preview / debug console
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.