Last active
March 26, 2021 18:04
-
-
Save mbaersch/5b4d688cb6d93997ebd72128a85f7c78 to your computer and use it in GitHub Desktop.
PiwikPro Tag Manager Debug Resize
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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
Mehr dazu siehe https://www.markus-baersch.de/blog/piwikpro-tag-manager-debug-panel-vergroessern/