分析配置

NEXTDEVKIT 提供了一个全面的分析配置系统，支持多个分析提供商和Cookie同意管理。分析配置位于 src/config/analytics.ts。

🔧 分析结构

分析系统支持多个提供商，具有基于环境的配置和同意管理：

src/config/analytics.ts

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 初始化
    },
  },
  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 初始化
    },
  },
  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 初始化
    },
  },
};

📋 分析类型

AnalyticsProvider 接口

export interface AnalyticsProvider {
  enabled: boolean;
  label: string;
  config: Record<string, any>;
  onAccept?: () => void;
}

属性	类型	描述
`enabled`	`boolean`	是否启用分析提供商
`label`	`string`	分析提供商的显示名称
`config`	`Record<string, any>`	提供商特定的配置
`onAccept`	`() => void` (可选)	用户接受Cookie时执行的函数

AnalyticsConfig 接口

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

🔧 环境变量

配置以下环境变量以启用分析提供商：

# 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

🔧 分析结构

📋 分析类型

AnalyticsProvider 接口

AnalyticsConfig 接口

🔧 环境变量

On this page