LogoNEXTDEVKIT Docs

Analytics Configuration

Configure analytics providers and tracking for your website

NEXTDEVKIT provides a comprehensive analytics configuration system that supports multiple analytics providers with cookie consent management. The analytics configuration is located in src/config/analytics.ts.

🔧 Analytics Structure

The analytics system supports multiple providers with environment-based configuration and consent management:

const analyticsConfig: AnalyticsConfig = {
  google: {
    enabled: !!process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID,
    label: "Google Analytics",
    config: {
      trackingId: process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID,
    },
    onAccept: () => {
      // Google Analytics initialization
    },
  },
  umami: {
    enabled: !!process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID,
    label: "Umami Analytics",
    config: {
      url: process.env.NEXT_PUBLIC_UMAMI_SCRIPT_URL,
      websiteId: process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID,
    },
    onAccept: () => {
      // Umami initialization
    },
  },
  plausible: {
    enabled: !!process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN,
    label: "Plausible Analytics",
    config: {
      domain: process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN,
      src: process.env.NEXT_PUBLIC_PLAUSIBLE_SCRIPT_URL,
    },
    onAccept: () => {
      // Plausible initialization
    },
  },
};

📋 Analytics Types

AnalyticsProvider Interface

export interface AnalyticsProvider {
  enabled: boolean;
  label: string;
  config: Record<string, any>;
  onAccept?: () => void;
}
PropertyTypeDescription
enabledbooleanWhether the analytics provider is enabled
labelstringDisplay name for the analytics provider
configRecord<string, any>Provider-specific configuration
onAccept() => void (optional)Function to execute when user accepts cookies

AnalyticsConfig Interface

export interface AnalyticsConfig {
  google?: AnalyticsProvider;
  umami?: AnalyticsProvider;
  plausible?: AnalyticsProvider;
}

🔧 Environment Variables

Configure the following environment variables to enable analytics providers:

# Google Analytics
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX

# Umami Analytics
NEXT_PUBLIC_UMAMI_WEBSITE_ID=your-website-id
NEXT_PUBLIC_UMAMI_SCRIPT_URL=https://cloud.umami.is/script.js

# Plausible Analytics
NEXT_PUBLIC_PLAUSIBLE_DOMAIN=yourdomain.com
NEXT_PUBLIC_PLAUSIBLE_SCRIPT_URL=https://plausible.io/js/script.js