Chrome Extension Analytics: The Complete Guide to Tracking, Measuring & Optimizing Your Extension's Success

┌─────────────────────────────────────────────────────────────────┐
│                  THE EXTENSION VISIBILITY PROBLEM               │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│   Traditional Web App          Chrome Extension                 │
│   ┌─────────────────┐          ┌─────────────────┐             │
│   │  Server Logs    │          │  No Server?     │             │
│   │  Full Analytics │          │  Limited Access │             │
│   │  User Sessions  │          │  Background     │             │
│   │  A/B Testing    │          │  Scripts Only   │             │
│   └─────────────────┘          └─────────────────┘             │
│                                                                 │
│   You see everything    →    You see almost nothing             │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│                    EXTENSION ANALYTICS STACK                    │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │                    DATA COLLECTION                       │   │
│  │  ┌─────────┐  ┌─────────┐  ┌─────────┐  ┌─────────┐    │   │
│  │  │ Popup   │  │ Content │  │Background│  │ Options │    │   │
│  │  │ Events  │  │ Script  │  │  Script  │  │  Page   │    │   │
│  │  └────┬────┘  └────┬────┘  └────┬────┘  └────┬────┘    │   │
│  └───────┴───────────┴───────────┴───────────┴────────────┘   │
│                           │                                     │
│                    ┌──────▼──────┐                              │
│                    │   Message   │                              │
│                    │   Passing   │                              │
│                    └──────┬──────┘                              │
│                           │                                     │
│  ┌────────────────────────▼────────────────────────────────┐   │
│  │                  ANALYTICS SERVICE                       │   │
│  │  ┌──────────────────────────────────────────────────┐   │   │
│  │  │  Your Backend / Analytics Platform                │   │   │
│  │  │  - Event ingestion                                │   │   │
│  │  │  - User identification                            │   │   │
│  │  │  - Session stitching                              │   │   │
│  │  └──────────────────────────────────────────────────┘   │   │
│  └─────────────────────────────────────────────────────────┘   │
│                           │                                     │
│  ┌────────────────────────▼────────────────────────────────┐   │
│  │                    VISUALIZATION                         │   │
│  │  ┌─────────┐  ┌─────────┐  ┌─────────┐  ┌─────────┐    │   │
│  │  │Dashboard│  │ Alerts  │  │ Reports │  │ Exports │    │   │
│  │  └─────────┘  └─────────┘  └─────────┘  └─────────┘    │   │
│  └─────────────────────────────────────────────────────────┘   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│                    PIRATE METRICS (AARRR)                       │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ACQUISITION ──► ACTIVATION ──► RETENTION ──► REVENUE ──► REFERRAL
│       │              │              │            │           │  │
│       ▼              ▼              ▼            ▼           ▼  │
│   ┌───────┐     ┌───────┐     ┌───────┐    ┌───────┐   ┌───────┐│
│   │Installs│    │ First │     │ DAU/  │    │Upgrade│   │ Share │││
│   │Sources │    │ Use   │     │ MAU   │    │ Rate  │   │ Rate  │││
│   └───────┘     └───────┘     └───────┘    └───────┘   └───────┘│
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│                    ADVANCED METRICS MATRIX                      │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  BEHAVIORAL                    TECHNICAL                        │
│  ─────────                     ─────────                        │
│  □ Feature correlation         □ Load time by component         │
│  □ Usage patterns by persona   □ Error rate by Chrome version   │
│  □ Power user indicators       □ Memory consumption             │
│  □ Abandonment flows           □ API latency                    │
│  □ Feature request frequency   □ Crash reports                  │
│                                                                 │
│  BUSINESS                      COMPETITIVE                      │
│  ────────                      ───────────                      │
│  □ Willingness to pay signals  □ Market share estimates         │
│  □ Expansion revenue           □ Feature gap analysis           │
│  □ Support ticket correlation  □ Review sentiment vs competitors│
│  □ NPS by user segment         □ Switching behavior             │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

// analytics.js - Core analytics module
class ExtensionAnalytics {
  constructor(config) {
    this.endpoint = config.endpoint;
    this.userId = null;
    this.sessionId = this.generateSessionId();
    this.queue = [];
    this.flushInterval = config.flushInterval || 30000;

    this.init();
  }

  async init() {
    // Get or create anonymous user ID
    const stored = await chrome.storage.local.get('analyticsUserId');
    if (stored.analyticsUserId) {
      this.userId = stored.analyticsUserId;
    } else {
      this.userId = this.generateUserId();
      await chrome.storage.local.set({ analyticsUserId: this.userId });
    }

    // Start flush interval
    setInterval(() => this.flush(), this.flushInterval);

    // Track session start
    this.track('session_start', {
      referrer: document.referrer,
      chrome_version: this.getChromeVersion()
    });
  }

  track(event, properties = {}) {
    const payload = {
      event,
      properties: {
        ...properties,
        extension_version: chrome.runtime.getManifest().version,
        timestamp: new Date().toISOString()
      },
      userId: this.userId,
      sessionId: this.sessionId,
      context: {
        platform: navigator.platform,
        language: navigator.language,
        screen: `${screen.width}x${screen.height}`
      }
    };

    this.queue.push(payload);

    // Flush immediately for important events
    if (this.isImportantEvent(event)) {
      this.flush();
    }
  }

  async flush() {
    if (this.queue.length === 0) return;

    const events = [...this.queue];
    this.queue = [];

    try {
      // Use sendBeacon for reliability
      const blob = new Blob([JSON.stringify(events)], { type: 'application/json' });
      navigator.sendBeacon(this.endpoint, blob);
    } catch (error) {
      // Fallback to fetch
      try {
        await fetch(this.endpoint, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(events)
        });
      } catch (fetchError) {
        // Re-queue failed events
        this.queue = [...events, ...this.queue];
      }
    }
  }

  isImportantEvent(event) {
    const important = ['purchase', 'upgrade', 'error', 'uninstall_intent'];
    return important.includes(event);
  }

  generateUserId() {
    return 'u_' + crypto.randomUUID();
  }

  generateSessionId() {
    return 's_' + crypto.randomUUID();
  }

  getChromeVersion() {
    const match = navigator.userAgent.match(/Chrome\/(\d+)/);
    return match ? match[1] : 'unknown';
  }
}

// Initialize
const analytics = new ExtensionAnalytics({
  endpoint: 'https://your-api.com/events',
  flushInterval: 30000
});

export default analytics;

-- Events table
CREATE TABLE extension_events (
    id BIGSERIAL PRIMARY KEY,
    event_name VARCHAR(100) NOT NULL,
    user_id VARCHAR(50) NOT NULL,
    session_id VARCHAR(50) NOT NULL,
    properties JSONB,
    context JSONB,
    extension_version VARCHAR(20),
    created_at TIMESTAMPTZ DEFAULT NOW(),

    -- Indexes for common queries
    INDEX idx_events_user (user_id),
    INDEX idx_events_name (event_name),
    INDEX idx_events_created (created_at),
    INDEX idx_events_user_created (user_id, created_at)
);

-- Daily aggregates (materialized for performance)
CREATE MATERIALIZED VIEW daily_metrics AS
SELECT
    DATE(created_at) as date,
    COUNT(DISTINCT user_id) as dau,
    COUNT(DISTINCT session_id) as sessions,
    COUNT(*) FILTER (WHERE event_name = 'feature_used') as feature_uses,
    COUNT(*) FILTER (WHERE event_name = 'error') as errors
FROM extension_events
WHERE created_at > NOW() - INTERVAL '90 days'
GROUP BY DATE(created_at);

-- Refresh daily
CREATE OR REPLACE FUNCTION refresh_daily_metrics()
RETURNS void AS $$
BEGIN
    REFRESH MATERIALIZED VIEW CONCURRENTLY daily_metrics;
END;
$$ LANGUAGE plpgsql;

// amplitude-integration.js
import * as amplitude from '@amplitude/analytics-browser';

class AmplitudeAnalytics {
  constructor(apiKey) {
    amplitude.init(apiKey, undefined, {
      defaultTracking: {
        sessions: true,
        pageViews: false, // Extensions don't have page views
        formInteractions: false
      }
    });
  }

  identify(userId, traits = {}) {
    const identifyObj = new amplitude.Identify();
    Object.entries(traits).forEach(([key, value]) => {
      identifyObj.set(key, value);
    });
    amplitude.identify(identifyObj);
    amplitude.setUserId(userId);
  }

  track(event, properties = {}) {
    amplitude.track(event, {
      ...properties,
      extension_version: chrome.runtime.getManifest().version
    });
  }

  setUserProperty(key, value) {
    const identifyObj = new amplitude.Identify();
    identifyObj.set(key, value);
    amplitude.identify(identifyObj);
  }

  revenue(productId, price, quantity = 1) {
    const revenue = new amplitude.Revenue()
      .setProductId(productId)
      .setPrice(price)
      .setQuantity(quantity);
    amplitude.revenue(revenue);
  }
}

export default new AmplitudeAnalytics('YOUR_API_KEY');

// mixpanel-integration.js
import mixpanel from 'mixpanel-browser';

class MixpanelAnalytics {
  constructor(token) {
    mixpanel.init(token, {
      debug: process.env.NODE_ENV === 'development',
      track_pageview: false,
      persistence: 'localStorage'
    });
  }

  identify(userId) {
    mixpanel.identify(userId);
  }

  setProfile(properties) {
    mixpanel.people.set(properties);
  }

  track(event, properties = {}) {
    mixpanel.track(event, {
      ...properties,
      $browser_version: this.getChromeVersion(),
      extension_version: chrome.runtime.getManifest().version
    });
  }

  trackCharge(amount, properties = {}) {
    mixpanel.people.track_charge(amount, properties);
  }

  getChromeVersion() {
    const match = navigator.userAgent.match(/Chrome\/(\d+)/);
    return match ? match[1] : 'unknown';
  }
}

export default new MixpanelAnalytics('YOUR_TOKEN');

// ga4-integration.js
class GA4Analytics {
  constructor(measurementId) {
    this.measurementId = measurementId;
    this.clientId = null;
    this.init();
  }

  async init() {
    // Get or create client ID
    const stored = await chrome.storage.local.get('ga_client_id');
    if (stored.ga_client_id) {
      this.clientId = stored.ga_client_id;
    } else {
      this.clientId = this.generateClientId();
      await chrome.storage.local.set({ ga_client_id: this.clientId });
    }
  }

  async track(eventName, params = {}) {
    const payload = {
      client_id: this.clientId,
      events: [{
        name: eventName,
        params: {
          ...params,
          engagement_time_msec: 100,
          extension_version: chrome.runtime.getManifest().version
        }
      }]
    };

    try {
      await fetch(
        `https://www.google-analytics.com/mp/collect?measurement_id=${this.measurementId}&api_secret=YOUR_SECRET`,
        {
          method: 'POST',
          body: JSON.stringify(payload)
        }
      );
    } catch (error) {
      console.error('GA4 tracking failed:', error);
    }
  }

  generateClientId() {
    return Math.random().toString(36).substring(2) + Date.now().toString(36);
  }
}

export default new GA4Analytics('G-XXXXXXXXXX');

┌─────────────────────────────────────────────────────────────────┐
│                    EVENT NAMING CONVENTION                      │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  Format: [object]_[action]                                      │
│                                                                 │
│  LIFECYCLE              FEATURES              UI                │
│  ─────────              ────────              ──                │
│  extension_installed    feature_used          popup_opened      │
│  extension_updated      feature_discovered    settings_opened   │
│  extension_uninstalled  feature_configured    tab_switched      │
│  session_started        export_completed      modal_shown       │
│  session_ended          import_started        tooltip_viewed    │
│                                                                 │
│  CONVERSION             ERRORS                ENGAGEMENT        │
│  ──────────             ──────                ──────────        │
│  upgrade_viewed         error_occurred        shortcut_used     │
│  upgrade_started        crash_detected        search_performed  │
│  upgrade_completed      api_failed            item_created      │
│  trial_started          permission_denied     item_deleted      │
│  trial_expired                                                  │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

// events.js - Define all trackable events
const EVENTS = {
  // Lifecycle
  INSTALLED: 'extension_installed',
  UPDATED: 'extension_updated',
  UNINSTALL_SURVEY: 'uninstall_survey_shown',

  // Onboarding
  ONBOARDING_STARTED: 'onboarding_started',
  ONBOARDING_STEP_COMPLETED: 'onboarding_step_completed',
  ONBOARDING_COMPLETED: 'onboarding_completed',
  ONBOARDING_SKIPPED: 'onboarding_skipped',

  // Core Features
  FEATURE_USED: 'feature_used',
  FEATURE_DISCOVERED: 'feature_discovered',
  FEATURE_ERROR: 'feature_error',

  // UI Interactions
  POPUP_OPENED: 'popup_opened',
  POPUP_CLOSED: 'popup_closed',
  SETTINGS_OPENED: 'settings_opened',
  SETTINGS_CHANGED: 'settings_changed',

  // Engagement
  SHORTCUT_USED: 'keyboard_shortcut_used',
  CONTEXT_MENU_USED: 'context_menu_used',

  // Conversion
  UPGRADE_PROMPT_SHOWN: 'upgrade_prompt_shown',
  UPGRADE_CLICKED: 'upgrade_clicked',
  UPGRADE_COMPLETED: 'upgrade_completed',

  // Errors
  ERROR_OCCURRED: 'error_occurred',
  API_ERROR: 'api_error'
};

// Track with context
function trackFeatureUse(featureName, metadata = {}) {
  analytics.track(EVENTS.FEATURE_USED, {
    feature_name: featureName,
    trigger: metadata.trigger || 'unknown', // 'popup', 'shortcut', 'context_menu'
    duration_ms: metadata.duration,
    success: metadata.success !== false,
    ...metadata
  });
}

// Track onboarding funnel
function trackOnboardingStep(step, total, action) {
  analytics.track(EVENTS.ONBOARDING_STEP_COMPLETED, {
    step_number: step,
    total_steps: total,
    step_name: action,
    time_on_step_ms: getTimeOnStep()
  });
}

// Track errors with context
function trackError(error, context = {}) {
  analytics.track(EVENTS.ERROR_OCCURRED, {
    error_message: error.message,
    error_stack: error.stack?.substring(0, 500),
    error_type: error.name,
    url: context.url,
    action: context.action,
    chrome_version: getChromeVersion()
  });
}

// session-manager.js
class SessionManager {
  constructor(analytics, timeout = 30 * 60 * 1000) { // 30 min default
    this.analytics = analytics;
    this.timeout = timeout;
    this.sessionStart = null;
    this.lastActivity = null;
    this.pageViews = 0;
    this.featureUses = 0;

    this.init();
  }

  init() {
    this.startSession();

    // Listen for activity
    chrome.runtime.onMessage.addListener((message) => {
      if (message.type === 'USER_ACTIVITY') {
        this.recordActivity();
      }
    });

    // Check for session timeout
    setInterval(() => this.checkTimeout(), 60000);
  }

  startSession() {
    this.sessionStart = Date.now();
    this.lastActivity = Date.now();
    this.pageViews = 0;
    this.featureUses = 0;

    this.analytics.track('session_started', {
      session_id: this.analytics.sessionId
    });
  }

  recordActivity() {
    const now = Date.now();

    // Check if session expired
    if (now - this.lastActivity > this.timeout) {
      this.endSession();
      this.startSession();
    }

    this.lastActivity = now;
  }

  recordPageView() {
    this.pageViews++;
    this.recordActivity();
  }

  recordFeatureUse() {
    this.featureUses++;
    this.recordActivity();
  }

  checkTimeout() {
    if (Date.now() - this.lastActivity > this.timeout) {
      this.endSession();
    }
  }

  endSession() {
    const duration = Date.now() - this.sessionStart;

    this.analytics.track('session_ended', {
      duration_seconds: Math.round(duration / 1000),
      page_views: this.pageViews,
      feature_uses: this.featureUses,
      session_id: this.analytics.sessionId
    });
  }

  getSessionDuration() {
    return Date.now() - this.sessionStart;
  }
}

// retention-calculator.js
class RetentionCalculator {
  constructor(db) {
    this.db = db;
  }

  async calculateCohortRetention(cohortDate, days = [1, 7, 14, 30]) {
    // Get users who installed on cohort date
    const cohortUsers = await this.db.query(`
      SELECT DISTINCT user_id
      FROM extension_events
      WHERE event_name = 'extension_installed'
      AND DATE(created_at) = $1
    `, [cohortDate]);

    const cohortSize = cohortUsers.length;
    if (cohortSize === 0) return null;

    const retention = {};

    for (const day of days) {
      const targetDate = new Date(cohortDate);
      targetDate.setDate(targetDate.getDate() + day);

      const returnedUsers = await this.db.query(`
        SELECT COUNT(DISTINCT user_id) as count
        FROM extension_events
        WHERE user_id = ANY($1)
        AND DATE(created_at) = $2
      `, [cohortUsers.map(u => u.user_id), targetDate]);

      retention[`day_${day}`] = {
        retained: returnedUsers[0].count,
        rate: (returnedUsers[0].count / cohortSize * 100).toFixed(1)
      };
    }

    return {
      cohort_date: cohortDate,
      cohort_size: cohortSize,
      retention
    };
  }

  async calculateDAUMAU() {
    const result = await this.db.query(`
      WITH daily AS (
        SELECT COUNT(DISTINCT user_id) as dau
        FROM extension_events
        WHERE created_at > NOW() - INTERVAL '1 day'
      ),
      monthly AS (
        SELECT COUNT(DISTINCT user_id) as mau
        FROM extension_events
        WHERE created_at > NOW() - INTERVAL '30 days'
      )
      SELECT
        daily.dau,
        monthly.mau,
        ROUND(daily.dau::numeric / NULLIF(monthly.mau, 0) * 100, 1) as stickiness
      FROM daily, monthly
    `);

    return result[0];
  }

  async identifyChurnRisk() {
    // Users who were active but haven't been seen recently
    const atRisk = await this.db.query(`
      SELECT user_id, MAX(created_at) as last_seen
      FROM extension_events
      WHERE user_id IN (
        -- Was active in past 30 days
        SELECT DISTINCT user_id
        FROM extension_events
        WHERE created_at BETWEEN NOW() - INTERVAL '30 days' AND NOW() - INTERVAL '7 days'
      )
      GROUP BY user_id
      HAVING MAX(created_at) < NOW() - INTERVAL '7 days'
      ORDER BY last_seen DESC
    `);

    return atRisk;
  }
}

<!-- retention-dashboard.html -->
<div class="retention-grid">
  <div class="metric-card">
    <h3>📈 DAU/MAU Ratio</h3>
    <div class="big-number" id="stickiness">--</div>
    <div class="subtext">Target: >20%</div>
  </div>

  <div class="metric-card">
    <h3>🔄 Day 7 Retention</h3>
    <div class="big-number" id="d7-retention">--</div>
    <div class="subtext">Users returning after 1 week</div>
  </div>

  <div class="metric-card">
    <h3>⚠️ Churn Risk</h3>
    <div class="big-number" id="churn-risk">--</div>
    <div class="subtext">Users at risk of churning</div>
  </div>
</div>

<div class="cohort-table">
  <h3>📅 Cohort Retention Matrix</h3>
  <table id="cohort-matrix">
    <thead>
      <tr>
        <th>Cohort</th>
        <th>Size</th>
        <th>Day 1</th>
        <th>Day 7</th>
        <th>Day 14</th>
        <th>Day 30</th>
      </tr>
    </thead>
    <tbody>
      <!-- Populated by JavaScript -->
    </tbody>
  </table>
</div>

// engagement-score.js
class EngagementScorer {
  constructor() {
    // Define scoring weights
    this.weights = {
      session_frequency: 0.25,
      feature_breadth: 0.25,
      feature_depth: 0.20,
      recency: 0.15,
      tenure: 0.15
    };

    this.thresholds = {
      session_frequency: { low: 1, medium: 3, high: 7 }, // per week
      feature_breadth: { low: 1, medium: 3, high: 5 },   // features used
      feature_depth: { low: 5, medium: 20, high: 50 },   // uses per feature
      recency: { low: 7, medium: 3, high: 1 },           // days since last use
      tenure: { low: 7, medium: 30, high: 90 }           // days since install
    };
  }

  async calculateScore(userId, db) {
    const userData = await this.getUserData(userId, db);

    const scores = {
      session_frequency: this.scoreMetric(
        userData.sessions_last_week,
        this.thresholds.session_frequency
      ),
      feature_breadth: this.scoreMetric(
        userData.unique_features_used,
        this.thresholds.feature_breadth
      ),
      feature_depth: this.scoreMetric(
        userData.avg_feature_uses,
        this.thresholds.feature_depth
      ),
      recency: this.scoreMetricInverse(
        userData.days_since_last_use,
        this.thresholds.recency
      ),
      tenure: this.scoreMetric(
        userData.days_since_install,
        this.thresholds.tenure
      )
    };

    // Calculate weighted total
    let total = 0;
    for (const [metric, score] of Object.entries(scores)) {
      total += score * this.weights[metric];
    }

    return {
      total: Math.round(total * 100),
      breakdown: scores,
      segment: this.getSegment(total)
    };
  }

  scoreMetric(value, thresholds) {
    if (value >= thresholds.high) return 1;
    if (value >= thresholds.medium) return 0.66;
    if (value >= thresholds.low) return 0.33;
    return 0;
  }

  scoreMetricInverse(value, thresholds) {
    // Lower is better for recency
    if (value <= thresholds.high) return 1;
    if (value <= thresholds.medium) return 0.66;
    if (value <= thresholds.low) return 0.33;
    return 0;
  }

  getSegment(score) {
    if (score >= 0.8) return 'champion';
    if (score >= 0.6) return 'engaged';
    if (score >= 0.4) return 'casual';
    if (score >= 0.2) return 'at_risk';
    return 'dormant';
  }

  async getUserData(userId, db) {
    return db.query(`
      SELECT
        COUNT(DISTINCT session_id) FILTER (
          WHERE created_at > NOW() - INTERVAL '7 days'
        ) as sessions_last_week,
        COUNT(DISTINCT properties->>'feature_name') FILTER (
          WHERE event_name = 'feature_used'
        ) as unique_features_used,
        AVG(feature_count) as avg_feature_uses,
        EXTRACT(days FROM NOW() - MAX(created_at)) as days_since_last_use,
        EXTRACT(days FROM NOW() - MIN(created_at)) as days_since_install
      FROM extension_events
      WHERE user_id = $1
    `, [userId]);
  }
}

┌─────────────────────────────────────────────────────────────────┐
│                    CONVERSION FUNNEL                            │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌─────────────────────────────────────────────────┐           │
│  │              ALL USERS (100%)                    │           │
│  └─────────────────────────┬───────────────────────┘           │
│                            │                                    │
│  ┌─────────────────────────▼───────────────────────┐           │
│  │        HIT PAYWALL / LIMIT (40%)                │           │
│  │        Users who encounter upgrade prompt        │           │
│  └─────────────────────────┬───────────────────────┘           │
│                            │                                    │
│  ┌─────────────────────────▼───────────────────────┐           │
│  │         VIEWED PRICING (20%)                    │           │
│  │         Clicked to see options                   │           │
│  └─────────────────────────┬───────────────────────┘           │
│                            │                                    │
│  ┌─────────────────────────▼───────────────────────┐           │
│  │         STARTED CHECKOUT (8%)                   │           │
│  │         Began payment process                    │           │
│  └─────────────────────────┬───────────────────────┘           │
│                            │                                    │
│  ┌─────────────────────────▼───────────────────────┐           │
│  │         COMPLETED PURCHASE (4%)                 │           │
│  │         Successfully converted                   │           │
│  └─────────────────────────────────────────────────┘           │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

// conversion-tracker.js
class ConversionTracker {
  constructor(analytics) {
    this.analytics = analytics;
  }

  // Track when user hits a paywall/limit
  trackPaywallHit(feature, currentUsage, limit) {
    this.analytics.track('paywall_hit', {
      feature,
      current_usage: currentUsage,
      limit,
      usage_percentage: (currentUsage / limit * 100).toFixed(0)
    });
  }

  // Track upgrade prompt impressions
  trackUpgradePromptShown(trigger, variant) {
    this.analytics.track('upgrade_prompt_shown', {
      trigger, // 'paywall', 'feature_discovery', 'settings_page', 'periodic'
      variant, // For A/B testing different prompts
      timestamp: Date.now()
    });
  }

  // Track pricing page views
  trackPricingViewed(source) {
    this.analytics.track('pricing_viewed', {
      source,
      current_plan: this.getCurrentPlan(),
      days_as_user: this.getDaysAsUser()
    });
  }

  // Track checkout started
  trackCheckoutStarted(plan, price, billingCycle) {
    this.analytics.track('checkout_started', {
      plan,
      price,
      billing_cycle: billingCycle,
      currency: 'USD'
    });
  }

  // Track successful purchase
  trackPurchaseCompleted(transactionId, plan, price, billingCycle) {
    this.analytics.track('purchase_completed', {
      transaction_id: transactionId,
      plan,
      price,
      billing_cycle: billingCycle,
      currency: 'USD',
      ltv_estimate: this.estimateLTV(plan, billingCycle)
    });

    // Also track revenue
    this.analytics.revenue(plan, price);
  }

  // Track checkout abandonment
  trackCheckoutAbandoned(plan, step, reason) {
    this.analytics.track('checkout_abandoned', {
      plan,
      step, // 'payment_info', 'confirmation', etc.
      reason // 'closed', 'error', 'back_button'
    });
  }

  // Track upgrade triggers (what made them upgrade)
  trackUpgradeTrigger(trigger) {
    this.analytics.track('upgrade_trigger', {
      trigger,
      user_tenure_days: this.getDaysAsUser(),
      total_feature_uses: this.getTotalFeatureUses()
    });
  }

  estimateLTV(plan, billingCycle) {
    // Estimate based on historical data
    const avgMonths = {
      monthly: 4.2,
      yearly: 14.5,
      lifetime: 36 // Estimated equivalent
    };

    const prices = {
      basic: { monthly: 5, yearly: 48 },
      pro: { monthly: 9, yearly: 86 }
    };

    if (billingCycle === 'lifetime') {
      return prices[plan].monthly * avgMonths.lifetime;
    }

    const monthlyPrice = billingCycle === 'yearly'
      ? prices[plan].yearly / 12
      : prices[plan].monthly;

    return monthlyPrice * avgMonths[billingCycle];
  }
}

// revenue-dashboard.js
class RevenueDashboard {
  constructor(db) {
    this.db = db;
  }

  async getMRR() {
    // Monthly Recurring Revenue
    return this.db.query(`
      SELECT
        SUM(CASE
          WHEN billing_cycle = 'monthly' THEN price
          WHEN billing_cycle = 'yearly' THEN price / 12
          ELSE 0
        END) as mrr
      FROM subscriptions
      WHERE status = 'active'
    `);
  }

  async getARPU() {
    // Average Revenue Per User
    const result = await this.db.query(`
      SELECT
        SUM(amount) / COUNT(DISTINCT user_id) as arpu
      FROM transactions
      WHERE created_at > NOW() - INTERVAL '30 days'
    `);
    return result[0].arpu;
  }

  async getConversionRate(period = '30 days') {
    const result = await this.db.query(`
      WITH total_users AS (
        SELECT COUNT(DISTINCT user_id) as count
        FROM extension_events
        WHERE created_at > NOW() - INTERVAL $1
      ),
      converted_users AS (
        SELECT COUNT(DISTINCT user_id) as count
        FROM transactions
        WHERE created_at > NOW() - INTERVAL $1
      )
      SELECT
        converted_users.count::float / NULLIF(total_users.count, 0) * 100 as rate
      FROM total_users, converted_users
    `, [period]);

    return result[0].rate;
  }

  async getUpgradeTriggers() {
    // What features/actions lead to upgrades
    return this.db.query(`
      SELECT
        properties->>'trigger' as trigger,
        COUNT(*) as count,
        ROUND(COUNT(*)::numeric / SUM(COUNT(*)) OVER () * 100, 1) as percentage
      FROM extension_events
      WHERE event_name = 'upgrade_trigger'
      AND created_at > NOW() - INTERVAL '90 days'
      GROUP BY properties->>'trigger'
      ORDER BY count DESC
      LIMIT 10
    `);
  }

  async getLTVByAcquisitionSource() {
    return this.db.query(`
      SELECT
        u.acquisition_source,
        AVG(t.total_spent) as avg_ltv,
        COUNT(DISTINCT u.id) as user_count
      FROM users u
      JOIN (
        SELECT user_id, SUM(amount) as total_spent
        FROM transactions
        GROUP BY user_id
      ) t ON u.id = t.user_id
      GROUP BY u.acquisition_source
      ORDER BY avg_ltv DESC
    `);
  }
}

┌─────────────────────────────────────────────────────────────────┐
│              CHROME WEB STORE ANALYTICS                         │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  AVAILABLE METRICS              NOT AVAILABLE                   │
│  ─────────────────              ─────────────                   │
│  ✓ Weekly installs              ✗ Install sources (referrers)   │
│  ✓ Weekly uninstalls            ✗ Geographic breakdown          │
│  ✓ Weekly active users          ✗ User demographics             │
│  ✓ Rating over time             ✗ Feature usage                 │
│  ✓ Review count                 ✗ Session data                  │
│  ✓ Chrome version breakdown     ✗ Revenue tracking              │
│  ✓ Impressions (limited)        ✗ A/B testing                   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

// cws-supplement.js
class CWSAnalyticsSupplement {
  constructor(analytics) {
    this.analytics = analytics;
  }

  // Track install source (when possible)
  async trackInstallSource() {
    // Check URL params if installed from landing page
    const result = await chrome.storage.local.get('install_source');

    if (!result.install_source) {
      // Try to infer source
      const source = await this.inferInstallSource();
      await chrome.storage.local.set({ install_source: source });

      this.analytics.track('install_source_identified', {
        source,
        method: 'inferred'
      });
    }
  }

  async inferInstallSource() {
    // Check if we have referrer data
    const tabs = await chrome.tabs.query({ active: true });
    if (tabs[0]?.url) {
      const url = new URL(tabs[0].url);

      // Check for UTM params
      const utmSource = url.searchParams.get('utm_source');
      if (utmSource) return utmSource;

      // Check for known referrers
      if (url.hostname.includes('producthunt')) return 'producthunt';
      if (url.hostname.includes('twitter') || url.hostname.includes('x.com')) return 'twitter';
      if (url.hostname.includes('reddit')) return 'reddit';
    }

    return 'organic_cws';
  }

  // Track geographic region (privacy-friendly)
  trackRegion() {
    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    const language = navigator.language;

    this.analytics.track('user_region', {
      timezone,
      language,
      region: this.timezoneToRegion(timezone)
    });
  }

  timezoneToRegion(tz) {
    if (tz.startsWith('America/')) return 'americas';
    if (tz.startsWith('Europe/')) return 'europe';
    if (tz.startsWith('Asia/')) return 'asia';
    if (tz.startsWith('Australia/') || tz.startsWith('Pacific/')) return 'oceania';
    return 'other';
  }

  // Track Chrome version for compatibility
  trackChromeVersion() {
    const match = navigator.userAgent.match(/Chrome\/(\d+)/);
    const version = match ? parseInt(match[1]) : 'unknown';

    this.analytics.setUserProperty('chrome_version', version);

    // Alert if using old version
    if (version < 100) {
      this.analytics.track('old_chrome_version', { version });
    }
  }
}

// background.js
chrome.runtime.setUninstallURL('https://your-site.com/uninstall-survey', () => {
  // URL will open when extension is uninstalled
});

// Pre-uninstall: try to capture why they might leave
chrome.runtime.onSuspend.addListener(() => {
  // Last chance to track something
  analytics.track('extension_suspended', {
    last_action: getLastAction(),
    session_duration: getSessionDuration()
  });
});

<!-- uninstall-survey.html -->
<div class="survey-container">
  <h1>😢 We're sorry to see you go!</h1>
  <p>Help us improve by telling us why you uninstalled:</p>

  <form id="uninstall-survey">
    <label>
      <input type="radio" name="reason" value="not_useful">
      It wasn't useful for me
    </label>
    <label>
      <input type="radio" name="reason" value="too_expensive">
      Too expensive
    </label>
    <label>
      <input type="radio" name="reason" value="found_alternative">
      Found a better alternative
    </label>
    <label>
      <input type="radio" name="reason" value="bugs">
      Too many bugs/issues
    </label>
    <label>
      <input type="radio" name="reason" value="privacy">
      Privacy concerns
    </label>
    <label>
      <input type="radio" name="reason" value="other">
      Other: <input type="text" name="other_reason">
    </label>

    <button type="submit">Submit Feedback</button>
  </form>
</div>

<script>
document.getElementById('uninstall-survey').addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);

  await fetch('/api/uninstall-feedback', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      reason: formData.get('reason'),
      other_reason: formData.get('other_reason'),
      // Get user ID from URL params if available
      user_id: new URLSearchParams(window.location.search).get('uid')
    })
  });

  // Show thank you message
  document.body.innerHTML = '<h1>Thank you for your feedback! 🙏</h1>';
});
</script>

┌─────────────────────────────────────────────────────────────────┐
│                  PRIVACY-FIRST ANALYTICS                        │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  COLLECT                        NEVER COLLECT                   │
│  ───────                        ─────────────                   │
│  ✓ Anonymous usage patterns     ✗ Browsing history              │
│  ✓ Feature interactions         ✗ Personal identifiers          │
│  ✓ Error reports (sanitized)    ✗ Page content                  │
│  ✓ Aggregate statistics         ✗ Form data                     │
│  ✓ Opt-in feedback              ✗ Passwords/credentials         │
│  ✓ Performance metrics          ✗ Other extension data          │
│                                                                 │
│  BEST PRACTICES                                                 │
│  ──────────────                                                 │
│  • Minimize data collection                                     │
│  • Anonymize by default                                         │
│  • Provide opt-out mechanism                                    │
│  • Clear privacy policy                                         │
│  • Data retention limits                                        │
│  • GDPR/CCPA compliance                                         │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

// privacy-analytics.js
class PrivacyAnalytics {
  constructor(config) {
    this.enabled = true;
    this.anonymousId = null;
    this.config = config;

    this.init();
  }

  async init() {
    // Check user consent
    const consent = await this.getConsent();
    this.enabled = consent.analytics !== false;

    if (this.enabled) {
      this.anonymousId = await this.getOrCreateAnonymousId();
    }
  }

  async getConsent() {
    const stored = await chrome.storage.local.get('privacy_consent');
    return stored.privacy_consent || { analytics: true }; // Opt-out model
  }

  async setConsent(consent) {
    await chrome.storage.local.set({ privacy_consent: consent });
    this.enabled = consent.analytics !== false;

    if (!this.enabled) {
      // Clear existing data
      await this.clearLocalData();
    }
  }

  async getOrCreateAnonymousId() {
    const stored = await chrome.storage.local.get('anonymous_id');
    if (stored.anonymous_id) {
      return stored.anonymous_id;
    }

    // Create anonymous ID (not linked to any personal info)
    const id = 'anon_' + crypto.randomUUID();
    await chrome.storage.local.set({ anonymous_id: id });
    return id;
  }

  track(event, properties = {}) {
    if (!this.enabled) return;

    // Sanitize properties
    const sanitized = this.sanitizeProperties(properties);

    // Send anonymized event
    this.send({
      event,
      properties: sanitized,
      anonymousId: this.anonymousId,
      timestamp: new Date().toISOString()
    });
  }

  sanitizeProperties(props) {
    const sanitized = {};
    const blocked = ['email', 'password', 'token', 'key', 'secret', 'url', 'domain'];

    for (const [key, value] of Object.entries(props)) {
      // Skip blocked fields
      if (blocked.some(b => key.toLowerCase().includes(b))) {
        continue;
      }

      // Sanitize URLs (keep only path structure)
      if (typeof value === 'string' && value.startsWith('http')) {
        sanitized[key] = this.sanitizeUrl(value);
        continue;
      }

      // Truncate long strings
      if (typeof value === 'string' && value.length > 100) {
        sanitized[key] = value.substring(0, 100) + '...';
        continue;
      }

      sanitized[key] = value;
    }

    return sanitized;
  }

  sanitizeUrl(url) {
    try {
      const parsed = new URL(url);
      // Only keep path, not domain or params
      return parsed.pathname;
    } catch {
      return 'invalid_url';
    }
  }

  async clearLocalData() {
    await chrome.storage.local.remove(['anonymous_id', 'analytics_queue']);
  }

  // GDPR data export
  async exportUserData() {
    const data = await chrome.storage.local.get(null);
    return {
      anonymous_id: data.anonymous_id,
      consent: data.privacy_consent,
      settings: data.settings,
      // Don't include analytics queue - that's our data
    };
  }

  // GDPR data deletion
  async deleteUserData() {
    // Clear local storage
    await chrome.storage.local.clear();

    // Request server-side deletion
    await fetch(`${this.config.endpoint}/delete`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ anonymousId: this.anonymousId })
    });
  }
}

<!-- privacy-settings.html -->
<div class="privacy-settings">
  <h2>🔒 Privacy Settings</h2>

  <div class="setting-group">
    <label class="toggle">
      <input type="checkbox" id="analytics-consent" checked>
      <span class="slider"></span>
      <span class="label">Share anonymous usage data</span>
    </label>
    <p class="description">
      Help us improve by sharing anonymous usage statistics.
      We never collect personal information or browsing history.
    </p>
  </div>

  <div class="setting-group">
    <label class="toggle">
      <input type="checkbox" id="error-reporting" checked>
      <span class="slider"></span>
      <span class="label">Automatic error reporting</span>
    </label>
    <p class="description">
      Automatically send crash reports to help us fix bugs faster.
    </p>
  </div>

  <div class="data-actions">
    <h3>Your Data</h3>
    <button id="export-data">📥 Export My Data</button>
    <button id="delete-data" class="danger">🗑️ Delete My Data</button>
  </div>

  <div class="privacy-links">
    <a href="https://your-site.com/privacy">Privacy Policy</a>
    <a href="https://your-site.com/terms">Terms of Service</a>
  </div>
</div>

<script>
document.getElementById('analytics-consent').addEventListener('change', async (e) => {
  await analytics.setConsent({ analytics: e.target.checked });
});

document.getElementById('export-data').addEventListener('click', async () => {
  const data = await analytics.exportUserData();
  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  chrome.downloads.download({ url, filename: 'my-extension-data.json' });
});

document.getElementById('delete-data').addEventListener('click', async () => {
  if (confirm('This will delete all your data. Are you sure?')) {
    await analytics.deleteUserData();
    alert('Your data has been deleted.');
  }
});
</script>

┌─────────────────────────────────────────────────────────────────┐
│                 ANALYTICS DASHBOARD STACK                       │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │                      FRONTEND                            │   │
│  │  React/Vue Dashboard with real-time updates              │   │
│  │  ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐        │   │
│  │  │ Charts  │ │ Tables  │ │ Filters │ │ Alerts  │        │   │
│  │  └─────────┘ └─────────┘ └─────────┘ └─────────┘        │   │
│  └─────────────────────────┬───────────────────────────────┘   │
│                            │                                    │
│  ┌─────────────────────────▼───────────────────────────────┐   │
│  │                        API                               │   │
│  │  /api/metrics, /api/cohorts, /api/funnels, /api/export  │   │
│  └─────────────────────────┬───────────────────────────────┘   │
│                            │                                    │
│  ┌─────────────────────────▼───────────────────────────────┐   │
│  │                    QUERY LAYER                           │   │
│  │  Pre-computed aggregates + real-time rollups             │   │
│  └─────────────────────────┬───────────────────────────────┘   │
│                            │                                    │
│  ┌─────────────────────────▼───────────────────────────────┐   │
│  │                     DATABASE                             │   │
│  │  PostgreSQL / ClickHouse / TimescaleDB                   │   │
│  └─────────────────────────────────────────────────────────┘   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

// dashboard-api.js
const express = require('express');
const router = express.Router();

// Overview metrics
router.get('/api/metrics/overview', async (req, res) => {
  const { period = '7d' } = req.query;

  const metrics = await db.query(`
    SELECT
      COUNT(DISTINCT user_id) as active_users,
      COUNT(DISTINCT session_id) as sessions,
      COUNT(*) FILTER (WHERE event_name = 'feature_used') as feature_uses,
      COUNT(*) FILTER (WHERE event_name = 'error_occurred') as errors,
      COUNT(*) FILTER (WHERE event_name = 'purchase_completed') as purchases,
      SUM((properties->>'price')::numeric) FILTER (
        WHERE event_name = 'purchase_completed'
      ) as revenue
    FROM extension_events
    WHERE created_at > NOW() - INTERVAL '${period}'
  `);

  res.json(metrics[0]);
});

// DAU/MAU trend
router.get('/api/metrics/dau-trend', async (req, res) => {
  const { days = 30 } = req.query;

  const trend = await db.query(`
    SELECT
      DATE(created_at) as date,
      COUNT(DISTINCT user_id) as dau
    FROM extension_events
    WHERE created_at > NOW() - INTERVAL '${days} days'
    GROUP BY DATE(created_at)
    ORDER BY date
  `);

  res.json(trend);
});

// Feature usage breakdown
router.get('/api/metrics/features', async (req, res) => {
  const features = await db.query(`
    SELECT
      properties->>'feature_name' as feature,
      COUNT(*) as uses,
      COUNT(DISTINCT user_id) as unique_users,
      AVG((properties->>'duration_ms')::numeric) as avg_duration
    FROM extension_events
    WHERE event_name = 'feature_used'
    AND created_at > NOW() - INTERVAL '30 days'
    GROUP BY properties->>'feature_name'
    ORDER BY uses DESC
  `);

  res.json(features);
});

// Conversion funnel
router.get('/api/metrics/funnel', async (req, res) => {
  const funnel = await db.query(`
    WITH funnel_events AS (
      SELECT
        user_id,
        MAX(CASE WHEN event_name = 'paywall_hit' THEN 1 ELSE 0 END) as hit_paywall,
        MAX(CASE WHEN event_name = 'pricing_viewed' THEN 1 ELSE 0 END) as viewed_pricing,
        MAX(CASE WHEN event_name = 'checkout_started' THEN 1 ELSE 0 END) as started_checkout,
        MAX(CASE WHEN event_name = 'purchase_completed' THEN 1 ELSE 0 END) as completed_purchase
      FROM extension_events
      WHERE created_at > NOW() - INTERVAL '30 days'
      GROUP BY user_id
    )
    SELECT
      SUM(hit_paywall) as hit_paywall,
      SUM(viewed_pricing) as viewed_pricing,
      SUM(started_checkout) as started_checkout,
      SUM(completed_purchase) as completed_purchase
    FROM funnel_events
  `);

  res.json(funnel[0]);
});

// Cohort retention
router.get('/api/metrics/cohorts', async (req, res) => {
  const cohorts = await db.query(`
    WITH cohorts AS (
      SELECT
        user_id,
        DATE(MIN(created_at)) as cohort_date
      FROM extension_events
      WHERE event_name = 'extension_installed'
      GROUP BY user_id
    ),
    activity AS (
      SELECT
        c.user_id,
        c.cohort_date,
        DATE(e.created_at) - c.cohort_date as days_since_install
      FROM cohorts c
      JOIN extension_events e ON c.user_id = e.user_id
    )
    SELECT
      cohort_date,
      COUNT(DISTINCT user_id) as cohort_size,
      COUNT(DISTINCT user_id) FILTER (WHERE days_since_install = 1) as d1,
      COUNT(DISTINCT user_id) FILTER (WHERE days_since_install = 7) as d7,
      COUNT(DISTINCT user_id) FILTER (WHERE days_since_install = 30) as d30
    FROM activity
    WHERE cohort_date > NOW() - INTERVAL '60 days'
    GROUP BY cohort_date
    ORDER BY cohort_date
  `);

  res.json(cohorts);
});