cryptique-sdk 1.2.17 → 1.2.19

package/lib/esm/index.js

@@ -5517,104 +5517,157 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
 
     /**
      * ElementVisibilityTracker - Emits element_view auto events when elements
-     * with IDs or data-track attributes enter the viewport for ≥ 1 second.
-     * Tells PMs whether users actually SAW key elements (CTAs, pricing, etc.)
-     * vs just didn't click them — completely different problems, opposite fixes.
+     * enter the viewport for ≥ 1 second, capturing the actual dwell duration.
+     *
+     * Covers interactive elements (buttons, links, inputs, headings, images) and
+     * any element with an id or data-cq-track attribute. Each viewport entry is
+     * tracked independently — if a user scrolls away and back, both dwells count.
+     * This gives accurate attention data for the heatmap attention overlay.
      */
     startElementVisibilityTracking() {
       try {
         if (typeof IntersectionObserver === 'undefined') return;
 
-        // Only observe elements with an id or data-cq-track attribute
+        // Observe interactive/structural elements in addition to id/data-cq-track
+        const TRACKABLE_SELECTOR = [
+          '[id]:not([id=""])', '[data-cq-track]',
+          'button', 'a[href]', 'input:not([type=hidden])', 'select', 'textarea',
+          'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img[alt]',
+          '[role="button"]', '[role="tab"]', '[role="menuitem"]', '[role="link"]'
+        ].join(', ');
+
         const getTrackableElements = () =>
-          document.querySelectorAll('[id]:not([id=""]), [data-cq-track]');
+          Array.from(document.querySelectorAll(TRACKABLE_SELECTOR)).filter(el => {
+            try { return el.getBoundingClientRect().height >= 20; } catch (_) { return true; }
+          });
+
+        // enterTimes: key → { enterTime, el } — tracks elements currently in viewport
+        const enterTimes  = new Map();
+        const observedEls = new WeakSet(); // prevents double-observing same DOM node
 
-        const viewTimers = new Map(); // elementKey → setTimeout handle
-        const reported = new Set();  // elementKey → already fired once per page load
+        function elementKey(el) {
+          return `${el.tagName}|${el.id || ''}|${el.getAttribute('data-cq-track') || ''}|${(el.textContent || '').trim().slice(0, 30)}`;
+        }
+
+        function getElementData(el) {
+          return {
+            element_id:       el.id || '',
+            element_name:     el.getAttribute('name') || el.getAttribute('data-cq-track') || '',
+            element_tag_name: el.tagName || '',
+            element_type:     el.type || el.getAttribute('type') || '',
+            element_class:    el.className || '',
+            element_text:     (el.textContent || '').trim().slice(0, 100)
+          };
+        }
 
         const observer = new IntersectionObserver((entries) => {
           entries.forEach((entry) => {
-            const el = entry.target;
-            const key = el.id || el.getAttribute('data-cq-track') || el.className;
-            if (!key || reported.has(key)) return;
+            const el  = entry.target;
+            const key = elementKey(el);
 
             if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
-              // Element entered viewport — start 1s timer
-              if (!viewTimers.has(key)) {
-                const enterTime = Date.now();
-                const timer = setTimeout(() => {
-                  if (reported.has(key)) return;
-                  reported.add(key);
-                  EventsManager.trackAutoEvent('element_view', {
-                    time_in_viewport_ms: Date.now() - enterTime,
-                    viewport_percent_visible: Math.round(entry.intersectionRatio * 100)
-                  }, {
-                    element_id: el.id || '',
-                    element_name: el.getAttribute('name') || el.getAttribute('data-cq-track') || '',
-                    element_tag_name: el.tagName || '',
-                    element_type: el.type || el.getAttribute('type') || '',
-                    element_class: el.className || '',
-                    element_text: (el.textContent || '').trim().slice(0, 100)
-                  });
-                  viewTimers.delete(key);
-                }, 1000);
-                viewTimers.set(key, timer);
+              // Element entered viewport — record entry time
+              if (!enterTimes.has(key)) {
+                enterTimes.set(key, { enterTime: Date.now(), el });
               }
             } else {
-              // Element left viewport before 1s — cancel timer
-              if (viewTimers.has(key)) {
-                clearTimeout(viewTimers.get(key));
-                viewTimers.delete(key);
+              // Element left viewport — emit actual dwell if ≥ 1s
+              const record = enterTimes.get(key);
+              if (record) {
+                const dwell = Date.now() - record.enterTime;
+                enterTimes.delete(key);
+                if (dwell >= 1000) {
+                  EventsManager.trackAutoEvent('element_view', {
+                    time_in_viewport_ms:      dwell,
+                    viewport_percent_visible: Math.round(entry.intersectionRatio * 100),
+                    scroll_y_at_view:         window.scrollY
+                  }, getElementData(el));
+                }
               }
             }
           });
-        }, { threshold: 0.5 });
+        }, { threshold: [0.5] });
 
-        // Observe existing elements
-        getTrackableElements().forEach(el => observer.observe(el));
+        const observe = (el) => {
+          if (!observedEls.has(el)) { observedEls.add(el); observer.observe(el); }
+        };
+
+        getTrackableElements().forEach(observe);
 
         // Observe elements added to DOM later (SPAs)
         if (typeof MutationObserver !== 'undefined') {
           new MutationObserver(() => {
-            getTrackableElements().forEach(el => {
-              if (!viewTimers.has(el.id || el.getAttribute('data-cq-track') || el.className)) {
-                observer.observe(el);
-              }
-            });
+            getTrackableElements().forEach(observe);
           }).observe(document.body, { childList: true, subtree: true });
         }
-      } catch (error) {
-        }
+
+        // On page unload, flush elements still in viewport
+        window.addEventListener('pagehide', () => {
+          enterTimes.forEach(({ enterTime, el }) => {
+            const dwell = Date.now() - enterTime;
+            if (dwell >= 1000) {
+              EventsManager.trackAutoEvent('element_view', {
+                time_in_viewport_ms:      dwell,
+                viewport_percent_visible: 100,
+                scroll_y_at_view:         window.scrollY
+              }, getElementData(el));
+            }
+          });
+        });
+      } catch (error) {}
     },
 
     /**
      * PageSummaryTracker — collects high-frequency signals in-memory and flushes
      * them as a single 'page_summary' auto-event on page unload.
      *
-     * This keeps event counts low (1 per page visit) while capturing:
-     *  - Mouse movement grid (move_grid)
-     *  - Hover dwell grid    (hover_grid)
+     * High-volume/continuous data lives here (grids, counts) to keep event volume low.
+     * Low-frequency, high-signal moments (exit_intent) are emitted as separate auto-events
+     * but their counters are also included here for correlation.
+     *
+     * Captures:
+     *  - Mouse movement grid (move_grid) + hover dwell grid (hover_grid)
+     *  - Element-level hover dwells for named/interactive elements (element_dwells)
      *  - Tab-switch count and hidden time
-     *  - Scroll reversal count
+     *  - Scroll reversal count + depths at each reversal (scroll_reversal_depths)
      *  - Per-field focus dwell times
+     *  - Exit intent count + scroll depth at last exit intent
+     *  - First interaction time (how long before user engaged)
+     *  - Performance: CLS score, long task count/max, INP
      */
     startPageSummaryTracking() {
       try {
-        const GRID_SIZE = 40;
-        // In-memory accumulators — never sent to the server individually
-        const moveGrid  = new Map(); // cellKey → move count
-        const hoverGrid = new Map(); // cellKey → total dwell_ms
-        const fieldDwells = [];      // [{field_id, field_label, field_type, dwell_ms, was_filled}]
-
-        let tabSwitches      = 0;
-        let totalTabHiddenMs = 0;
-        let tabHiddenTime    = null;
-        let scrollReversals  = 0;
+        const GRID_SIZE = 60;
 
-        // Track last significant scroll position for reversal detection
+        // In-memory accumulators — never sent to the server individually
+        const moveGrid         = new Map(); // cellKey → move count
+        const hoverGrid        = new Map(); // cellKey → total dwell_ms
+        const fieldDwells      = [];        // [{field_id, field_label, field_type, dwell_ms, was_filled}]
+        const elementDwellsMap = new Map(); // elemKey → {tag, id, text, dwell_ms}
+        const scrollReversalDepths = [];    // scroll depth % at each reversal
+
+        let tabSwitches               = 0;
+        let totalTabHiddenMs          = 0;
+        let tabHiddenTime             = null;
+        let scrollReversals           = 0;
+        let exitIntentCount           = 0;
+        let exitIntentLastScrollDepth = 0;
+        let firstInteractionMs        = null;
+        let clsScore                  = 0;
+        let longTasksCount            = 0;
+        let maxLongTaskMs             = 0;
+        let inpMs                     = 0;
+
+        const pageLoadTime  = Date.now();
         let lastSigScrollY  = window.scrollY;
         let lastSigDir      = 0; // 1=down, -1=up
 
+        // ── Helpers
+        function getScrollDepth() {
+          const maxScroll = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - window.innerHeight;
+          return maxScroll <= 0 ? 100 : Math.round((window.scrollY / maxScroll) * 100);
+        }
+
         function getGridCell(pageX, pageY) {
           const docW = Math.max(1, document.documentElement.scrollWidth || document.body.scrollWidth || window.innerWidth);
           const docH = Math.max(1, document.documentElement.scrollHeight || document.body.scrollHeight || window.innerHeight);
@@ -5623,6 +5676,39 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           return col * GRID_SIZE + row;
         }
 
+        // ── PerformanceObserver: CLS, Long Tasks, INP (best-effort, not all browsers)
+        try {
+          new PerformanceObserver(list => {
+            for (const e of list.getEntries()) {
+              if (!e.hadRecentInput) clsScore = Math.round((clsScore + e.value) * 1000) / 1000;
+            }
+          }).observe({ type: 'layout-shift', buffered: true });
+        } catch (_) {}
+        try {
+          new PerformanceObserver(list => {
+            for (const e of list.getEntries()) {
+              longTasksCount++;
+              if (e.duration > maxLongTaskMs) maxLongTaskMs = Math.round(e.duration);
+            }
+          }).observe({ type: 'longtask', buffered: true });
+        } catch (_) {}
+        try {
+          new PerformanceObserver(list => {
+            for (const e of list.getEntries()) {
+              if (e.duration > inpMs) inpMs = Math.round(e.duration);
+            }
+          }).observe({ type: 'event', durationThreshold: 40, buffered: true });
+        } catch (_) {}
+
+        // ── First interaction: time from page load to first meaningful engagement
+        const markFirstInteraction = () => {
+          if (firstInteractionMs === null) firstInteractionMs = Date.now() - pageLoadTime;
+        };
+        document.addEventListener('click',      markFirstInteraction, { once: true, passive: true });
+        document.addEventListener('keydown',    markFirstInteraction, { once: true, passive: true });
+        document.addEventListener('touchstart', markFirstInteraction, { once: true, passive: true });
+        window.addEventListener('scroll',       markFirstInteraction, { once: true, passive: true });
+
         // ── Mouse movement → move_grid (throttled to max 1 sample / 100 ms)
         let moveThrottle = false;
         document.addEventListener('mousemove', (e) => {
@@ -5633,7 +5719,8 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           moveGrid.set(key, (moveGrid.get(key) || 0) + 1);
         }, { passive: true });
 
-        // ── Hover dwell → hover_grid (track all elements, filter < 100 ms)
+        // ── Hover dwell → hover_grid + element_dwells for named/interactive elements
+        const ELEMENT_DWELL_TAGS = new Set(['BUTTON', 'A', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'INPUT', 'SELECT', 'TEXTAREA', 'IMG', 'LABEL']);
         const hoverStarts = new Map(); // element → enterTime
         document.addEventListener('mouseover', (e) => {
           if (e.target && e.target !== document.documentElement) {
@@ -5652,9 +5739,81 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
             const cy   = rect.top  + rect.height / 2 + window.scrollY;
             const key  = getGridCell(cx, cy);
             hoverGrid.set(key, (hoverGrid.get(key) || 0) + dwell);
+
+            // Element-level dwell: track named/interactive elements hovered ≥ 300ms
+            if (dwell >= 300 && (target.id || ELEMENT_DWELL_TAGS.has(target.tagName))) {
+              const elemKey = `${target.tagName}|${target.id || ''}|${(target.textContent || '').trim().slice(0, 30)}`;
+              const existing = elementDwellsMap.get(elemKey);
+              if (existing) {
+                existing.dwell_ms += dwell;
+              } else {
+                elementDwellsMap.set(elemKey, {
+                  tag:      target.tagName.toLowerCase(),
+                  id:       target.id || '',
+                  text:     (target.textContent || '').trim().slice(0, 50),
+                  dwell_ms: dwell
+                });
+              }
+            }
           } catch (_) {}
         }, { passive: true });
 
+        // ── Viewport visibility → viewport_element_dwells (replaces individual element_view events)
+        const viewportDwellsMap = new Map(); // elemKey → {tag,id,cls,text,dwell_ms,x,y,w,h}
+        const vpEnterTimes      = new Map(); // elemKey → {enterTime,x,y,w,h}
+        try {
+          if (typeof IntersectionObserver !== 'undefined') {
+            const VP_SELECTOR = [
+              '[id]:not([id=""])', '[data-cq-track]',
+              'button', 'a[href]', 'input:not([type=hidden])', 'select', 'textarea',
+              'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img[alt]',
+              '[role="button"]', '[role="tab"]', '[role="menuitem"]', '[role="link"]'
+            ].join(', ');
+            const vpKey = el => `${el.tagName}|${el.id || ''}|${(el.textContent || '').trim().slice(0, 30)}`;
+            const vpObserver = new IntersectionObserver(entries => {
+              entries.forEach(entry => {
+                const el  = entry.target;
+                const key = vpKey(el);
+                if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
+                  if (!vpEnterTimes.has(key)) {
+                    const r = el.getBoundingClientRect();
+                    vpEnterTimes.set(key, {
+                      enterTime: Date.now(),
+                      x: Math.round(r.left + window.scrollX),
+                      y: Math.round(r.top  + window.scrollY),
+                      w: Math.round(r.width),
+                      h: Math.round(r.height),
+                    });
+                  }
+                } else {
+                  const rec = vpEnterTimes.get(key);
+                  if (rec) {
+                    const dwell = Date.now() - rec.enterTime;
+                    vpEnterTimes.delete(key);
+                    if (dwell >= 1000) {
+                      const ex = viewportDwellsMap.get(key);
+                      if (ex) { ex.dwell_ms += dwell; }
+                      else {
+                        viewportDwellsMap.set(key, {
+                          tag:      el.tagName.toLowerCase(),
+                          id:       el.id || '',
+                          cls:      el.className ? String(el.className).trim().slice(0, 60) : '',
+                          text:     (el.textContent || '').trim().slice(0, 60),
+                          dwell_ms: dwell,
+                          x: rec.x, y: rec.y, w: rec.w, h: rec.h,
+                        });
+                      }
+                    }
+                  }
+                }
+              });
+            }, { threshold: [0.5] });
+            document.querySelectorAll(VP_SELECTOR).forEach(el => {
+              try { if (el.getBoundingClientRect().height >= 20) vpObserver.observe(el); } catch (_) {}
+            });
+          }
+        } catch (_) {}
+
         // ── Tab visibility → tab_switches + total_tab_hidden_ms
         document.addEventListener('visibilitychange', () => {
           if (document.hidden) {
@@ -5666,14 +5825,15 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           }
         });
 
-        // ── Scroll reversal detection (direction change > 200 px)
+        // ── Scroll reversal detection (direction change ≥ 200 px) + depth recording
         window.addEventListener('scroll', () => {
           const curr = window.scrollY;
           const diff = curr - lastSigScrollY;
-          if (Math.abs(diff) < 50) return; // ignore tiny movements
-          const dir  = diff > 0 ? 1 : -1;
+          if (Math.abs(diff) < 50) return;
+          const dir = diff > 0 ? 1 : -1;
           if (lastSigDir !== 0 && dir !== lastSigDir && Math.abs(curr - lastSigScrollY) >= 200) {
             scrollReversals++;
+            scrollReversalDepths.push(getScrollDepth());
           }
           if (Math.abs(diff) >= 50) { lastSigDir = dir; lastSigScrollY = curr; }
         }, { passive: true });
@@ -5691,7 +5851,7 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           if (!t || !fieldFocusTimes.has(t)) return;
           const dwell = Date.now() - fieldFocusTimes.get(t);
           fieldFocusTimes.delete(t);
-          if (dwell < 100) return; // skip accidental focus
+          if (dwell < 100) return;
           const label = t.id
             ? (document.querySelector(`label[for="${CSS.escape(t.id)}"]`)?.textContent?.trim() || t.placeholder || t.name || t.id)
             : (t.placeholder || t.name || t.type || '');
@@ -5704,6 +5864,26 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           });
         }, true);
 
+        // ── Exit intent: mouse leaving viewport toward the top (user about to navigate away)
+        // Also fires as a standalone auto-event for direct querying.
+        let lastExitIntentTime = 0;
+        document.addEventListener('mouseleave', (e) => {
+          if (e.clientY > 0 || e.relatedTarget !== null) return; // only top-edge exits
+          const now = Date.now();
+          if (now - lastExitIntentTime < 2000) return; // debounce: max once per 2s
+          lastExitIntentTime = now;
+          exitIntentCount++;
+          exitIntentLastScrollDepth = getScrollDepth();
+          EventsManager.trackAutoEvent('exit_intent', {
+            scroll_depth:    exitIntentLastScrollDepth,
+            time_on_page_ms: now - pageLoadTime,
+            scroll_y:        window.scrollY,
+            document_height: Math.min(
+              document.documentElement.scrollHeight || document.body.scrollHeight, 25000
+            )
+          }).catch(() => {});
+        });
+
         // ── Serialise grid Map to [[col, row, value], ...] sparse array
         function serializeGrid(grid) {
           const out = [];
@@ -5720,17 +5900,52 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
         let summarySent = false;
         function firePageSummary() {
           if (summarySent) return; // only fire once per page lifecycle
-          if (moveGrid.size === 0 && hoverGrid.size === 0 && fieldDwells.length === 0
-              && tabSwitches === 0 && scrollReversals === 0) return;
+          const hasData = moveGrid.size > 0 || hoverGrid.size > 0 || fieldDwells.length > 0
+            || tabSwitches > 0 || scrollReversals > 0 || exitIntentCount > 0
+            || firstInteractionMs !== null || clsScore > 0 || longTasksCount > 0;
+          if (!hasData) return;
           summarySent = true;
           try {
+            // Flush still-visible elements into viewportDwellsMap before summarising
+            vpEnterTimes.forEach((rec, key) => {
+              const dwell = Date.now() - rec.enterTime;
+              if (dwell < 1000) return;
+              const ex = viewportDwellsMap.get(key);
+              if (ex) { ex.dwell_ms += dwell; }
+              else {
+                const parts = key.split('|');
+                viewportDwellsMap.set(key, { tag: (parts[0] || '').toLowerCase(), id: parts[1] || '', cls: '', text: parts[2] || '', dwell_ms: dwell, x: rec.x, y: rec.y, w: rec.w, h: rec.h });
+              }
+            });
+            // Serialize viewport_element_dwells: filter ≥ 1000ms, sort desc, cap at 25
+            const viewportElementDwells = Array.from(viewportDwellsMap.values())
+              .filter(e => e.dwell_ms >= 1000)
+              .sort((a, b) => b.dwell_ms - a.dwell_ms)
+              .slice(0, 25);
+
+            // Serialize element_dwells: filter ≥ 300ms, sort desc, cap at 20
+            const elementDwells = Array.from(elementDwellsMap.values())
+              .filter(e => e.dwell_ms >= 300)
+              .sort((a, b) => b.dwell_ms - a.dwell_ms)
+              .slice(0, 20);
+
             EventsManager.trackAutoEvent('page_summary', {
-              scroll_reversals:  scrollReversals,
-              tab_switches:      tabSwitches,
-              total_tab_hidden_ms: totalTabHiddenMs,
-              move_grid:  serializeGrid(moveGrid),
-              hover_grid: serializeGrid(hoverGrid),
-              field_dwells: fieldDwells,
+              scroll_reversals:              scrollReversals,
+              scroll_reversal_depths:        scrollReversalDepths,
+              tab_switches:                  tabSwitches,
+              total_tab_hidden_ms:           totalTabHiddenMs,
+              move_grid:                     serializeGrid(moveGrid),
+              hover_grid:                    serializeGrid(hoverGrid),
+              field_dwells:                  fieldDwells,
+              element_dwells:                elementDwells,
+              viewport_element_dwells:       viewportElementDwells,
+              first_interaction_ms:          firstInteractionMs,
+              exit_intent_count:             exitIntentCount,
+              exit_intent_last_scroll_depth: exitIntentLastScrollDepth,
+              cls_score:                     clsScore,
+              long_tasks_count:              longTasksCount,
+              max_long_task_ms:              maxLongTaskMs,
+              inp_ms:                        inpMs,
               document_height: document.documentElement.scrollHeight || document.body.scrollHeight || 0,
               document_width:  document.documentElement.scrollWidth  || document.body.scrollWidth  || 0,
               viewport_width:  window.innerWidth,
@@ -5770,7 +5985,8 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
       this.startNetworkTracking();
       this.startAdvancedFormTracking();
       this.startFormAbandonmentTracking();
-      this.startElementVisibilityTracking();
+      // element_view events replaced by viewport_element_dwells inside page_summary
+      // this.startElementVisibilityTracking();
       this.startPageSummaryTracking();
     }
   };