cryptique-sdk 1.1.7 → 1.1.9

package/lib/cjs/index.js

@@ -6063,6 +6063,30 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           }
         }
 
+        // Build auto_event_data for custom events (heatmap/position context when possible)
+        let customAutoEventData = {};
+        if (typeof window !== 'undefined' && window.document) {
+          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);
+          customAutoEventData = {
+            scroll_x: scrollX,
+            scroll_y: scrollY,
+            document_height: docHeight,
+            document_width: docWidth
+          };
+          const srcEvent = options.sourceEvent;
+          if (srcEvent && typeof srcEvent === 'object' && (srcEvent.pageX != null || srcEvent.clientX != null)) {
+            customAutoEventData.page_x = srcEvent.pageX != null ? srcEvent.pageX : (srcEvent.clientX + (window.scrollX || window.pageXOffset || 0));
+            customAutoEventData.page_y = srcEvent.pageY != null ? srcEvent.pageY : (srcEvent.clientY + (window.scrollY || window.pageYOffset || 0));
+            customAutoEventData.click_coordinates = {
+              x: srcEvent.clientX != null ? srcEvent.clientX : srcEvent.pageX - (window.scrollX || window.pageXOffset || 0),
+              y: srcEvent.clientY != null ? srcEvent.clientY : srcEvent.pageY - (window.scrollY || window.pageYOffset || 0)
+            };
+          }
+        }
+
         // Prepare event data
         const eventData = {
           event_type: 'custom',
@@ -6072,6 +6096,7 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           user_id: userId,
           // Only include user-provided properties in custom_properties (filtered)
           custom_properties: filteredProperties,
+          auto_event_data: customAutoEventData,
           // Page context and screen/viewport data go in page_data (not custom_properties)
           page_data: {
             current_url: window.location.href,
@@ -6886,7 +6911,18 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
         if (element === lastClickElement && now - lastClickTime < 1000) {
           clickCount++;
           if (clickCount >= 3) {
+            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('rage_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,
               click_count: clickCount,
               time_span: now - lastClickTime,
               element_area: element.offsetWidth * element.offsetHeight,
@@ -6903,11 +6939,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 +6957,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 +6977,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 +6998,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,15 +7035,22 @@ 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;
-            
+            const scrollX = window.scrollX != null ? window.scrollX : window.pageXOffset;
+            const docHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
+            const docWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
             EventsManager.trackAutoEvent('page_scroll', {
               scroll_depth: scrollDepth,
               max_scroll_reached: maxScrollDepth,
-              scroll_position: window.scrollY
+              scroll_position: window.scrollY,
+              scroll_x: scrollX,
+              scroll_y: window.scrollY,
+              document_height: docHeight,
+              document_width: docWidth
             }).catch(err => {
               console.error('❌ [AutoEvents] Failed to track page_scroll:', err);
             });
@@ -6999,10 +7068,24 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
       document.addEventListener('submit', (event) => {
         const form = event.target;
         if (form.tagName === 'FORM') {
+          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);
+          const rect = form.getBoundingClientRect();
+          const pageX = rect.left + scrollX;
+          const pageY = rect.top + scrollY;
           EventsManager.trackAutoEvent('form_submit', {
             form_id: form.id || null,
             form_action: form.action || null,
-            form_method: form.method || 'get'
+            form_method: form.method || 'get',
+            scroll_x: scrollX,
+            scroll_y: scrollY,
+            document_height: docHeight,
+            document_width: docWidth,
+            page_x: pageX,
+            page_y: pageY,
+            click_coordinates: { x: event.clientX != null ? event.clientX : rect.left + rect.width / 2, y: event.clientY != null ? event.clientY : rect.top + rect.height / 2 }
           }, {
             element_tag_name: 'form',
             element_id: form.id || null,
@@ -7011,8 +7094,8 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
             element_type: form.method || 'get', // FIX: Added element_type (form method)
             element_text: form.textContent?.trim().substring(0, 100) || null, // FIX: Added element_text
             element_position: { // FIX: Added element_position
-              x: event.clientX || 0,
-              y: event.clientY || 0,
+              x: event.clientX || rect.left,
+              y: event.clientY || rect.top,
               width: form.offsetWidth || 0,
               height: form.offsetHeight || 0
             }
@@ -7024,10 +7107,24 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
       document.addEventListener('focus', (event) => {
         const element = event.target;
         if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT') {
+          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);
+          const rect = element.getBoundingClientRect();
+          const pageX = rect.left + scrollX;
+          const pageY = rect.top + scrollY;
           EventsManager.trackAutoEvent('form_focus', {
             field_name: element.name || null,
             field_type: element.type || null,
-            field_id: element.id || null
+            field_id: element.id || null,
+            scroll_x: scrollX,
+            scroll_y: scrollY,
+            document_height: docHeight,
+            document_width: docWidth,
+            page_x: pageX,
+            page_y: pageY,
+            click_coordinates: { x: event.clientX != null ? event.clientX : rect.left + rect.width / 2, y: event.clientY != null ? event.clientY : rect.top + rect.height / 2 }
           }, {
             element_tag_name: element.tagName.toLowerCase(),
             element_id: element.id || null,
@@ -7036,8 +7133,8 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
             element_type: element.type || null,
             element_text: element.value ? element.value.toString().trim().substring(0, 100) : null, // FIX: Added element_text (value for form fields)
             element_position: { // FIX: Added element_position
-              x: event.clientX || 0,
-              y: event.clientY || 0,
+              x: event.clientX != null ? event.clientX : rect.left,
+              y: event.clientY != null ? event.clientY : rect.top,
               width: element.offsetWidth || 0,
               height: element.offsetHeight || 0
             }
@@ -7050,23 +7147,54 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
      * Setup media tracking
      */
     setupMediaTracking() {
+      function getPageContext() {
+        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);
+        return { scrollX, scrollY, docHeight, docWidth };
+      }
       ['video', 'audio'].forEach(mediaType => {
         document.addEventListener('play', (event) => {
           if (event.target.tagName.toLowerCase() === mediaType) {
+            const el = event.target;
+            const { scrollX, scrollY, docHeight, docWidth } = getPageContext();
+            const rect = el.getBoundingClientRect();
+            const pageX = rect.left + scrollX;
+            const pageY = rect.top + scrollY;
             EventsManager.trackAutoEvent('media_play', {
               media_type: mediaType,
-              media_src: event.target.src || null,
-              media_duration: event.target.duration || null
+              media_src: el.src || null,
+              media_duration: el.duration || null,
+              scroll_x: scrollX,
+              scroll_y: scrollY,
+              document_height: docHeight,
+              document_width: docWidth,
+              page_x: pageX,
+              page_y: pageY,
+              click_coordinates: { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }
             });
           }
         }, true);
 
         document.addEventListener('pause', (event) => {
           if (event.target.tagName.toLowerCase() === mediaType) {
+            const el = event.target;
+            const { scrollX, scrollY, docHeight, docWidth } = getPageContext();
+            const rect = el.getBoundingClientRect();
+            const pageX = rect.left + scrollX;
+            const pageY = rect.top + scrollY;
             EventsManager.trackAutoEvent('media_pause', {
               media_type: mediaType,
-              media_current_time: event.target.currentTime || null,
-              media_duration: event.target.duration || null
+              media_current_time: el.currentTime || null,
+              media_duration: el.duration || null,
+              scroll_x: scrollX,
+              scroll_y: scrollY,
+              document_height: docHeight,
+              document_width: docWidth,
+              page_x: pageX,
+              page_y: pageY,
+              click_coordinates: { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }
             });
           }
         }, true);
@@ -7148,11 +7276,33 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
                 focus_offset: selection.focusOffset || null
               };
 
-              // Get page context
+              // Get page context and selection position 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);
+              let pageX = null;
+              let pageY = null;
+              if (range) {
+                try {
+                  const selRect = range.getBoundingClientRect();
+                  if (selRect.width > 0 || selRect.height > 0) {
+                    pageX = selRect.left + scrollX;
+                    pageY = selRect.top + scrollY;
+                  }
+                } catch (e) { /* getBoundingClientRect can throw in some edge cases */ }
+              }
               const pageData = {
                 page_url: window.location.href,
                 page_title: document.title,
-                page_path: window.location.pathname
+                page_path: window.location.pathname,
+                scroll_x: scrollX,
+                scroll_y: scrollY,
+                document_height: docHeight,
+                document_width: docWidth,
+                page_x: pageX,
+                page_y: pageY,
+                click_coordinates: pageX != null && pageY != null ? { x: pageX - scrollX, y: pageY - scrollY } : null
               };
 
               EventsManager.trackAutoEvent('text_selection', {

package/lib/esm/index.js

@@ -6061,6 +6061,30 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           }
         }
 
+        // Build auto_event_data for custom events (heatmap/position context when possible)
+        let customAutoEventData = {};
+        if (typeof window !== 'undefined' && window.document) {
+          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);
+          customAutoEventData = {
+            scroll_x: scrollX,
+            scroll_y: scrollY,
+            document_height: docHeight,
+            document_width: docWidth
+          };
+          const srcEvent = options.sourceEvent;
+          if (srcEvent && typeof srcEvent === 'object' && (srcEvent.pageX != null || srcEvent.clientX != null)) {
+            customAutoEventData.page_x = srcEvent.pageX != null ? srcEvent.pageX : (srcEvent.clientX + (window.scrollX || window.pageXOffset || 0));
+            customAutoEventData.page_y = srcEvent.pageY != null ? srcEvent.pageY : (srcEvent.clientY + (window.scrollY || window.pageYOffset || 0));
+            customAutoEventData.click_coordinates = {
+              x: srcEvent.clientX != null ? srcEvent.clientX : srcEvent.pageX - (window.scrollX || window.pageXOffset || 0),
+              y: srcEvent.clientY != null ? srcEvent.clientY : srcEvent.pageY - (window.scrollY || window.pageYOffset || 0)
+            };
+          }
+        }
+
         // Prepare event data
         const eventData = {
           event_type: 'custom',
@@ -6070,6 +6094,7 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
           user_id: userId,
           // Only include user-provided properties in custom_properties (filtered)
           custom_properties: filteredProperties,
+          auto_event_data: customAutoEventData,
           // Page context and screen/viewport data go in page_data (not custom_properties)
           page_data: {
             current_url: window.location.href,
@@ -6884,7 +6909,18 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
         if (element === lastClickElement && now - lastClickTime < 1000) {
           clickCount++;
           if (clickCount >= 3) {
+            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('rage_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,
               click_count: clickCount,
               time_span: now - lastClickTime,
               element_area: element.offsetWidth * element.offsetHeight,
@@ -6901,11 +6937,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 +6955,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 +6975,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 +6996,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,15 +7033,22 @@ 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;
-            
+            const scrollX = window.scrollX != null ? window.scrollX : window.pageXOffset;
+            const docHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
+            const docWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
             EventsManager.trackAutoEvent('page_scroll', {
               scroll_depth: scrollDepth,
               max_scroll_reached: maxScrollDepth,
-              scroll_position: window.scrollY
+              scroll_position: window.scrollY,
+              scroll_x: scrollX,
+              scroll_y: window.scrollY,
+              document_height: docHeight,
+              document_width: docWidth
             }).catch(err => {
               console.error('❌ [AutoEvents] Failed to track page_scroll:', err);
             });
@@ -6997,10 +7066,24 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
       document.addEventListener('submit', (event) => {
         const form = event.target;
         if (form.tagName === 'FORM') {
+          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);
+          const rect = form.getBoundingClientRect();
+          const pageX = rect.left + scrollX;
+          const pageY = rect.top + scrollY;
           EventsManager.trackAutoEvent('form_submit', {
             form_id: form.id || null,
             form_action: form.action || null,
-            form_method: form.method || 'get'
+            form_method: form.method || 'get',
+            scroll_x: scrollX,
+            scroll_y: scrollY,
+            document_height: docHeight,
+            document_width: docWidth,
+            page_x: pageX,
+            page_y: pageY,
+            click_coordinates: { x: event.clientX != null ? event.clientX : rect.left + rect.width / 2, y: event.clientY != null ? event.clientY : rect.top + rect.height / 2 }
           }, {
             element_tag_name: 'form',
             element_id: form.id || null,
@@ -7009,8 +7092,8 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
             element_type: form.method || 'get', // FIX: Added element_type (form method)
             element_text: form.textContent?.trim().substring(0, 100) || null, // FIX: Added element_text
             element_position: { // FIX: Added element_position
-              x: event.clientX || 0,
-              y: event.clientY || 0,
+              x: event.clientX || rect.left,
+              y: event.clientY || rect.top,
               width: form.offsetWidth || 0,
               height: form.offsetHeight || 0
             }
@@ -7022,10 +7105,24 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
       document.addEventListener('focus', (event) => {
         const element = event.target;
         if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT') {
+          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);
+          const rect = element.getBoundingClientRect();
+          const pageX = rect.left + scrollX;
+          const pageY = rect.top + scrollY;
           EventsManager.trackAutoEvent('form_focus', {
             field_name: element.name || null,
             field_type: element.type || null,
-            field_id: element.id || null
+            field_id: element.id || null,
+            scroll_x: scrollX,
+            scroll_y: scrollY,
+            document_height: docHeight,
+            document_width: docWidth,
+            page_x: pageX,
+            page_y: pageY,
+            click_coordinates: { x: event.clientX != null ? event.clientX : rect.left + rect.width / 2, y: event.clientY != null ? event.clientY : rect.top + rect.height / 2 }
           }, {
             element_tag_name: element.tagName.toLowerCase(),
             element_id: element.id || null,
@@ -7034,8 +7131,8 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
             element_type: element.type || null,
             element_text: element.value ? element.value.toString().trim().substring(0, 100) : null, // FIX: Added element_text (value for form fields)
             element_position: { // FIX: Added element_position
-              x: event.clientX || 0,
-              y: event.clientY || 0,
+              x: event.clientX != null ? event.clientX : rect.left,
+              y: event.clientY != null ? event.clientY : rect.top,
               width: element.offsetWidth || 0,
               height: element.offsetHeight || 0
             }
@@ -7048,23 +7145,54 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
      * Setup media tracking
      */
     setupMediaTracking() {
+      function getPageContext() {
+        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);
+        return { scrollX, scrollY, docHeight, docWidth };
+      }
       ['video', 'audio'].forEach(mediaType => {
         document.addEventListener('play', (event) => {
           if (event.target.tagName.toLowerCase() === mediaType) {
+            const el = event.target;
+            const { scrollX, scrollY, docHeight, docWidth } = getPageContext();
+            const rect = el.getBoundingClientRect();
+            const pageX = rect.left + scrollX;
+            const pageY = rect.top + scrollY;
             EventsManager.trackAutoEvent('media_play', {
               media_type: mediaType,
-              media_src: event.target.src || null,
-              media_duration: event.target.duration || null
+              media_src: el.src || null,
+              media_duration: el.duration || null,
+              scroll_x: scrollX,
+              scroll_y: scrollY,
+              document_height: docHeight,
+              document_width: docWidth,
+              page_x: pageX,
+              page_y: pageY,
+              click_coordinates: { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }
             });
           }
         }, true);
 
         document.addEventListener('pause', (event) => {
           if (event.target.tagName.toLowerCase() === mediaType) {
+            const el = event.target;
+            const { scrollX, scrollY, docHeight, docWidth } = getPageContext();
+            const rect = el.getBoundingClientRect();
+            const pageX = rect.left + scrollX;
+            const pageY = rect.top + scrollY;
             EventsManager.trackAutoEvent('media_pause', {
               media_type: mediaType,
-              media_current_time: event.target.currentTime || null,
-              media_duration: event.target.duration || null
+              media_current_time: el.currentTime || null,
+              media_duration: el.duration || null,
+              scroll_x: scrollX,
+              scroll_y: scrollY,
+              document_height: docHeight,
+              document_width: docWidth,
+              page_x: pageX,
+              page_y: pageY,
+              click_coordinates: { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }
             });
           }
         }, true);
@@ -7146,11 +7274,33 @@ if (window.Cryptique && window.Cryptique.initialized) ; else {
                 focus_offset: selection.focusOffset || null
               };
 
-              // Get page context
+              // Get page context and selection position 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);
+              let pageX = null;
+              let pageY = null;
+              if (range) {
+                try {
+                  const selRect = range.getBoundingClientRect();
+                  if (selRect.width > 0 || selRect.height > 0) {
+                    pageX = selRect.left + scrollX;
+                    pageY = selRect.top + scrollY;
+                  }
+                } catch (e) { /* getBoundingClientRect can throw in some edge cases */ }
+              }
               const pageData = {
                 page_url: window.location.href,
                 page_title: document.title,
-                page_path: window.location.pathname
+                page_path: window.location.pathname,
+                scroll_x: scrollX,
+                scroll_y: scrollY,
+                document_height: docHeight,
+                document_width: docWidth,
+                page_x: pageX,
+                page_y: pageY,
+                click_coordinates: pageX != null && pageY != null ? { x: pageX - scrollX, y: pageY - scrollY } : null
               };
 
               EventsManager.trackAutoEvent('text_selection', {

package/lib/umd/index.js

@@ -6067,6 +6067,30 @@
             }
           }
 
+          // Build auto_event_data for custom events (heatmap/position context when possible)
+          let customAutoEventData = {};
+          if (typeof window !== 'undefined' && window.document) {
+            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);
+            customAutoEventData = {
+              scroll_x: scrollX,
+              scroll_y: scrollY,
+              document_height: docHeight,
+              document_width: docWidth
+            };
+            const srcEvent = options.sourceEvent;
+            if (srcEvent && typeof srcEvent === 'object' && (srcEvent.pageX != null || srcEvent.clientX != null)) {
+              customAutoEventData.page_x = srcEvent.pageX != null ? srcEvent.pageX : (srcEvent.clientX + (window.scrollX || window.pageXOffset || 0));
+              customAutoEventData.page_y = srcEvent.pageY != null ? srcEvent.pageY : (srcEvent.clientY + (window.scrollY || window.pageYOffset || 0));
+              customAutoEventData.click_coordinates = {
+                x: srcEvent.clientX != null ? srcEvent.clientX : srcEvent.pageX - (window.scrollX || window.pageXOffset || 0),
+                y: srcEvent.clientY != null ? srcEvent.clientY : srcEvent.pageY - (window.scrollY || window.pageYOffset || 0)
+              };
+            }
+          }
+
           // Prepare event data
           const eventData = {
             event_type: 'custom',
@@ -6076,6 +6100,7 @@
             user_id: userId,
             // Only include user-provided properties in custom_properties (filtered)
             custom_properties: filteredProperties,
+            auto_event_data: customAutoEventData,
             // Page context and screen/viewport data go in page_data (not custom_properties)
             page_data: {
               current_url: window.location.href,
@@ -6890,7 +6915,18 @@
           if (element === lastClickElement && now - lastClickTime < 1000) {
             clickCount++;
             if (clickCount >= 3) {
+              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('rage_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,
                 click_count: clickCount,
                 time_span: now - lastClickTime,
                 element_area: element.offsetWidth * element.offsetHeight,
@@ -6907,11 +6943,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 +6961,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 +6981,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 +7002,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,15 +7039,22 @@
           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;
-              
+              const scrollX = window.scrollX != null ? window.scrollX : window.pageXOffset;
+              const docHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
+              const docWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
               EventsManager.trackAutoEvent('page_scroll', {
                 scroll_depth: scrollDepth,
                 max_scroll_reached: maxScrollDepth,
-                scroll_position: window.scrollY
+                scroll_position: window.scrollY,
+                scroll_x: scrollX,
+                scroll_y: window.scrollY,
+                document_height: docHeight,
+                document_width: docWidth
               }).catch(err => {
                 console.error('❌ [AutoEvents] Failed to track page_scroll:', err);
               });
@@ -7003,10 +7072,24 @@
         document.addEventListener('submit', (event) => {
           const form = event.target;
           if (form.tagName === 'FORM') {
+            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);
+            const rect = form.getBoundingClientRect();
+            const pageX = rect.left + scrollX;
+            const pageY = rect.top + scrollY;
             EventsManager.trackAutoEvent('form_submit', {
               form_id: form.id || null,
               form_action: form.action || null,
-              form_method: form.method || 'get'
+              form_method: form.method || 'get',
+              scroll_x: scrollX,
+              scroll_y: scrollY,
+              document_height: docHeight,
+              document_width: docWidth,
+              page_x: pageX,
+              page_y: pageY,
+              click_coordinates: { x: event.clientX != null ? event.clientX : rect.left + rect.width / 2, y: event.clientY != null ? event.clientY : rect.top + rect.height / 2 }
             }, {
               element_tag_name: 'form',
               element_id: form.id || null,
@@ -7015,8 +7098,8 @@
               element_type: form.method || 'get', // FIX: Added element_type (form method)
               element_text: form.textContent?.trim().substring(0, 100) || null, // FIX: Added element_text
               element_position: { // FIX: Added element_position
-                x: event.clientX || 0,
-                y: event.clientY || 0,
+                x: event.clientX || rect.left,
+                y: event.clientY || rect.top,
                 width: form.offsetWidth || 0,
                 height: form.offsetHeight || 0
               }
@@ -7028,10 +7111,24 @@
         document.addEventListener('focus', (event) => {
           const element = event.target;
           if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT') {
+            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);
+            const rect = element.getBoundingClientRect();
+            const pageX = rect.left + scrollX;
+            const pageY = rect.top + scrollY;
             EventsManager.trackAutoEvent('form_focus', {
               field_name: element.name || null,
               field_type: element.type || null,
-              field_id: element.id || null
+              field_id: element.id || null,
+              scroll_x: scrollX,
+              scroll_y: scrollY,
+              document_height: docHeight,
+              document_width: docWidth,
+              page_x: pageX,
+              page_y: pageY,
+              click_coordinates: { x: event.clientX != null ? event.clientX : rect.left + rect.width / 2, y: event.clientY != null ? event.clientY : rect.top + rect.height / 2 }
             }, {
               element_tag_name: element.tagName.toLowerCase(),
               element_id: element.id || null,
@@ -7040,8 +7137,8 @@
               element_type: element.type || null,
               element_text: element.value ? element.value.toString().trim().substring(0, 100) : null, // FIX: Added element_text (value for form fields)
               element_position: { // FIX: Added element_position
-                x: event.clientX || 0,
-                y: event.clientY || 0,
+                x: event.clientX != null ? event.clientX : rect.left,
+                y: event.clientY != null ? event.clientY : rect.top,
                 width: element.offsetWidth || 0,
                 height: element.offsetHeight || 0
               }
@@ -7054,23 +7151,54 @@
        * Setup media tracking
        */
       setupMediaTracking() {
+        function getPageContext() {
+          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);
+          return { scrollX, scrollY, docHeight, docWidth };
+        }
         ['video', 'audio'].forEach(mediaType => {
           document.addEventListener('play', (event) => {
             if (event.target.tagName.toLowerCase() === mediaType) {
+              const el = event.target;
+              const { scrollX, scrollY, docHeight, docWidth } = getPageContext();
+              const rect = el.getBoundingClientRect();
+              const pageX = rect.left + scrollX;
+              const pageY = rect.top + scrollY;
               EventsManager.trackAutoEvent('media_play', {
                 media_type: mediaType,
-                media_src: event.target.src || null,
-                media_duration: event.target.duration || null
+                media_src: el.src || null,
+                media_duration: el.duration || null,
+                scroll_x: scrollX,
+                scroll_y: scrollY,
+                document_height: docHeight,
+                document_width: docWidth,
+                page_x: pageX,
+                page_y: pageY,
+                click_coordinates: { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }
               });
             }
           }, true);
 
           document.addEventListener('pause', (event) => {
             if (event.target.tagName.toLowerCase() === mediaType) {
+              const el = event.target;
+              const { scrollX, scrollY, docHeight, docWidth } = getPageContext();
+              const rect = el.getBoundingClientRect();
+              const pageX = rect.left + scrollX;
+              const pageY = rect.top + scrollY;
               EventsManager.trackAutoEvent('media_pause', {
                 media_type: mediaType,
-                media_current_time: event.target.currentTime || null,
-                media_duration: event.target.duration || null
+                media_current_time: el.currentTime || null,
+                media_duration: el.duration || null,
+                scroll_x: scrollX,
+                scroll_y: scrollY,
+                document_height: docHeight,
+                document_width: docWidth,
+                page_x: pageX,
+                page_y: pageY,
+                click_coordinates: { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 }
               });
             }
           }, true);
@@ -7152,11 +7280,33 @@
                   focus_offset: selection.focusOffset || null
                 };
 
-                // Get page context
+                // Get page context and selection position 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);
+                let pageX = null;
+                let pageY = null;
+                if (range) {
+                  try {
+                    const selRect = range.getBoundingClientRect();
+                    if (selRect.width > 0 || selRect.height > 0) {
+                      pageX = selRect.left + scrollX;
+                      pageY = selRect.top + scrollY;
+                    }
+                  } catch (e) { /* getBoundingClientRect can throw in some edge cases */ }
+                }
                 const pageData = {
                   page_url: window.location.href,
                   page_title: document.title,
-                  page_path: window.location.pathname
+                  page_path: window.location.pathname,
+                  scroll_x: scrollX,
+                  scroll_y: scrollY,
+                  document_height: docHeight,
+                  document_width: docWidth,
+                  page_x: pageX,
+                  page_y: pageY,
+                  click_coordinates: pageX != null && pageY != null ? { x: pageX - scrollX, y: pageY - scrollY } : null
                 };
 
                 EventsManager.trackAutoEvent('text_selection', {

package/package.json

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