Merge pull request #757 from ZenUml/fix/clarity-for-iframe

MrCoder · web-flow · commit 744eb8da3670 · 2025-05-06T19:41:55.000+10:00
feat(ContentWrap): enhance iframe handling with srcdoc and add Micros…
diff --git a/src/components/ContentWrap.jsx b/src/components/ContentWrap.jsx
@@ -184,12 +184,19 @@ export default class ContentWrap extends Component {
     if (this.detachedWindow) {
       this.detachedWindow.postMessage({ contents }, '*');
     } else {
-      this.frame.src = this.frame.src;
-      setTimeout(() => {
-        that.frame.contentDocument.open();
-        that.frame.contentDocument.write(contents);
-        that.frame.contentDocument.close();
-      }, 10);
+      // Use srcdoc attribute which works better with Microsoft Clarity
+      // This allows Clarity to properly track interactions inside the iframe
+      if ('srcdoc' in this.frame) {
+        this.frame.srcdoc = contents;
+      } else {
+        // Fallback for older browsers that don't support srcdoc
+        this.frame.src = 'about:blank';
+        setTimeout(() => {
+          that.frame.contentDocument.open();
+          that.frame.contentDocument.write(contents);
+          that.frame.contentDocument.close();
+        }, 10);
+      }
     }
   }
 
diff --git a/src/utils.js b/src/utils.js
@@ -272,8 +272,22 @@ export function getCompleteHtml(html, css, js, item) {
     '<meta charset="UTF-8" />\n' +
     '<style id="zenumlstyle">\n' +
     css +
-    '\n</style>\n' +
-    '</head>\n' +
+    '\n</style>\n';
+    
+  // Add Microsoft Clarity tracking code to the iframe content
+  // This ensures Clarity can track user interactions inside the iframe
+  if (window.clarity) {
+    contents += 
+      '<script type="text/javascript">\n' +
+      '(function(c,l,a,r,i,t,y){\n' +
+      '  c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};\n' +
+      '  t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;\n' +
+      '  y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);\n' +
+      '})(window, document, "clarity", "script", window.CLARITY_PROJECT_ID || "");\n' +
+      '</script>\n';
+  }
+  
+  contents += '</head>\n' +
     '<body>\n' +
     html +
     '\n';
@@ -299,6 +313,7 @@ export function getCompleteHtml(html, css, js, item) {
 
   return contents;
 }
+/* eslint-disable max-params */
 
 export function saveAsHtml(item) {
   var htmlPromise = computeHtml(item.html, item.htmlMode);
