cryptique-sdk 1.1.7 → 1.1.8

package/lib/cjs/index.js

@@ -6903,11 +6903,15 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
         const isInteractive = isInteractiveElement(element);
         
         if (!isInteractive) {
-          // Capture coordinates before setTimeout
+          // Capture coordinates and page context before setTimeout (for heatmaps)
           const clickX = event.clientX;
           const clickY = event.clientY;
           const clickElement = element;
-          
+          const scrollX = window.scrollX != null ? window.scrollX : window.pageXOffset;
+          const scrollY = window.scrollY != null ? window.scrollY : window.pageYOffset;
+          const docHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
+          const docWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
+
           // Mark this click as potentially dead
           const clickId = `${now}_${Math.random().toString(36).substr(2, 9)}`;
           pendingDeadClicks.set(clickId, {
@@ -6917,7 +6921,13 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
             timestamp: now,
             url: window.location.href,
             clickX,
-            clickY
+            clickY,
+            page_x: event.pageX,
+            page_y: event.pageY,
+            scroll_x: scrollX,
+            scroll_y: scrollY,
+            document_height: docHeight,
+            document_width: docWidth
           });
           
           // Check after 1 second if navigation occurred or if it's still a dead click
@@ -6931,6 +6941,12 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
               
               EventsManager.trackAutoEvent('dead_click', {
                 click_coordinates: { x: pendingClick.clickX, y: pendingClick.clickY },
+                page_x: pendingClick.page_x,
+                page_y: pendingClick.page_y,
+                scroll_x: pendingClick.scroll_x,
+                scroll_y: pendingClick.scroll_y,
+                document_height: pendingClick.document_height,
+                document_width: pendingClick.document_width,
                 element_area: clickElement.offsetWidth * clickElement.offsetHeight,
                 element_category: pendingClick.elementCategory,
                 element_has_onclick: !!clickElement.onclick,
@@ -6946,9 +6962,19 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           }, 1000);
         }
 
-        // Track regular click with enhanced data
+        // Track regular click with enhanced data (viewport + page-relative for heatmaps)
+        const scrollX = window.scrollX != null ? window.scrollX : window.pageXOffset;
+        const scrollY = window.scrollY != null ? window.scrollY : window.pageYOffset;
+        const docHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
+        const docWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
         EventsManager.trackAutoEvent('element_click', {
           click_coordinates: { x: event.clientX, y: event.clientY },
+          page_x: event.pageX,
+          page_y: event.pageY,
+          scroll_x: scrollX,
+          scroll_y: scrollY,
+          document_height: docHeight,
+          document_width: docWidth,
           double_click: event.detail === 2,
           element_category: elementCategory
         }, elementData).catch(err => {
@@ -6973,11 +6999,12 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
         clearTimeout(scrollTimeout);
         
         scrollTimeout = setTimeout(() => {
-          const scrollDepth = Math.round((window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100);
-          
+          const maxScroll = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - window.innerHeight;
+          const scrollDepth = maxScroll <= 0 ? 100 : Math.round((window.scrollY / maxScroll) * 100);
+
           if (scrollDepth > maxScrollDepth) {
             maxScrollDepth = scrollDepth;
-            
+
             EventsManager.trackAutoEvent('page_scroll', {
               scroll_depth: scrollDepth,
               max_scroll_reached: maxScrollDepth,

package/lib/esm/index.js

@@ -6901,11 +6901,15 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
         const isInteractive = isInteractiveElement(element);
         
         if (!isInteractive) {
-          // Capture coordinates before setTimeout
+          // Capture coordinates and page context before setTimeout (for heatmaps)
           const clickX = event.clientX;
           const clickY = event.clientY;
           const clickElement = element;
-          
+          const scrollX = window.scrollX != null ? window.scrollX : window.pageXOffset;
+          const scrollY = window.scrollY != null ? window.scrollY : window.pageYOffset;
+          const docHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
+          const docWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
+
           // Mark this click as potentially dead
           const clickId = `${now}_${Math.random().toString(36).substr(2, 9)}`;
           pendingDeadClicks.set(clickId, {
@@ -6915,7 +6919,13 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
             timestamp: now,
             url: window.location.href,
             clickX,
-            clickY
+            clickY,
+            page_x: event.pageX,
+            page_y: event.pageY,
+            scroll_x: scrollX,
+            scroll_y: scrollY,
+            document_height: docHeight,
+            document_width: docWidth
           });
           
           // Check after 1 second if navigation occurred or if it's still a dead click
@@ -6929,6 +6939,12 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
               
               EventsManager.trackAutoEvent('dead_click', {
                 click_coordinates: { x: pendingClick.clickX, y: pendingClick.clickY },
+                page_x: pendingClick.page_x,
+                page_y: pendingClick.page_y,
+                scroll_x: pendingClick.scroll_x,
+                scroll_y: pendingClick.scroll_y,
+                document_height: pendingClick.document_height,
+                document_width: pendingClick.document_width,
                 element_area: clickElement.offsetWidth * clickElement.offsetHeight,
                 element_category: pendingClick.elementCategory,
                 element_has_onclick: !!clickElement.onclick,
@@ -6944,9 +6960,19 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           }, 1000);
         }
 
-        // Track regular click with enhanced data
+        // Track regular click with enhanced data (viewport + page-relative for heatmaps)
+        const scrollX = window.scrollX != null ? window.scrollX : window.pageXOffset;
+        const scrollY = window.scrollY != null ? window.scrollY : window.pageYOffset;
+        const docHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
+        const docWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
         EventsManager.trackAutoEvent('element_click', {
           click_coordinates: { x: event.clientX, y: event.clientY },
+          page_x: event.pageX,
+          page_y: event.pageY,
+          scroll_x: scrollX,
+          scroll_y: scrollY,
+          document_height: docHeight,
+          document_width: docWidth,
           double_click: event.detail === 2,
           element_category: elementCategory
         }, elementData).catch(err => {
@@ -6971,11 +6997,12 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
         clearTimeout(scrollTimeout);
         
         scrollTimeout = setTimeout(() => {
-          const scrollDepth = Math.round((window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100);
-          
+          const maxScroll = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - window.innerHeight;
+          const scrollDepth = maxScroll <= 0 ? 100 : Math.round((window.scrollY / maxScroll) * 100);
+
           if (scrollDepth > maxScrollDepth) {
             maxScrollDepth = scrollDepth;
-            
+
             EventsManager.trackAutoEvent('page_scroll', {
               scroll_depth: scrollDepth,
               max_scroll_reached: maxScrollDepth,

package/lib/umd/index.js

@@ -6907,11 +6907,15 @@
           const isInteractive = isInteractiveElement(element);
           
           if (!isInteractive) {
-            // Capture coordinates before setTimeout
+            // Capture coordinates and page context before setTimeout (for heatmaps)
             const clickX = event.clientX;
             const clickY = event.clientY;
             const clickElement = element;
-            
+            const scrollX = window.scrollX != null ? window.scrollX : window.pageXOffset;
+            const scrollY = window.scrollY != null ? window.scrollY : window.pageYOffset;
+            const docHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
+            const docWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
+
             // Mark this click as potentially dead
             const clickId = `${now}_${Math.random().toString(36).substr(2, 9)}`;
             pendingDeadClicks.set(clickId, {
@@ -6921,7 +6925,13 @@
               timestamp: now,
               url: window.location.href,
               clickX,
-              clickY
+              clickY,
+              page_x: event.pageX,
+              page_y: event.pageY,
+              scroll_x: scrollX,
+              scroll_y: scrollY,
+              document_height: docHeight,
+              document_width: docWidth
             });
             
             // Check after 1 second if navigation occurred or if it's still a dead click
@@ -6935,6 +6945,12 @@
                 
                 EventsManager.trackAutoEvent('dead_click', {
                   click_coordinates: { x: pendingClick.clickX, y: pendingClick.clickY },
+                  page_x: pendingClick.page_x,
+                  page_y: pendingClick.page_y,
+                  scroll_x: pendingClick.scroll_x,
+                  scroll_y: pendingClick.scroll_y,
+                  document_height: pendingClick.document_height,
+                  document_width: pendingClick.document_width,
                   element_area: clickElement.offsetWidth * clickElement.offsetHeight,
                   element_category: pendingClick.elementCategory,
                   element_has_onclick: !!clickElement.onclick,
@@ -6950,9 +6966,19 @@
             }, 1000);
           }
 
-          // Track regular click with enhanced data
+          // Track regular click with enhanced data (viewport + page-relative for heatmaps)
+          const scrollX = window.scrollX != null ? window.scrollX : window.pageXOffset;
+          const scrollY = window.scrollY != null ? window.scrollY : window.pageYOffset;
+          const docHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
+          const docWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
           EventsManager.trackAutoEvent('element_click', {
             click_coordinates: { x: event.clientX, y: event.clientY },
+            page_x: event.pageX,
+            page_y: event.pageY,
+            scroll_x: scrollX,
+            scroll_y: scrollY,
+            document_height: docHeight,
+            document_width: docWidth,
             double_click: event.detail === 2,
             element_category: elementCategory
           }, elementData).catch(err => {
@@ -6977,11 +7003,12 @@
           clearTimeout(scrollTimeout);
           
           scrollTimeout = setTimeout(() => {
-            const scrollDepth = Math.round((window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100);
-            
+            const maxScroll = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - window.innerHeight;
+            const scrollDepth = maxScroll <= 0 ? 100 : Math.round((window.scrollY / maxScroll) * 100);
+
             if (scrollDepth > maxScrollDepth) {
               maxScrollDepth = scrollDepth;
-              
+
               EventsManager.trackAutoEvent('page_scroll', {
                 scroll_depth: scrollDepth,
                 max_scroll_reached: maxScrollDepth,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cryptique-sdk",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "type": "module",
   "description": "Cryptique Analytics SDK - Comprehensive web analytics and user tracking for modern web applications",
   "main": "lib/cjs/index.js",