Tag Manager: Change the location of Preview window

[KarthikRaja1388]

Possibility of changing the location of Preview window.

Request from a user: We are working on measuring a chatbot. I use Matomo Tag Manager and the preview/debug functionality to test the triggers. However, because there is no option to minimize/resize the preview/debug mode i am not able to use this option on the chatbot. Since the chatbot is located at the right-bottom of the page (and the preview/debug mode overlays this).

[tsteur]

If someone is keen to work on this here would be a start based on URL parameter:

diff --git a/javascripts/previewmode.js b/javascripts/previewmode.js
index f9121a3..cdd4ebc 100644
--- a/javascripts/previewmode.js
+++ b/javascripts/previewmode.js
@@ -5,7 +5,12 @@ function htmlToElement(content)
     return div.firstChild;
 }
 
-function createDebugFrame()
+function createDebugFrameTop()
+{
+    return htmlToElement('<iframe id="mtmDebugFrame" src="about:blank" frameborder="0" style="background-color:#edecec !important; clip: initial !important; display: inline !important; height:33% !important; opacity: 1 !important; visibility:visible !important; padding:0 !important; margin:0 !important; border:0 !important; border-top: 2px solid #fff !important; position:fixed !important; top:0 !important; left:0 !important; bottom:initial !important; width:100% !important; z-index:999999999 !important;"></iframe>');
+}
+
+function createDebugFrameBottom()
 {
     return htmlToElement('<iframe id="mtmDebugFrame" src="about:blank" frameborder="0" style="background-color:#edecec !important; clip: initial !important; display: inline !important; height:33% !important; opacity: 1 !important; visibility:visible !important; padding:0 !important; margin:0 !important; border:0 !important; border-top: 2px solid #fff !important; position:fixed !important; bottom:0 !important; left:0 !important; top:initial !important; width:100% !important; z-index:999999999 !important;"></iframe>');
 }
@@ -20,7 +25,12 @@ function renderPreviewFrame(theContent)
 
     if (!previewFrame) {
         // might already exist when embedding multiple containers
-        previewFrame = createDebugFrame();
+        if (location.href.indexOf('mtmDebug=top') > 0) {
+            previewFrame = createDebugFrameTop();
+        } else {
+            previewFrame = createDebugFrameBottom();
+        }
+
         document.body.appendChild(previewFrame);
 
         var theDoc = previewFrame.contentDocument || previewFrame.contentWindow.document;

Ideally though there was a feature to move the debug frame so it's easer to use and the setting persisted in cookies. controlling it per URL parameter wouldn't be needed then.

[AltamashShaikh]

can anyone check #470 here?
will this solution be more useful or the solution discussed in comments to move to top will be more helpful?

[Starker3]

@AltamashShaikh #470 looks like a better solution to this problem. One thing I noticed though is that the preview window shows up at the bottom of the page and not at the bottom of the viewport when it first renders. This might confuse some people who are used to it showing at the bottom of the viewport always.
For example:

Users would need to scroll to the bottom of the page to see it or to move it if the page is much longer (For example this might be a bigger issue on single page/infinite scroll websites)

It might also be a minor issue for pages that are smaller than the viewport that it shows up in the middle of the page.

Something that might also be useful for some people is if they could resize the preview mode window (But I guess its not really necessary for right now)

[AltamashShaikh]

@Starker3 I removed the previous solution of drag and drop and updated with a simple link "Stick to Top/Stick to Bottom"