PiwikPro Tag Manager Debug Resize
<script> | |
/* | |
PIWIK PRO TAG MANAGER DEBUGGER RESIZE | |
adds 200px width to the PiwikPro Tag Manager debug panel and creates links (at top right) to enhance or decrease with in 200 pixel steps | |
usage: create new (async) html tag in PiwikPro Tag Manager, paste this code and fire tag on DOM ready, if "Preview Mode" is "1". | |
get preview status from stg_debug cookie as there is no built in variable for debug status (afaik) | |
*/ | |
function ppResizeDebug(w) { | |
var pnl = document.querySelector("#seventag_container_debugger"); | |
if (pnl) pnl.style.width = w.toString() + "px"; | |
showHideBtns(); | |
} | |
//hide buttons if panel is minimized or too small | |
function showHideBtns(){ | |
var bgr = document.querySelector("#biggerPreviewLink"); | |
var sml = document.querySelector("#smallerPreviewLink"); | |
var pnl = document.querySelector("#seventag_container_debugger"); | |
var w = pnl.clientWidth || parseInt(pnl.style.width) || 0; | |
if (bgr && sml) { | |
bgr.style.display = w>300 ? "inline-block" : "none"; | |
sml.style.display = bgr.style.display; | |
} | |
} | |
//resize on link click | |
function ppDebugAdd(x) { | |
var d = document.querySelector("#seventag_container_debugger"); | |
var w = d.clientWidth || parseInt(d.style.width) || 0; | |
if (d && (w>0)) ppResizeDebug(w+x); | |
return false; | |
} | |
//init with +200px and create resize links | |
setTimeout(function(){ | |
ppResizeDebug(600); | |
if (!document.querySelector("#biggerPreviewLink")) { | |
var dbg = document.querySelector("#seventag_container_debugger"); | |
if (!dbg) return; | |
dbg.style.maxWidth = "100%"; | |
var plnk = document.createElement('a'); | |
plnk.setAttribute('style', 'font-family:arial;font-size:13px;color:#fff;text-decoration:none;position:absolute;right:70px;top:17px'); | |
plnk.setAttribute('id', 'biggerPreviewLink'); | |
plnk.setAttribute('href', '#'); | |
plnk.innerHTML = "ᐊ"; | |
plnk.addEventListener('click', function(e){ | |
ppDebugAdd(200); | |
e.preventDefault(); | |
e.stopPropagation(); | |
return false; | |
}); | |
dbg.appendChild(plnk); | |
plnk = document.createElement('a'); | |
plnk.setAttribute('style', 'font-family:arial;font-size:13px;color:#fff;text-decoration:none;position:absolute;right:70px;top:30px'); | |
plnk.setAttribute('id', 'smallerPreviewLink'); | |
plnk.setAttribute('href', '#'); | |
plnk.innerHTML = "ᐅ"; | |
plnk.addEventListener('click', function(e){ | |
ppDebugAdd(-200); | |
e.preventDefault(); | |
e.stopPropagation(); | |
return false; | |
}); | |
dbg.appendChild(plnk); | |
//create observer for panel div if resized from inside iframe to show or hide resize links | |
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; | |
var observer = new MutationObserver(function(mutations) { | |
mutations.forEach(function(mutation) { | |
if(mutation.type==="attributes") setTimeout(showHideBtns, 1000); | |
}); | |
}); | |
var config = { attributes: true, childList: false, characterData: false } | |
observer.observe(dbg, config); | |
} | |
}, 1000); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Mehr dazu siehe https://www.markus-baersch.de/blog/piwikpro-tag-manager-debug-panel-vergroessern/