cryptique-sdk 1.2.16 → 1.2.18

package/lib/umd/index.js

@@ -96,8 +96,8 @@
 
       // 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
       },
 
@@ -5003,19 +5003,26 @@
       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',
@@ -5025,7 +5032,6 @@
               },
               path: window.location.pathname
             };
-            
             InteractionManager.add('copyPasteEvents', pasteData);
           });
         } catch (error) {
@@ -5051,8 +5057,15 @@
               },
               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) {
           }
@@ -5510,74 +5523,376 @@
 
       /**
        * 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) {}
       },
 
       /**
@@ -5603,6 +5918,7 @@
         this.startAdvancedFormTracking();
         this.startFormAbandonmentTracking();
         this.startElementVisibilityTracking();
+        this.startPageSummaryTracking();
       }
     };
 
@@ -6431,7 +6747,12 @@
           // 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';
@@ -8228,6 +8549,7 @@
    * The script.js file is inlined during the build process by Rollup.
    */
 
+
   // Create a wrapper that provides programmatic initialization
   const CryptiqueSDK = {
     /**

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "cryptique-sdk",
-  "version": "1.2.16",
+  "version": "1.2.18",
   "type": "module",
   "description": "Cryptique Analytics SDK - Comprehensive web analytics and user tracking for modern web applications",
   "main": "lib/cjs/index.js",
+  
   "module": "lib/esm/index.js",
   "browser": "lib/umd/index.js",
   "types": "lib/types/index.d.ts",