Analytics Integration

LaunchKit provides built-in support for multiple analytics providers, allowing you to track user behavior, measure conversions, and optimize your application’s performance. All analytics are disabled by default for privacy.

Overview

LaunchKit supports four popular analytics services:

1. Google Analytics 4 - Full-featured analytics with e-commerce tracking
2. Google Tag Manager - Advanced tag management for marketing
3. Plausible - Lightweight, privacy-focused analytics (no cookies)
4. Umami - Self-hosted, privacy-focused alternative

Configuration

All analytics settings are managed in the config.ts file. No environment variables needed!

Basic Setup

1. Open /config.ts in your project
2. Find the analytics section
3. Enable and configure your preferred analytics service(s)

// config.ts
analytics: {
  googleAnalytics: {
    enabled: true, // Enable Google Analytics
    measurementId: 'G-XXXXXXXXXX', // Your GA4 measurement ID
  },
  // ... other analytics services
}

Analytics Services

Google Analytics 4

The most popular analytics platform with comprehensive features.

Setup

1. Create a GA4 property at analytics.google.com
2. Get your Measurement ID (starts with G-)
3. Update your config:

googleAnalytics: {
  enabled: true,
  measurementId: 'G-YOUR_ID_HERE',
}

Features

• Automatic page view tracking
• E-commerce tracking ready
• Custom events support
• Audience segmentation
• Integration with Google Ads

Google Tag Manager

Advanced tag management for marketing and analytics.

Setup

1. Create a container at tagmanager.google.com
2. Get your Container ID (starts with GTM-)
3. Update your config:

googleTagManager: {
  enabled: true,
  containerId: 'GTM-YOUR_ID',
}

Features

• Manage all tracking tags in one place
• No code deployment for tag changes
• Built-in tag templates
• Preview and debug mode
• Version control for tags

Plausible Analytics

Lightweight, privacy-focused analytics without cookies.

Setup

1. Sign up at plausible.io or self-host
2. Add your domain
3. Update your config:

plausible: {
  enabled: true,
  domain: 'yourdomain.com', // Without https://
  scriptSrc: 'https://plausible.io/js/script.js', // Or your self-hosted URL
}

Features

• No cookies (GDPR compliant by default)
• Lightweight script (~1KB)
• Real-time analytics
• Simple, focused metrics
• No personal data collection

Umami Analytics

Open-source, self-hosted analytics focused on privacy.

Setup

1. Deploy Umami (see umami.is)
2. Create a website in Umami dashboard
3. Get your Website ID
4. Update your config:

umami: {
  enabled: true,
  websiteId: 'your-website-id',
  scriptSrc: 'https://analytics.yourdomain.com/script.js',
}

Features

• Self-hosted (complete data ownership)
• No cookies by default
• GDPR compliant
• Real-time data
• Custom events tracking

Custom Event Tracking

Google Analytics Events

Track custom events in your components:

// Track a button click
const trackClick = () => {
  if (window.gtag) {
    window.gtag('event', 'click', {
      event_category: 'engagement',
      event_label: 'header_cta',
      value: 1
    });
  }
};

// Track a conversion
const trackPurchase = (value: number) => {
  if (window.gtag) {
    window.gtag('event', 'purchase', {
      value: value,
      currency: 'USD',
      transaction_id: '12345',
    });
  }
};

Plausible Events

Track custom goals:

// Track a goal
const trackGoal = () => {
  if (window.plausible) {
    window.plausible('Signup');
  }
};

// Track with properties
const trackWithProps = () => {
  if (window.plausible) {
    window.plausible('Download', {
      props: { 
        version: '1.0.0',
        type: 'macos'
      }
    });
  }
};

Umami Events

Track custom events:

// Track an event
const trackUmamiEvent = () => {
  if (window.umami) {
    window.umami.track('button-click', {
      type: 'cta',
      location: 'header'
    });
  }
};

Privacy Considerations

GDPR Compliance

• Plausible & Umami: GDPR compliant by default (no cookies, no PII)
• Google Analytics: Requires cookie consent banner
• Google Tag Manager: Depends on tags used

Cookie Consent

For Google Analytics/GTM, consider implementing a consent banner:

// Example consent check before enabling analytics
const hasConsent = localStorage.getItem('analytics-consent') === 'true';

if (hasConsent) {
  // Enable analytics in config or conditionally load
}

Anonymize IP Addresses

Google Analytics automatically anonymizes IPs in GA4. For additional privacy:

gtag('config', 'G-XXXXXXXXXX', {
  anonymize_ip: true,
  cookie_flags: 'SameSite=None;Secure'
});

Development vs Production

Analytics are automatically disabled in development when using:

• Plausible (ignores localhost by default)
• Umami (can be configured to ignore localhost)

For Google Analytics, you might want to disable in development:

// In your Analytics component
const isDevelopment = process.env.NODE_ENV === 'development';

if (isDevelopment) {
  console.log('Analytics disabled in development');
  return null;
}

Performance Tips

1. Loading Strategy: All scripts use afterInteractive strategy for optimal performance
2. Single Provider: Use only one analytics provider to minimize impact
3. Lazy Loading: Consider loading analytics after user interaction for better Core Web Vitals

Troubleshooting

Analytics Not Showing

1. Check if analytics is enabled in config.ts
2. Verify the ID/domain is correct
3. Check browser console for errors
4. Disable ad blockers (they often block analytics)
5. Wait 24-48 hours for data to appear (Google Analytics)

Multiple Analytics Loading

The Analytics component only loads one provider at a time. If multiple are enabled, priority order is:

1. Google Analytics
2. Google Tag Manager
3. Plausible
4. Umami

TypeScript Errors

If you get TypeScript errors for window.gtag etc., the types are already declared in the Analytics component.

Best Practices

1. Start Simple: Begin with one analytics provider
2. Privacy First: Consider Plausible or Umami for privacy-conscious users
3. Test Thoroughly: Use browser developer tools to verify scripts are loading
4. Document Events: Keep a list of custom events you’re tracking
5. Regular Reviews: Review analytics data monthly to gain insights

Migration Guide

From Universal Analytics to GA4

1. Create a new GA4 property
2. Get the new Measurement ID (G-XXXXXXXXXX)
3. Update config.ts with the new ID
4. Remove any old analytics code

From Client-Side to Server-Side

For server-side tracking, consider:

• Google Analytics Measurement Protocol
• Plausible Events API
• Umami API

Additional Resources

• Google Analytics 4 Documentation
• Google Tag Manager Help
• Plausible Documentation
• Umami Documentation