User Flow Analytics

1Initialize Journey Tracking

// Initialize user flow tracking
UserFlowAnalytics.init({
  projectId: 'your-project-id',
  tracking: {
    pageViews: true,
    clicks: true,
    formSubmissions: true,
    customEvents: true,
    sessionTracking: {
      trackDuration: true,
      trackPath: true,
      trackReferrer: true
    }
  },
  funnels: {
    enabled: true,
    autoDetect: true,
    customFunnels: []
  }
});

2Track User Journey Steps

// Track user journey steps
UserFlowAnalytics.trackStep('homepage', {
  step: 1,
  funnel: 'user_onboarding',
  timestamp: Date.now(),
  source: 'direct',
  utmSource: getUTMParameter('utm_source'),
  utmMedium: getUTMParameter('utm_medium'),
  utmCampaign: getUTMParameter('utm_campaign')
});
UserFlowAnalytics.trackStep('product_page', {
  step: 2,
  funnel: 'user_onboarding',
  productId: 'prod-123',
  timestamp: Date.now(),
  previousPage: 'homepage',
  timeOnPreviousPage: 45000
});
UserFlowAnalytics.trackStep('checkout', {
  step: 3,
  funnel: 'user_onboarding',
  timestamp: Date.now(),
  previousPage: 'product_page',
  timeOnPreviousPage: 120000
});

Standard Funnels

// Define standard conversion funnels
UserFlowAnalytics.defineFunnel('user_onboarding', [
  {
    step: 1,
    name: 'Homepage',
    url: '/homepage',
    required: true
  },
  {
    step: 2,
    name: 'Product Page',
    url: '/product',
    required: true
  },
  {
    step: 3,
    name: 'Add to Cart',
    event: 'add_to_cart',
    required: true
  },
  {
    step: 4,
    name: 'Checkout',
    url: '/checkout',
    required: true
  },
  {
    step: 5,
    name: 'Purchase',
    event: 'purchase',
    required: true
  }
]);
UserFlowAnalytics.defineFunnel('lead_generation', [
  {
    step: 1,
    name: 'Landing Page',
    url: '/landing',
    required: true
  },
  {
    step: 2,
    name: 'Form View',
    url: '/contact',
    required: true
  },
  {
    step: 3,
    name: 'Form Start',
    event: 'form_start',
    required: true
  },
  {
    step: 4,
    name: 'Form Submit',
    event: 'form_submit',
    required: true
  }
]);

Path Tracking Implementation

// Track user paths through the site
class PathTracker {
  constructor() {
    this.currentPath = [];
    this.pathStartTime = Date.now();
    this.lastPageVisit = null;
  }
  
  trackPageVisit(pageUrl, pageData = {}) {
    const visitData = {
      url: pageUrl,
      timestamp: Date.now(),
      timeOnPreviousPage: this.lastPageVisit ? 
        Date.now() - this.lastPageVisit.timestamp : 0,
      referrer: document.referrer,
      userAgent: navigator.userAgent,
      sessionId: this.getSessionId(),
      userId: this.getUserId(),
      ...pageData
    };
    
    this.currentPath.push(visitData);
    this.lastPageVisit = visitData;
    
    // Send path data to analytics
    UserFlowAnalytics.trackPath(this.currentPath);
  }
  
  getPathMetrics() {
    return {
      pathLength: this.currentPath.length,
      totalDuration: Date.now() - this.pathStartTime,
      averageTimePerPage: this.calculateAverageTimePerPage(),
      bounceRate: this.calculateBounceRate(),
      exitPage: this.currentPath[this.currentPath.length - 1]?.url
    };
  }
}

Segmentation Criteria

// Behavioral segmentation implementation
class BehavioralSegmenter {
  constructor() {
    this.segments = {
      'power_users': {
        criteria: {
          pageViews: { min: 50, weight: 0.3 },
          sessionDuration: { min: 300000, weight: 0.4 },
          conversionRate: { min: 0.1, weight: 0.3 }
        }
      },
      'casual_visitors': {
        criteria: {
          pageViews: { max: 10, weight: 0.4 },
          sessionDuration: { max: 60000, weight: 0.3 },
          returnVisits: { max: 3, weight: 0.3 }
        }
      },
      'potential_converters': {
        criteria: {
          productViews: { min: 3, weight: 0.4 },
          cartAdditions: { min: 1, weight: 0.4 },
          timeOnProduct: { min: 30000, weight: 0.2 }
        }
      }
    };
  }
  
  segmentUser(userBehavior) {
    const scores = {};
    
    for (const [segmentName, segmentConfig] of Object.entries(this.segments)) {
      let score = 0;
      let totalWeight = 0;
      
      for (const [criterion, config] of Object.entries(segmentConfig.criteria)) {
        const userValue = userBehavior[criterion] || 0;
        const weight = config.weight;
        
        if (config.min && userValue >= config.min) {
          score += weight;
        } else if (config.max && userValue <= config.max) {
          score += weight;
        }
        
        totalWeight += weight;
      }
      
      scores[segmentName] = totalWeight > 0 ? score / totalWeight : 0;
    }
    
    return Object.entries(scores)
      .sort(([,a], [,b]) => b - a)
      .map(([segment, score]) => ({ segment, score }));
  }
}