Tracking Events

class EventTracker {
  constructor() {
    this.events = [];
    this.context = this.buildContext();
    this.batchInterval = 5000; // 5 seconds
    this.maxBatchSize = 20;
    this.startBatching();
  }
  
  buildContext() {
    return {
      $current_url: window.location.href,
      $pathname: window.location.pathname,
      $host: window.location.host,
      $referrer: document.referrer || null,
      $referring_domain: document.referrer ? new URL(document.referrer).hostname : null,
      $screen_width: screen.width,
      $screen_height: screen.height,
      $viewport_width: window.innerWidth,
      $viewport_height: window.innerHeight,
      $raw_user_agent: navigator.userAgent,
      $browser_language: navigator.language,
      $timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
      $session_id: this.getSessionId(),
      $pageview_id: this.getPageviewId(),
      genlook_client_id: this.getClientId(),
      genlook_widget_enabled: true,
      genlook_product_id: this.getProductId(),
      genlook_variant_id: this.getVariantId(),
      genlook_lib_version: '1.0.0'
    };
  }
  
  track(event, properties = {}) {
    this.events.push({
      event,
      properties,
      timestamp: new Date().toISOString(),
      $insert_id: `event_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
    });
    
    // Send immediately if batch is full
    if (this.events.length >= this.maxBatchSize) {
      this.flush();
    }
  }
  
  async flush() {
    if (this.events.length === 0) return;
    
    const eventsToSend = [...this.events];
    this.events = [];
    
    try {
      await fetch('/apps/proxy_genlook-x/public/tracking/events', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          events: eventsToSend,
          context: this.buildContext() // Refresh context
        })
      });
    } catch (error) {
      console.error('Failed to track events:', error);
      // Optionally re-queue events for retry
    }
  }
  
  startBatching() {
    setInterval(() => this.flush(), this.batchInterval);
    // Also flush on page unload
    window.addEventListener('beforeunload', () => this.flush());
  }
  
  getSessionId() {
    let sessionId = sessionStorage.getItem('genlook_session_id');
    if (!sessionId) {
      sessionId = `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
      sessionStorage.setItem('genlook_session_id', sessionId);
    }
    return sessionId;
  }
  
  getPageviewId() {
    return `pageview_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
  }
  
  getClientId() {
    let clientId = localStorage.getItem('genlook_client_id');
    if (!clientId) {
      clientId = crypto.randomUUID();
      localStorage.setItem('genlook_client_id', clientId);
    }
    return clientId;
  }
  
  getProductId() {
    // Extract from page or context
    return window.Shopify?.product?.id ? `gid://shopify/Product/${window.Shopify.product.id}` : null;
  }
  
  getVariantId() {
    // Extract from page or context
    return window.Shopify?.product?.selected_or_first_available_variant?.id 
      ? `gid://shopify/ProductVariant/${window.Shopify.product.selected_or_first_available_variant.id}` 
      : null;
  }
}

// Usage
const tracker = new EventTracker();
tracker.track('widget:button_click', { button_style: 'primary' });
tracker.track('widget:image_upload', { file_size: 1024000 });