Usa screenshot di pagina come sfondo heatmap al posto dell’iframe.

Cattura periodica client-side (con consenso), storage ActiveStorage e overlay allineato all’immagine.

Co-authored-by: Cursor <cursoragent@cursor.com>

backend/public/admin-analytics-heatmap.js

@@ -1,7 +1,6 @@
-/*! Admin heatmap overlay renderer (Hotjar-like radial blobs over page preview). */
+/*! Admin heatmap overlay on captured page screenshot. */
 (function () {
   function colorFor(t) {
-    // green -> yellow -> red
     if (t < 0.33) {
       var k = t / 0.33;
       return [67 + (255 - 67) * k, 160 + (235 - 160) * k, 71 * (1 - k)];
@@ -14,11 +13,36 @@
     return [255, 152 * (1 - k3), 0];
   }
 
-  function paint() {
+  function fit() {
     var canvas = document.getElementById("admin-heatmap");
     var stage = document.getElementById("admin-heatmap-stage");
+    var scaler = document.getElementById("admin-heatmap-scaler");
+    var shot = document.getElementById("admin-heatmap-shot");
     if (!canvas || !stage) return;
 
+    var designW = 1200;
+    var designH = 900;
+    if (scaler) {
+      designW = parseInt(scaler.getAttribute("data-design-width"), 10) || designW;
+      designH = parseInt(scaler.getAttribute("data-design-height"), 10) || designH;
+    }
+    if (shot && shot.naturalWidth > 0) {
+      designW = shot.naturalWidth;
+      designH = shot.naturalHeight;
+    }
+
+    if (scaler) {
+      scaler.style.width = designW + "px";
+      scaler.style.height = designH + "px";
+      var stageW = Math.max(stage.clientWidth, 320);
+      var scale = Math.min(1, stageW / designW);
+      scaler.style.transform = "scale(" + scale + ")";
+      stage.style.height = Math.max(420, Math.round(designH * scale)) + "px";
+    } else {
+      designW = Math.max(stage.clientWidth, 320);
+      designH = Math.max(stage.clientHeight, 480);
+    }
+
     var grid = parseInt(canvas.getAttribute("data-grid"), 10) || 40;
     var max = parseInt(canvas.getAttribute("data-max"), 10) || 1;
     var cells = [];
@@ -28,19 +52,17 @@
       cells = [];
     }
 
-    var width = Math.max(stage.clientWidth, 320);
-    var height = Math.max(stage.clientHeight, 480);
-    canvas.width = width;
-    canvas.height = height;
-    canvas.style.width = width + "px";
-    canvas.style.height = height + "px";
+    canvas.width = designW;
+    canvas.height = designH;
+    canvas.style.width = designW + "px";
+    canvas.style.height = designH + "px";
 
     var ctx = canvas.getContext("2d");
-    ctx.clearRect(0, 0, width, height);
+    ctx.clearRect(0, 0, designW, designH);
 
-    var cellW = width / grid;
-    var cellH = height / grid;
-    var radius = Math.max(cellW, cellH) * 1.8;
+    var cellW = designW / grid;
+    var cellH = designH / grid;
+    var radius = Math.max(cellW, cellH) * 2.2;
 
     cells.forEach(function (cell) {
       var intensity = Math.min(1, cell.c / max);
@@ -48,9 +70,16 @@
       var cx = (cell.x + 0.5) * cellW;
       var cy = (cell.y + 0.5) * cellH;
       var rgb = colorFor(intensity);
+      var alpha = 0.28 + intensity * 0.55;
       var grd = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius);
-      grd.addColorStop(0, "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + (0.2 + intensity * 0.55) + ")");
-      grd.addColorStop(1, "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ",0)");
+      grd.addColorStop(
+        0,
+        "rgba(" + Math.round(rgb[0]) + "," + Math.round(rgb[1]) + "," + Math.round(rgb[2]) + "," + alpha + ")"
+      );
+      grd.addColorStop(
+        1,
+        "rgba(" + Math.round(rgb[0]) + "," + Math.round(rgb[1]) + "," + Math.round(rgb[2]) + ",0)"
+      );
       ctx.fillStyle = grd;
       ctx.beginPath();
       ctx.arc(cx, cy, radius, 0, Math.PI * 2);
@@ -58,10 +87,19 @@
     });
   }
 
+  function boot() {
+    var shot = document.getElementById("admin-heatmap-shot");
+    fit();
+    if (shot) {
+      if (shot.complete && shot.naturalWidth > 0) fit();
+      else shot.addEventListener("load", fit);
+    }
+    window.addEventListener("resize", fit);
+  }
+
   if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", paint);
+    document.addEventListener("DOMContentLoaded", boot);
   } else {
-    paint();
+    boot();
   }
-  window.addEventListener("resize", paint);
 })();

backend/public/admin.css

@@ -962,22 +962,29 @@ body.admin-body {
 
 .admin-heatmap-stage {
   position: relative;
-  overflow: hidden;
+  overflow: auto;
+  width: 100%;
   min-height: 70vh;
   max-height: 85vh;
   border: 1px solid var(--card-border);
   border-radius: 10px;
-  background: #111;
+  background: #d7dbe2;
 }
 
-.admin-heatmap-frame {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  border: 0;
+.admin-heatmap-scaler {
+  position: relative;
+  transform-origin: top left;
   background: #fff;
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
+}
+
+.admin-heatmap-shot {
+  display: block;
+  width: 100%;
+  height: auto;
+  vertical-align: top;
   pointer-events: none;
+  user-select: none;
 }
 
 .admin-heatmap-fallback {
@@ -1003,9 +1010,8 @@ body.admin-body {
 
 .admin-heatmap-overlay {
   position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
+  left: 0;
+  top: 0;
   z-index: 1;
   pointer-events: none;
 }

backend/public/site-analytics.js

@@ -3,12 +3,14 @@
   "use strict";
 
   var ENDPOINT = "/analytics/events";
+  var SNAPSHOT_ENDPOINT = "/analytics/snapshot";
   var STORAGE_KEY = "mltv_cookie_consent";
   var COOKIE_NAME = "mltv_cookie_consent";
   var FLUSH_MS = 6000;
   var MAX_QUEUE = 60;
   var MOVE_THROTTLE_MS = 180;
   var MOVE_GRID = 40;
+  var SNAPSHOT_DELAY_MS = 4000;
 
   var queue = [];
   var moveBuckets = {};
@@ -195,6 +197,87 @@
     }, FLUSH_MS);
   }
 
+  function snapshotStorageKey() {
+    return "mltv_snap:" + location.pathname + ":" + deviceBucket();
+  }
+
+  function todayKey() {
+    var d = new Date();
+    return d.getUTCFullYear() + "-" + (d.getUTCMonth() + 1) + "-" + d.getUTCDate();
+  }
+
+  function alreadyCapturedToday() {
+    try {
+      return localStorage.getItem(snapshotStorageKey()) === todayKey();
+    } catch (e) {
+      return false;
+    }
+  }
+
+  function markCapturedToday() {
+    try {
+      localStorage.setItem(snapshotStorageKey(), todayKey());
+    } catch (e) { /* ignore */ }
+  }
+
+  function loadHtml2Canvas(cb) {
+    if (window.html2canvas) {
+      cb(window.html2canvas);
+      return;
+    }
+    var s = document.createElement("script");
+    s.src = "/vendor/html2canvas.min.js";
+    s.async = true;
+    s.onload = function () {
+      if (window.html2canvas) cb(window.html2canvas);
+    };
+    s.onerror = function () { /* ignore */ };
+    document.head.appendChild(s);
+  }
+
+  function captureSnapshot() {
+    if (!hasAnalyticsConsent() || alreadyCapturedToday()) return;
+    loadHtml2Canvas(function (html2canvas) {
+      var size = pageSize();
+      html2canvas(document.documentElement, {
+        scale: Math.min(1, 1400 / Math.max(size.width, 1)),
+        useCORS: true,
+        allowTaint: false,
+        logging: false,
+        windowWidth: size.width,
+        windowHeight: size.height,
+        scrollX: 0,
+        scrollY: 0
+      })
+        .then(function (canvas) {
+          if (!canvas || !canvas.toBlob) return;
+          canvas.toBlob(
+            function (blob) {
+              if (!blob || blob.size < 8000 || blob.size > 1800000) return;
+              var fd = new FormData();
+              fd.append("image", blob, "snapshot.jpg");
+              fd.append("path", location.pathname);
+              fd.append("device", deviceBucket());
+              fd.append("width", String(Math.round(size.width)));
+              fd.append("height", String(Math.round(size.height)));
+              fetch(SNAPSHOT_ENDPOINT, {
+                method: "POST",
+                body: fd,
+                credentials: "same-origin"
+              })
+                .then(function (res) {
+                  if (res.ok) markCapturedToday();
+                })
+                .catch(function () { /* ignore */ });
+            },
+            "image/jpeg",
+            0.72
+          );
+        })
+        .catch(function () { /* ignore */ });
+    });
+  }
+
   function start() {
     if (started) return;
     if (excludedPath(location.pathname)) return;
@@ -216,6 +299,7 @@
       flush(true);
     });
     scheduleFlush();
+    setTimeout(captureSnapshot, SNAPSHOT_DELAY_MS);
   }
 
   window.mltvSiteAnalyticsStart = start;