feat: Add bot detection and enhanced engagement tracking

- Detect bot-like behavior (webdriver, missing language, etc.)
- Track scroll depth (25%, 50%, 75%)
- Track time on page (10+ seconds threshold)
- Track all meaningful clicks
- Add user properties (screen res, timezone, bot flag)
- Filter real users from bots in GA4 reports
- Add comprehensive documentation

This enables:
✓ Distinguishing real users from automated traffic
✓ Measuring meaningful engagement vs vanity metrics
✓ Identifying calculator abandonment points
✓ Tracking user journey through the site
✓ Better ROI measurement for marketing efforts

See GA4_ENHANCEMENTS.md for full details.

index.html

@@ -615,3 +615,82 @@ document.addEventListener('DOMContentLoaded', function() {
   </script>
 </body>
 </html>
+
+<!-- Bot Detection & Enhanced GA4 Tracking -->
+<script>
+// Detect and flag bot-like behavior
+function isBotBehavior() {
+  const isAutomated = navigator.webdriver || false;
+  const hasNoLanguage = !navigator.language;
+  const hasSuspiciousScreen = screen.width === 0 || screen.height === 0;
+  
+  return isAutomated || hasNoLanguage || hasSuspiciousScreen;
+}
+
+// Enhanced page view tracking with bot filtering
+window.addEventListener('load', function() {
+  const isBot = isBotBehavior();
+  
+  // Send custom dimension for bot detection
+  gtag('set', 'user_properties', {
+    'is_likely_bot': isBot ? 'true' : 'false',
+    'has_javascript': 'true',
+    'screen_resolution': `${screen.width}x${screen.height}`,
+    'timezone': Intl.DateTimeFormat().resolvedOptions().timeZone
+  });
+  
+  // Track meaningful engagement (not just page load)
+  let engagementEvents = [];
+  
+  // Track scroll depth (real users scroll)
+  let maxScroll = 0;
+  window.addEventListener('scroll', function() {
+    const scrollPercent = Math.round((window.scrollY + window.innerHeight) / document.body.scrollHeight * 100);
+    if (scrollPercent > maxScroll) {
+      maxScroll = scrollPercent;
+      if (scrollPercent >= 25 && !engagementEvents.includes('scroll_25')) {
+        engagementEvents.push('scroll_25');
+        gtag('event', 'scroll_25', { 'event_category': 'engagement' });
+      }
+      if (scrollPercent >= 50 && !engagementEvents.includes('scroll_50')) {
+        engagementEvents.push('scroll_50');
+        gtag('event', 'scroll_50', { 'event_category': 'engagement' });
+      }
+      if (scrollPercent >= 75 && !engagementEvents.includes('scroll_75')) {
+        engagementEvents.push('scroll_75');
+        gtag('event', 'scroll_75', { 'event_category': 'engagement' });
+      }
+    }
+  });
+  
+  // Track time on page (real users spend time)
+  const startTime = Date.now();
+  window.addEventListener('beforeunload', function() {
+    const timeOnPage = Math.round((Date.now() - startTime) / 1000);
+    if (timeOnPage >= 10) {
+      gtag('event', 'time_on_page', {
+        'event_category': 'engagement',
+        'value': timeOnPage,
+        'event_label': timeOnPage >= 60 ? '1min+' : '10-60s'
+      });
+    }
+  });
+  
+  // Track clicks on key elements (calculator, contact, etc.)
+  document.querySelectorAll('a[href], button, .btn').forEach(function(el) {
+    el.addEventListener('click', function() {
+      const label = this.textContent?.trim().substring(0, 50) || this.id || 'unknown';
+      gtag('event', 'click', {
+        'event_category': 'engagement',
+        'event_label': label,
+        'non_interaction': false
+      });
+    });
+  });
+  
+  console.log('✓ Enhanced GA4 tracking active');
+  if (isBot) {
+    console.warn('⚠️ Bot-like behavior detected');
+  }
+});
+</script>