cryptique-sdk 1.2.16 → 1.2.18

package/lib/esm/index.js

@@ -90,8 +90,8 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
 
     // Geolocation API
     GEOLOCATION: {
-      PRIMARY_URL: "https://ipinfo.io/json?token=73937f74acc045",
-      BACKUP_URL: "https://ipinfo.io/json?token=73937f74acc045&http=1.1",
+      PRIMARY_URL: "https://ipinfo.io/json?token=8fc6409059aa39",
+      BACKUP_URL: "https://ipinfo.io/json?token=8fc6409059aa39&http=1.1",
       TIMEOUT_MS: 5000                                  // 5 second timeout
     },
 
@@ -4997,19 +4997,26 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
     startCopyPasteTracking() {
       try {
         document.addEventListener('copy', (event) => {
+          const sel = window.getSelection();
           const copyData = {
             type: 'copy_action',
-            selectedText: window.getSelection().toString().substring(0, 100),
+            selectedText: sel ? sel.toString().substring(0, 100) : '',
             target: {
               tagName: event.target?.tagName || '',
               id: event.target?.id || ''
             },
             path: window.location.pathname
           };
-          
           InteractionManager.add('copyPasteEvents', copyData);
+          // Fire structured auto-event (low volume — only when user explicitly copies)
+          EventsManager.trackAutoEvent('copy_action', {
+            text_length: sel ? sel.toString().length : 0,
+            element_id:  event.target?.id    || '',
+            element_tag: event.target?.tagName?.toLowerCase() || '',
+            element_class: (event.target?.className || '').split(' ').filter(Boolean).slice(0, 3).join(' '),
+          });
         });
-        
+
         document.addEventListener('paste', (event) => {
           const pasteData = {
             type: 'paste_action',
@@ -5019,7 +5026,6 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
             },
             path: window.location.pathname
           };
-          
           InteractionManager.add('copyPasteEvents', pasteData);
         });
       } catch (error) {
@@ -5045,8 +5051,15 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
             },
             path: window.location.pathname
           };
-          
           InteractionManager.add('contextMenuEvents', contextData);
+          // Fire structured auto-event (low volume — only when user right-clicks)
+          EventsManager.trackAutoEvent('context_menu', {
+            element_tag:   event.target?.tagName?.toLowerCase() || '',
+            element_id:    event.target?.id    || '',
+            element_class: (event.target?.className || '').split(' ').filter(Boolean).slice(0, 3).join(' '),
+            page_x:        event.pageX,
+            page_y:        event.pageY,
+          });
         });
       } catch (error) {
         }
@@ -5504,74 +5517,376 @@ 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; }
+          });
 
-        const viewTimers = new Map(); // elementKey → setTimeout handle
-        const reported = new Set();  // elementKey → already fired once per page load
+        // enterTimes: key → { enterTime, el } — tracks elements currently in viewport
+        const enterTimes  = new Map();
+        const observedEls = new WeakSet(); // prevents double-observing same DOM node
+
+        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] });
+
+        const observe = (el) => {
+          if (!observedEls.has(el)) { observedEls.add(el); observer.observe(el); }
+        };
 
-        // Observe existing elements
-        getTrackableElements().forEach(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.
+     *
+     * 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 + 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}]
+        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);
+          const col  = Math.min(GRID_SIZE - 1, Math.max(0, Math.floor((pageX / docW) * GRID_SIZE)));
+          const row  = Math.min(GRID_SIZE - 1, Math.max(0, Math.floor((pageY / docH) * GRID_SIZE)));
+          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) => {
+          if (moveThrottle) return;
+          moveThrottle = true;
+          setTimeout(() => { moveThrottle = false; }, 100);
+          const key = getGridCell(e.pageX, e.pageY);
+          moveGrid.set(key, (moveGrid.get(key) || 0) + 1);
+        }, { passive: true });
+
+        // ── 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) {
+            hoverStarts.set(e.target, Date.now());
+          }
+        }, { passive: true });
+        document.addEventListener('mouseout', (e) => {
+          const target = e.target;
+          if (!target || !hoverStarts.has(target)) return;
+          const dwell = Date.now() - hoverStarts.get(target);
+          hoverStarts.delete(target);
+          if (dwell < 100) return; // skip accidental hovers
+          try {
+            const rect = target.getBoundingClientRect();
+            const cx   = rect.left + rect.width  / 2 + window.scrollX;
+            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 });
+
+        // ── Tab visibility → tab_switches + total_tab_hidden_ms
+        document.addEventListener('visibilitychange', () => {
+          if (document.hidden) {
+            tabHiddenTime = Date.now();
+            tabSwitches++;
+          } else if (tabHiddenTime !== null) {
+            totalTabHiddenMs += Date.now() - tabHiddenTime;
+            tabHiddenTime = null;
+          }
+        });
+
+        // ── 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;
+          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 });
+
+        // ── Field dwell → per-field focus duration (no content captured)
+        const fieldFocusTimes = new Map();
+        document.addEventListener('focus', (e) => {
+          const t = e.target;
+          if (!t || !['INPUT', 'SELECT', 'TEXTAREA'].includes(t.tagName)) return;
+          if (t.type === 'hidden') return;
+          fieldFocusTimes.set(t, Date.now());
+        }, true);
+        document.addEventListener('blur', (e) => {
+          const t = e.target;
+          if (!t || !fieldFocusTimes.has(t)) return;
+          const dwell = Date.now() - fieldFocusTimes.get(t);
+          fieldFocusTimes.delete(t);
+          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 || '');
+          fieldDwells.push({
+            field_id:    (t.id || t.name || t.type || '').substring(0, 100),
+            field_label: (label || '').substring(0, 100),
+            field_type:  t.type || t.tagName.toLowerCase(),
+            dwell_ms:    dwell,
+            was_filled:  !!(t.value && t.value.length > 0),
+          });
+        }, 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 = [];
+          grid.forEach((val, key) => {
+            if (val > 0) {
+              const col = Math.floor(key / GRID_SIZE);
+              const row = key % GRID_SIZE;
+              out.push([col, row, Math.round(val)]);
+            }
+          });
+          return out;
+        }
+
+        let summarySent = false;
+        function firePageSummary() {
+          if (summarySent) return; // only fire once per page lifecycle
+          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 {
+            // 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,
+              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,
+              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,
+              viewport_height: window.innerHeight,
+            });
+          } catch (_) {}
         }
+
+        // Fire on hard navigation / tab close (pagehide is more reliable than beforeunload)
+        window.addEventListener('pagehide', firePageSummary);
+        // Also fire when tab becomes hidden (covers SPA navigation that doesn't fire pagehide)
+        document.addEventListener('visibilitychange', () => {
+          if (document.hidden) firePageSummary();
+        });
+      } catch (error) {}
     },
 
     /**
@@ -5597,6 +5912,7 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
       this.startAdvancedFormTracking();
       this.startFormAbandonmentTracking();
       this.startElementVisibilityTracking();
+      this.startPageSummaryTracking();
     }
   };
 
@@ -6425,7 +6741,12 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
         // Performance
         'page_performance': 'performance',
         // Visibility
-        'element_view': 'visibility'
+        'element_view': 'visibility',
+        // Page summary (aggregate)
+        'page_summary': 'interaction',
+        // Clipboard & context
+        'copy_action':  'interaction',
+        'context_menu': 'interaction',
       };
 
       return categoryMap[eventName] || 'other';
@@ -8222,6 +8543,7 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
  * The script.js file is inlined during the build process by Rollup.
  */
 
+
 // Create a wrapper that provides programmatic initialization
 const CryptiqueSDK = {
   /**