cryptique-sdk 1.2.18 → 1.2.19

package/lib/cjs/index.js

@@ -5639,7 +5639,7 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
      */
     startPageSummaryTracking() {
       try {
-        const GRID_SIZE = 40;
+        const GRID_SIZE = 60;
 
         // In-memory accumulators — never sent to the server individually
         const moveGrid         = new Map(); // cellKey → move count
@@ -5760,6 +5760,62 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           } 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) {
@@ -5852,6 +5908,23 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           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)
@@ -5867,6 +5940,7 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
               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,
@@ -5913,7 +5987,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();
     }
   };

package/lib/esm/index.js

@@ -5637,7 +5637,7 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
      */
     startPageSummaryTracking() {
       try {
-        const GRID_SIZE = 40;
+        const GRID_SIZE = 60;
 
         // In-memory accumulators — never sent to the server individually
         const moveGrid         = new Map(); // cellKey → move count
@@ -5758,6 +5758,62 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           } 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) {
@@ -5850,6 +5906,23 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           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)
@@ -5865,6 +5938,7 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
               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,
@@ -5911,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();
     }
   };

package/lib/umd/index.js

@@ -5643,7 +5643,7 @@
        */
       startPageSummaryTracking() {
         try {
-          const GRID_SIZE = 40;
+          const GRID_SIZE = 60;
 
           // In-memory accumulators — never sent to the server individually
           const moveGrid         = new Map(); // cellKey → move count
@@ -5764,6 +5764,62 @@
             } 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) {
@@ -5856,6 +5912,23 @@
             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)
@@ -5871,6 +5944,7 @@
                 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,
@@ -5917,7 +5991,8 @@
         this.startNetworkTracking();
         this.startAdvancedFormTracking();
         this.startFormAbandonmentTracking();
-        this.startElementVisibilityTracking();
+        // element_view events replaced by viewport_element_dwells inside page_summary
+        // this.startElementVisibilityTracking();
         this.startPageSummaryTracking();
       }
     };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "cryptique-sdk",
-  "version": "1.2.18",
+  "version": "1.2.19",
   "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",