统计分析
学习如何在MkSaaS 模板中设置和使用各种统计分析工具
MkSaaS 支持多种统计分析工具来跟踪网站流量和用户行为。
设置
Vercel Analytics
Vercel Analytics 提供对您网站访问者的详细统计分析,而不会损害用户隐私。
- 在 Vercel 项目仪表盘 >
Analytics选项卡 >Web Analytics部分启用 - 在网站配置中开启:
analytics: {
enableVercelAnalytics: true,
}Vercel Speed Insights
Speed Insights 帮助您监控和改善网站性能。
- 在 Vercel 项目仪表盘 >
Analytics选项卡 >Speed Insights部分启用 - 在网站配置中开启:
analytics: {
enableSpeedInsights: true,
}Google Analytics 提供全面的网站跟踪和统计分析功能。
- 创建 Google Analytics 账户并添加新网站
- 获取测量 ID(以"G-"开头)
- 添加环境变量:
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID="G-XXXXXXXXXX"Umami
Umami 是 Google Analytics 的注重隐私的替代方案。
- 在 umami.is 创建账户或自行部署
- 创建新网站并获取网站 ID 和脚本 URL
- 添加环境变量:
NEXT_PUBLIC_UMAMI_WEBSITE_ID="YOUR-WEBSITE-ID"
NEXT_PUBLIC_UMAMI_SCRIPT="https://cloud.umami.is/script.js"对于自托管的 Umami 实例,使用您的自定义脚本 URL 而不是默认的。
Plausible
Plausible 是一个轻量级、开源且注重隐私的统计分析工具。
- 在 plausible.io 创建账户或自行部署
- 添加网站并获取域名
- 添加环境变量:
NEXT_PUBLIC_PLAUSIBLE_DOMAIN="YOUR-DOMAIN"
NEXT_PUBLIC_PLAUSIBLE_SCRIPT="https://plausible.io/js/script.js"对于自托管的 Plausible 实例,使用您的自定义脚本 URL 而不是默认的。
PostHog
PostHog 提供对网站流量和用户行为的详细洞察。
- 创建 PostHog 账户和新项目
- 获取项目 API 密钥和服务器域名
- 添加环境变量:
NEXT_PUBLIC_POSTHOG_KEY="YOUR-PROJECT-KEY"
NEXT_PUBLIC_POSTHOG_HOST="YOUR-HOST"Ahrefs
Ahrefs 提供对网站流量和反向链接的详细洞察。
- 创建 Ahrefs 账户和新网站
- 从 Web Analytics 获取网站 ID
- 添加环境变量:
NEXT_PUBLIC_AHREFS_WEBSITE_ID="YOUR-WEBSITE-ID"OpenPanel
OpenPanel 是一个开源产品统计分析平台。
- 创建 OpenPanel 账户和新项目
- 获取客户端 ID
- 添加环境变量:
NEXT_PUBLIC_OPENPANEL_CLIENT_ID="YOUR-CLIENT-ID"DataFast
DataFast 是一个简单、注重隐私的统计分析工具,专注于流量与收入跟踪。
- 创建 DataFast 账户并添加网站
- 获取网站 ID 和域名
- 添加环境变量:
NEXT_PUBLIC_DATAFAST_WEBSITE_ID="YOUR-WEBSITE-ID"
NEXT_PUBLIC_DATAFAST_DOMAIN="YOUR-DOMAIN"要启用 DataFast 收入跟踪,在 src/config/website.tsx 中设置 enableDatafastRevenueTrack: true。
Clarity
Clarity 提供热力图和会话录制来了解用户行为。
- 创建 Clarity 账户和新项目
- 获取项目 ID
- 添加环境变量:
NEXT_PUBLIC_CLARITY_PROJECT_ID="YOUR-PROJECT-ID"Seline
Seline 专注于订阅业务和转化跟踪。
- 创建 Seline 账户并设置项目
- 获取令牌
- 添加环境变量:
NEXT_PUBLIC_SELINE_TOKEN="YOUR-TOKEN"扩展新的统计分析
- 在
src/analytics目录中创建新文件(例如my-analytics.tsx) - 实现分析组件:
'use client';
import Script from 'next/script';
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}
/>
);
}- 将其添加到
src/analytics/analytics.tsx中的Analytics组件:
import { MyAnalytics } from './my-analytics';
export function Analytics() {
// ...existing code
return (
<>
{/* existing analytics components */}
<MyAnalytics />
</>
);
}- 添加环境变量:
NEXT_PUBLIC_MY_ANALYTICS_API_KEY="YOUR-API-KEY"
MkSaaS文档