Advanced Analytics

Custom events, funnel analysis, A/B testing, and performance monitoring.

Overview

Advanced analytics provide deep insights into user behavior.

Key Concepts

• Custom Events — Track specific user actions
• Funnel Analysis — Visualize conversion flows
• A/B Testing — Test different variants
• Performance Monitoring — Track app performance
• User Segmentation — Group users by behavior

Code Examples

// Analytics hook
'use client';
import { useCallback } from 'react';

export function useAnalytics() {
  const trackEvent = useCallback(async (eventName, properties = {}) => {
    await fetch('/api/analytics', {
      method: 'POST',
      body: JSON.stringify({
        event: eventName,
        properties,
        timestamp: Date.now(),
        sessionId: getSessionId()
      })
    });
  }, []);

  const trackPageView = useCallback((url) => {
    trackEvent('page_view', { url });
  }, [trackEvent]);

  const trackConversion = useCallback((goal, value) => {
    trackEvent('conversion', { goal, value });
  }, [trackEvent]);

  return { trackEvent, trackPageView, trackConversion };
}

// A/B testing
'use client';
import { createContext, useContext, useState, useEffect } from 'react';

const ExperimentContext = createContext();

export function ExperimentProvider({ children }) {
  const [experiments, setExperiments] = useState({});

  useEffect(() => {
    const assigned = JSON.parse(localStorage.getItem('experiments') || '{}');
    setExperiments(assigned);
  }, []);

  const getVariant = (experimentName, variants) => {
    if (experiments[experimentName]) return experiments[experimentName];
    
    const random = Math.random();
    const variant = variants[Math.floor(random * variants.length)];
    
    const updated = { ...experiments, [experimentName]: variant };
    localStorage.setItem('experiments', JSON.stringify(updated));
    setExperiments(updated);
    
    return variant;
  };

  return (
    <ExperimentContext.Provider value={{ experiments, getVariant }}>
      {children}
    </ExperimentContext.Provider>
  );
}

// Usage
function CheckoutButton() {
  const { getVariant } = useContext(ExperimentContext);
  const variant = getVariant('checkout-button', ['primary', 'secondary']);
  
  return (
    <button className={`btn btn-${variant}`}>
      {variant === 'primary' ? 'Buy Now' : 'Add to Cart'}
    </button>
  );
}

Practice

Implement A/B testing and funnel analysis for an e-commerce checkout.