@grainql/analytics-web 3.2.0 → 3.2.1

package/dist/heatmap-tracking.js

@@ -65,8 +65,12 @@ class HeatmapTrackingManager {
         // Snapshot capture state
         this.snapshotCaptured = false;
         this.snapshotEnabled = false;
+        // Device type detection
+        this.deviceType = 'desktop';
         this.tracker = tracker;
         this.options = { ...DEFAULT_OPTIONS, ...options };
+        // Detect device type on initialization
+        this.deviceType = this.detectDeviceType();
         // Initialize attention quality manager
         this.attentionQuality = new attention_quality_1.AttentionQualityManager(tracker.getActivityDetector(), {
             maxSectionDuration: 9000, // 9 seconds per viewport section
@@ -109,6 +113,34 @@ class HeatmapTrackingManager {
     /**
      * Check remote config for snapshot capture enablement
      */
+    /**
+     * Detect device type based on viewport width and user agent
+     * Mobile: width < 768px OR mobile user agent
+     * Desktop: width >= 768px AND non-mobile user agent
+     */
+    detectDeviceType() {
+        if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+            return 'desktop'; // SSR default
+        }
+        // Check viewport width
+        const width = window.innerWidth || window.screen?.width || 0;
+        const isMobileWidth = width < 768;
+        // Check user agent for mobile indicators
+        const userAgent = navigator.userAgent.toLowerCase();
+        const mobileKeywords = [
+            'mobile',
+            'android',
+            'iphone',
+            'ipad',
+            'ipod',
+            'blackberry',
+            'windows phone',
+            'webos',
+        ];
+        const isMobileUserAgent = mobileKeywords.some((keyword) => userAgent.includes(keyword));
+        // Device is mobile if either width OR user agent indicates mobile
+        return isMobileWidth || isMobileUserAgent ? 'mobile' : 'desktop';
+    }
     /**
      * Normalize URL by removing query params and hash, and stripping www prefix
      * This ensures heatmap data is aggregated by page, not by URL variations
@@ -205,7 +237,8 @@ class HeatmapTrackingManager {
                     sessionId,
                     pageUrl,
                     snapshot: JSON.stringify(snapshot),
-                    timestamp: Date.now()
+                    timestamp: Date.now(),
+                    deviceType: this.deviceType
                 })
             });
             if (!response.ok) {
@@ -349,6 +382,7 @@ class HeatmapTrackingManager {
                     exitTimestamp: currentTime,
                     pageHeight,
                     viewportHeight,
+                    deviceType: this.deviceType,
                 };
                 // Send immediately using beacon to ensure delivery
                 this.tracker.trackSystemEvent('_grain_heatmap_scroll', {
@@ -360,6 +394,7 @@ class HeatmapTrackingManager {
                     exit_timestamp: scrollData.exitTimestamp,
                     page_height: scrollData.pageHeight,
                     viewport_height: scrollData.viewportHeight,
+                    device_type: scrollData.deviceType,
                     is_split: true, // Flag to indicate periodic tracking, not final exit
                 }, { flush: true });
                 // Update attention quality duration tracker
@@ -390,6 +425,7 @@ class HeatmapTrackingManager {
                         exitTimestamp: currentTime,
                         pageHeight: document.documentElement.scrollHeight,
                         viewportHeight: window.innerHeight,
+                        deviceType: this.deviceType,
                     };
                     this.pendingScrolls.push(scrollData);
                 }
@@ -448,6 +484,7 @@ class HeatmapTrackingManager {
             elementTag,
             elementText: elementText || undefined,
             timestamp: Date.now(),
+            deviceType: this.deviceType,
         };
         // Check if this is a navigation link
         const isNavigationLink = element instanceof HTMLAnchorElement && element.href;
@@ -466,6 +503,7 @@ class HeatmapTrackingManager {
                 element_tag: clickData.elementTag,
                 element_text: clickData.elementText,
                 timestamp: clickData.timestamp,
+                device_type: clickData.deviceType,
             }, { flush: true });
         }
         else {
@@ -510,6 +548,7 @@ class HeatmapTrackingManager {
                     exitTimestamp: currentTime,
                     pageHeight,
                     viewportHeight,
+                    deviceType: this.deviceType,
                 };
                 this.pendingScrolls.push(scrollData);
             }
@@ -645,6 +684,7 @@ class HeatmapTrackingManager {
                     element_tag: clickData.elementTag,
                     element_text: clickData.elementText,
                     timestamp: clickData.timestamp,
+                    device_type: clickData.deviceType,
                 });
             }
             this.pendingClicks = [];
@@ -661,6 +701,7 @@ class HeatmapTrackingManager {
                     exit_timestamp: scrollData.exitTimestamp,
                     page_height: scrollData.pageHeight,
                     viewport_height: scrollData.viewportHeight,
+                    device_type: scrollData.deviceType,
                 });
             }
             this.pendingScrolls = [];
@@ -693,6 +734,7 @@ class HeatmapTrackingManager {
                     element_tag: clickData.elementTag,
                     element_text: clickData.elementText,
                     timestamp: clickData.timestamp,
+                    device_type: clickData.deviceType,
                 }, { flush: true });
             }
             this.pendingClicks = [];
@@ -709,6 +751,7 @@ class HeatmapTrackingManager {
                     exit_timestamp: scrollData.exitTimestamp,
                     page_height: scrollData.pageHeight,
                     viewport_height: scrollData.viewportHeight,
+                    device_type: scrollData.deviceType,
                 }, { flush: true });
             }
             this.pendingScrolls = [];

package/dist/index.global.dev.js

@@ -1,4 +1,4 @@
-/* Grain Analytics Web SDK v3.2.0 | MIT License | Development Build */
+/* Grain Analytics Web SDK v3.2.1 | MIT License | Development Build */
 "use strict";
 var Grain = (() => {
   var __defProp = Object.defineProperty;
@@ -5851,8 +5851,11 @@ var Grain = (() => {
           // Snapshot capture state
           this.snapshotCaptured = false;
           this.snapshotEnabled = false;
+          // Device type detection
+          this.deviceType = "desktop";
           this.tracker = tracker;
           this.options = { ...DEFAULT_OPTIONS2, ...options };
+          this.deviceType = this.detectDeviceType();
           this.attentionQuality = new AttentionQualityManager(
             tracker.getActivityDetector(),
             {
@@ -5892,6 +5895,33 @@ var Grain = (() => {
         /**
          * Check remote config for snapshot capture enablement
          */
+        /**
+         * Detect device type based on viewport width and user agent
+         * Mobile: width < 768px OR mobile user agent
+         * Desktop: width >= 768px AND non-mobile user agent
+         */
+        detectDeviceType() {
+          if (typeof window === "undefined" || typeof navigator === "undefined") {
+            return "desktop";
+          }
+          const width = window.innerWidth || window.screen?.width || 0;
+          const isMobileWidth = width < 768;
+          const userAgent = navigator.userAgent.toLowerCase();
+          const mobileKeywords = [
+            "mobile",
+            "android",
+            "iphone",
+            "ipad",
+            "ipod",
+            "blackberry",
+            "windows phone",
+            "webos"
+          ];
+          const isMobileUserAgent = mobileKeywords.some(
+            (keyword) => userAgent.includes(keyword)
+          );
+          return isMobileWidth || isMobileUserAgent ? "mobile" : "desktop";
+        }
         /**
          * Normalize URL by removing query params and hash, and stripping www prefix
          * This ensures heatmap data is aggregated by page, not by URL variations
@@ -5974,7 +6004,8 @@ var Grain = (() => {
                   sessionId,
                   pageUrl,
                   snapshot: JSON.stringify(snapshot2),
-                  timestamp: Date.now()
+                  timestamp: Date.now(),
+                  deviceType: this.deviceType
                 })
               }
             );
@@ -6102,7 +6133,8 @@ var Grain = (() => {
                 entryTimestamp: this.currentScrollState.entryTime,
                 exitTimestamp: currentTime,
                 pageHeight,
-                viewportHeight
+                viewportHeight,
+                deviceType: this.deviceType
               };
               this.tracker.trackSystemEvent("_grain_heatmap_scroll", {
                 page_url: scrollData.pageUrl,
@@ -6113,6 +6145,7 @@ var Grain = (() => {
                 exit_timestamp: scrollData.exitTimestamp,
                 page_height: scrollData.pageHeight,
                 viewport_height: scrollData.viewportHeight,
+                device_type: scrollData.deviceType,
                 is_split: true
                 // Flag to indicate periodic tracking, not final exit
               }, { flush: true });
@@ -6140,7 +6173,8 @@ var Grain = (() => {
                   entryTimestamp: this.currentScrollState.entryTime,
                   exitTimestamp: currentTime,
                   pageHeight: document.documentElement.scrollHeight,
-                  viewportHeight: window.innerHeight
+                  viewportHeight: window.innerHeight,
+                  deviceType: this.deviceType
                 };
                 this.pendingScrolls.push(scrollData);
               }
@@ -6189,7 +6223,8 @@ var Grain = (() => {
             pageY,
             elementTag,
             elementText: elementText || void 0,
-            timestamp: Date.now()
+            timestamp: Date.now(),
+            deviceType: this.deviceType
           };
           const isNavigationLink = element instanceof HTMLAnchorElement && element.href;
           if (isNavigationLink) {
@@ -6205,7 +6240,8 @@ var Grain = (() => {
               page_y: clickData.pageY,
               element_tag: clickData.elementTag,
               element_text: clickData.elementText,
-              timestamp: clickData.timestamp
+              timestamp: clickData.timestamp,
+              device_type: clickData.deviceType
             }, { flush: true });
           } else {
             this.pendingClicks.push(clickData);
@@ -6240,7 +6276,8 @@ var Grain = (() => {
                 entryTimestamp: this.currentScrollState.entryTime,
                 exitTimestamp: currentTime,
                 pageHeight,
-                viewportHeight
+                viewportHeight,
+                deviceType: this.deviceType
               };
               this.pendingScrolls.push(scrollData);
             }
@@ -6360,7 +6397,8 @@ var Grain = (() => {
                 page_y: clickData.pageY,
                 element_tag: clickData.elementTag,
                 element_text: clickData.elementText,
-                timestamp: clickData.timestamp
+                timestamp: clickData.timestamp,
+                device_type: clickData.deviceType
               });
             }
             this.pendingClicks = [];
@@ -6375,7 +6413,8 @@ var Grain = (() => {
                 entry_timestamp: scrollData.entryTimestamp,
                 exit_timestamp: scrollData.exitTimestamp,
                 page_height: scrollData.pageHeight,
-                viewport_height: scrollData.viewportHeight
+                viewport_height: scrollData.viewportHeight,
+                device_type: scrollData.deviceType
               });
             }
             this.pendingScrolls = [];
@@ -6403,7 +6442,8 @@ var Grain = (() => {
                 page_y: clickData.pageY,
                 element_tag: clickData.elementTag,
                 element_text: clickData.elementText,
-                timestamp: clickData.timestamp
+                timestamp: clickData.timestamp,
+                device_type: clickData.deviceType
               }, { flush: true });
             }
             this.pendingClicks = [];
@@ -6418,7 +6458,8 @@ var Grain = (() => {
                 entry_timestamp: scrollData.entryTimestamp,
                 exit_timestamp: scrollData.exitTimestamp,
                 page_height: scrollData.pageHeight,
-                viewport_height: scrollData.viewportHeight
+                viewport_height: scrollData.viewportHeight,
+                device_type: scrollData.deviceType
               }, { flush: true });
             }
             this.pendingScrolls = [];