统计分析

MkSaaS 支持多种统计分析工具来跟踪网站流量和用户行为。这种灵活的方法允许您选择最适合您需求、隐私要求和预算的统计分析服务。

统计分析系统架构

MkSaaS 中的统计分析系统设计有以下组件：

analytics.tsx

google-analytics.tsx

umami-analytics.tsx

plausible-analytics.tsx

ahrefs-analytics.tsx

open-panel-analytics.tsx

data-fast-analytics.tsx

seline-analytics.tsx

vercel-analytics.tsx

speed-insights.tsx

这种模块化结构使得启用或禁用特定统计分析服务变得容易，并且可以根据需要添加新的服务。

设置

MkSaaS 预配置了对几个流行统计分析服务的支持：

Vercel Analytics

Vercel Analytics 提供对您网站访问者的详细统计分析，而不会损害用户隐私。

在您的 Vercel 项目中启用 Web Analytics：
- 进入到 Vercel 仪表盘并选择您的项目
- 导航到 Analytics 选项卡
- 在 Web Analytics 部分点击 Enable
你不需要环境变量，只需要在网站配置中开启 Vercel Analytics 即可：

src/config/website.tsx

analytics: {
  enableVercelAnalytics: true,
}

如果您不想使用 Vercel Analytics，可以在网站配置中禁用它：

src/config/website.tsx

analytics: {
  enableVercelAnalytics: false,
}

Vercel Analytics 使用官方 @vercel/analytics 包实现。

Vercel Speed Insights

Speed Insights 通过测量核心 Web 指标和用户交互来帮助您监控和改善网站性能。

在您的 Vercel 项目中启用 Speed Insights：
- 进入到 Vercel 仪表盘并选择您的项目
- 导航到 Analytics 选项卡
- 在 Speed Insights 部分点击 Enable
你不需要环境变量，只需要在网站配置中开启 Speed Insights 即可：

src/config/website.tsx

analytics: {
  enableSpeedInsights: true,
}

如果您不想使用 Speed Insights，可以在网站配置中禁用它：

src/config/website.tsx

analytics: {
  enableSpeedInsights: false,
}

Speed Insights 使用官方 @vercel/speed-insights 包实现。

Google

Google Analytics 是一个广泛使用的统计分析服务，提供全面的网站跟踪和统计分析功能。

在 analytics.google.com 创建 Google Analytics 账户
添加新网站，并获取您的测量 ID（以"G-"开头）
添加以下环境变量：

.env

NEXT_PUBLIC_GOOGLE_ANALYTICS_ID="G-XXXXXXXXXX"

Google Analytics 使用官方 @next/third-parties Next.js 包集成。

Umami

Umami 是 Google Analytics 的替代方案，它提供基本的网站统计分析信息，而不会损害访问者隐私。

在 umami.is 创建 Umami 账户或设置您自己的 Umami 实例
在您的 Umami 仪表盘中创建新网站
获取您的网站 ID 和脚本 URL
添加以下环境变量：

.env

NEXT_PUBLIC_UMAMI_WEBSITE_ID="your-website-id"
NEXT_PUBLIC_UMAMI_SCRIPT="https://cloud.umami.is/script.js"

对于自托管的 Umami 实例，使用您的自定义脚本 URL 而不是默认的。

Plausible

Plausible 是一个轻量级、开源且注重隐私的统计分析工具，不需要依赖 Cookie。

在 plausible.io 创建 Plausible 账户或设置您自己的 Plausible 实例
添加您的网站
获取您的域名
添加以下环境变量：

.env

NEXT_PUBLIC_PLAUSIBLE_DOMAIN="yourdomain.com"
NEXT_PUBLIC_PLAUSIBLE_SCRIPT="https://plausible.io/js/script.js"

对于自托管的 Plausible 实例，使用您的自定义脚本 URL 而不是默认的。

Ahrefs

Ahrefs 是一个强大的 SEO 工具，提供对您网站流量和反向链接的详细洞察。

在 ahrefs.com 创建 Ahrefs 账户
在您的 Ahrefs 仪表盘中创建新网站
从 Web Analytics 获取您的网站 ID
添加以下环境变量：

.env

NEXT_PUBLIC_AHREFS_WEBSITE_ID="your-website-id"

OpenPanel

OpenPanel 是一个开源产品统计分析平台，专为跟踪用户行为而设计。

在 openpanel.dev 创建 OpenPanel 账户
创建新项目
获取您的客户端 ID
添加以下环境变量：

.env

NEXT_PUBLIC_OPENPANEL_CLIENT_ID="your-client-id"

DataFast

DataFast 是一个简单、注重隐私的统计分析工具，专注于流量与收入跟踪。

在 datafa.st 创建 DataFast 账户
添加您的网站
获取您的网站 ID 和域名
添加以下环境变量：

.env

NEXT_PUBLIC_DATAFAST_WEBSITE_ID="your-website-id"
NEXT_PUBLIC_DATAFAST_DOMAIN="yourdomain.com"

如果您想启用 datafast 收入跟踪，您需要在网站配置中启用 enableDatafastRevenueTrack 功能。

src/config/website.tsx

features: {
  enableDatafastRevenueTrack: true,
}

Seline

Seline 是一个专注于订阅业务和转化跟踪的统计分析平台。

在 seline.com 创建 Seline 账户
设置您的项目
获取您的令牌
添加以下环境变量：

.env

NEXT_PUBLIC_SELINE_TOKEN="your-token"

工作原理

MkSaaS 通过 Analytics 组件实现统计分析跟踪，该组件根据环境变量和配置有条件地渲染各个统计分析组件：

src/analytics/analytics.tsx

export function Analytics() {
  if (process.env.NODE_ENV !== 'production') {
    return null;
  }

  return (
    <>
      {/* google analytics */}
      <GoogleAnalytics />

      {/* umami analytics */}
      <UmamiAnalytics />

      {/* plausible analytics */}
      <PlausibleAnalytics />

      {/* ahrefs analytics */}
      <AhrefsAnalytics />

      {/* datafast analytics */}
      <DataFastAnalytics />

      {/* openpanel analytics */}
      <OpenPanelAnalytics />

      {/* seline analytics */}
      <SelineAnalytics />

      {/* vercel analytics */}
      {websiteConfig.analytics.enableVercelAnalytics && (
        <VercelAnalytics />
      )}

      {/* speed insights */}
      {websiteConfig.analytics.enableSpeedInsights && (
        <SpeedInsights />
      )}
    </>
  );
}

每个统计分析组件：

仅在生产模式下有效
仅在设置了所需环境变量或在网站配置中启用时才加载
以最小开销实现

这意味着您可以同时启用多个统计分析服务，或者只使用一个符合您需求的服务。

自定义

添加自定义统计分析

您可以通过以下步骤添加对其他统计分析服务的支持：

在 src/analytics 目录中创建新文件（例如，my-analytics.tsx）
实现您的分析组件
将其添加到 Analytics 组件中

以下是添加自定义统计分析服务的示例：

src/analytics/my-analytics.tsx

'use client';

import Script from 'next/script';

/**
 * My Custom Analytics
 *
 * https://example.com
 */
export function MyAnalytics() {
  if (process.env.NODE_ENV !== 'production') {
    return null;
  }

  const apiKey = process.env.NEXT_PUBLIC_MY_ANALYTICS_API_KEY;
  if (!apiKey) {
    return null;
  }

  return (
    <Script
      strategy="afterInteractive"
      src="https://example.com/analytics.js"
      data-api-key={apiKey}
    />
  );
}

然后，更新 Analytics 组件以包含您的新服务：

src/analytics/analytics.tsx

import { MyAnalytics } from './my-analytics';

export function Analytics() {
  // ...existing code

  return (
    <>
      {/* existing analytics components */}

      {/* your custom analytics */}
      <MyAnalytics />
    </>
  );
}

最后，添加必要的环境变量：

.env

NEXT_PUBLIC_MY_ANALYTICS_API_KEY="your-api-key"

最佳实践

考虑隐私法规：选择符合 GDPR 和 CCPA 等隐私法规的统计分析工具
实施 Cookie 同意：如果您的统计分析解决方案使用 Cookie，请实施适当的 Cookie 同意机制
为不同目的使用多种工具：考虑将 Plausible 或 Vercel Analytics 等注重隐私的工具与更全面的工具结合使用，以进行基本指标和详细统计分析
保持环境变量安全：永远不要将您的 API 密钥提交到版本控制，请使用环境变量进行密钥管理
在开发中测试：虽然统计分析组件仅在生产中有效，但本地开发时也应测试它们是否正确加载
最小化性能影响：为脚本使用适当的加载策略（afterInteractive 或 lazyOnload）以最小化对页面性能影响

视频教程

下一步

现在您了解了如何为您的 MkSaaS 网站设置统计分析，您可能想要探索这些相关功能：

电子邮件

设置和使用电子邮件功能

邮件订阅

设置邮件列表订阅

支付

配置网站的支付功能

数据库

配置数据库

电子邮件

邮件订阅

支付

数据库

目录