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/app/views/admin/analytics/show.html.erb

@@ -95,27 +95,43 @@
 
   <% if @cells.any? %>
     <div class="admin-heatmap-stage" id="admin-heatmap-stage">
-      <% if @preview_url.present? %>
-        <iframe
-          class="admin-heatmap-frame"
-          src="<%= @preview_url %>"
-          title="<%= t("admin.analytics.show.preview_title") %>"
-          loading="lazy"
-          referrerpolicy="no-referrer"
-        ></iframe>
+      <% if @snapshot&.image&.attached? %>
+        <div
+          class="admin-heatmap-scaler"
+          id="admin-heatmap-scaler"
+          data-design-width="<%= [@snapshot.width, 1].max %>"
+          data-design-height="<%= [@snapshot.height, 1].max %>"
+        >
+          <%= image_tag url_for(@snapshot.image),
+                class: "admin-heatmap-shot",
+                id: "admin-heatmap-shot",
+                alt: t("admin.analytics.show.preview_title") %>
+          <canvas
+            id="admin-heatmap"
+            class="admin-heatmap-overlay"
+            data-grid="<%= @grid %>"
+            data-max="<%= [@max_weight, 1].max %>"
+            data-cells="<%= @cells.map { |(x, y), c| { x: x, y: y, c: c } }.to_json %>"
+          ></canvas>
+        </div>
+        <p class="muted admin-table-sub" style="margin: 0.75rem 1rem 1rem;">
+          <%= t("admin.analytics.show.snapshot_meta",
+                device: @snapshot.device,
+                at: l(@snapshot.captured_at, format: :short)) %>
+        </p>
       <% else %>
         <div class="admin-heatmap-fallback" aria-hidden="true"></div>
-        <p class="muted admin-heatmap-fallback-note"><%= t("admin.analytics.show.preview_unavailable") %></p>
+        <p class="muted admin-heatmap-fallback-note"><%= t("admin.analytics.show.snapshot_missing") %></p>
+        <canvas
+          id="admin-heatmap"
+          class="admin-heatmap-overlay"
+          data-grid="<%= @grid %>"
+          data-max="<%= [@max_weight, 1].max %>"
+          data-cells="<%= @cells.map { |(x, y), c| { x: x, y: y, c: c } }.to_json %>"
+        ></canvas>
       <% end %>
-      <canvas
-        id="admin-heatmap"
-        class="admin-heatmap-overlay"
-        data-grid="<%= @grid %>"
-        data-max="<%= [@max_weight, 1].max %>"
-        data-cells="<%= @cells.map { |(x, y), c| { x: x, y: y, c: c } }.to_json %>"
-      ></canvas>
     </div>
-    <script src="/admin-analytics-heatmap.js?v=2" defer></script>
+    <script src="/admin-analytics-heatmap.js?v=4" defer></script>
   <% else %>
     <p class="empty"><%= t("admin.analytics.show.no_points") %></p>
   <% end %>

backend/app/views/layouts/admin.html.erb

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="robots" content="noindex, nofollow">
   <%= csrf_meta_tags %>
-  <link rel="stylesheet" href="/admin.css?v=13">
+  <link rel="stylesheet" href="/admin.css?v=15">
   <% if content_for?(:replay_archive_styles) %>
     <link rel="stylesheet" href="/marketing.css?v=42">
   <% end %>

backend/app/views/layouts/marketing.html.erb

@@ -26,7 +26,7 @@
     <script src="/password-toggle.js?v=2" defer></script>
     <link rel="stylesheet" href="/confirm-forms.css?v=4">
     <script src="/confirm-forms.js?v=7" defer></script>
-    <script src="/site-analytics.js?v=3" defer></script>
+    <script src="/site-analytics.js?v=4" defer></script>
     <script src="/cookie-consent.js?v=2" defer></script>
   </body>
 </html>

backend/app/views/layouts/marketing_live.html.erb

@@ -21,7 +21,7 @@
     <%= render "shared/marketing_footer" %>
     <link rel="stylesheet" href="/confirm-forms.css?v=4">
     <script src="/confirm-forms.js?v=7" defer></script>
-    <script src="/site-analytics.js?v=3" defer></script>
+    <script src="/site-analytics.js?v=4" defer></script>
     <script src="/cookie-consent.js?v=2" defer></script>
   </body>
 </html>