数据分析

# 1. 启用 Vercel Analytics (免费且零配置)
npm i @vercel/analytics
echo 'NEXT_PUBLIC_VERCEL_ANALYTICS=true' >> .env.local

# 2. 添加到应用中
# 代码会自动包含，重启即生效

# 3. 查看数据
# Vercel 控制台 > Analytics 面板

// 一套代码，多个提供商
trackEvent('user_signup', { plan: 'pro' })

// 自动发送到：Vercel + Google Analytics + Mixpanel

// 1. 页面访问自动追踪（无需代码）
// 用户访问 /pricing → 自动记录

// 2. 关键事件手动追踪
import { useAnalytics } from '@analytics'

function SignupButton() {
  const { trackEvent } = useAnalytics()
  
  return (
    <button onClick={() => {
      trackEvent('signup_clicked', { 
        source: 'pricing_page',
        plan: 'pro' 
      })
    }}>
      注册账号
    </button>
  )
}

# 安装依赖
bun add @vercel/analytics

# 启用环境变量
echo 'NEXT_PUBLIC_VERCEL_ANALYTICS=true' >> .env.local

# 1. 获取 GA 追踪 ID
# 访问 https://analytics.google.com
# 创建属性 > 获取 GA4 追踪 ID

# 2. 配置环境变量
echo 'NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX' >> .env.local

# 3. 启用 GA 提供商
# src/modules/analytics/index.ts
export * from './provider/google'

// 用户行为事件
trackEvent('user_signup', { method: 'email' })
trackEvent('user_login', { method: 'google' })
trackEvent('plan_selected', { plan: 'pro', price: 29 })
trackEvent('payment_completed', { amount: 29, currency: 'USD' })

// 产品使用事件  
trackEvent('ai_chat_started', { model: 'gpt-4' })
trackEvent('document_created', { type: 'blog_post' })
trackEvent('feature_used', { feature: 'export_pdf' })

// app/(app)/auth/signup/page.tsx
const handleSignup = async () => {
  await signup(email, password)
  
  // 追踪注册成功
  trackEvent('user_signup', {
    method: 'email',
    source: router.query.utm_source || 'direct'
  })
}

✅ 优势：零配置、性能监控、免费
✅ 适合：所有项目的基础分析
❌ 限制：事件追踪功能有限

✅ 优势：功能全面、历史对比、免费
✅ 适合：需要详细用户画像分析
❌ 限制：配置复杂、隐私争议

✅ 优势：隐私友好、界面简洁、欧盟合规
✅ 适合：B2B dashboard、欧洲用户
❌ 限制：功能相对简单、需付费

✅ 优势：事件追踪强大、漏斗分析、用户画像
✅ 适合：产品驱动增长、深度分析
❌ 限制：学习成本高、价格较贵

// 流量指标
- 独立访客数 (UV)
- 页面浏览量 (PV)  
- 平均会话时长
- 跳出率

// 转化指标
- 注册转化率 = 注册数 / 访客数
- 付费转化率 = 付费数 / 注册数
- 用户留存率 = 7天后仍活跃 / 新注册

// 产品指标
- 功能使用率 = 使用某功能用户 / 总用户
- 用户生命周期价值 (LTV)
- 客户获取成本 (CAC)

// 创建自定义仪表板
const dashboardMetrics = {
  daily: ['visitors', 'signups', 'revenue'],
  weekly: ['retention_rate', 'feature_adoption'],  
  monthly: ['ltv', 'cac', 'growth_rate']
}

// 追踪注册漏斗
trackEvent('signup_page_viewed')
trackEvent('signup_form_started') 
trackEvent('signup_form_submitted')
trackEvent('signup_completed')

// 分析结果：50% 用户看到表单但不填写
// 解决方案：简化表单，只要邮箱+密码

// 追踪功能使用
trackEvent('feature_clicked', { feature: 'ai_chat' })
trackEvent('feature_used', { feature: 'ai_chat', duration: 120 })

// 分析结果：AI 聊天功能使用率只有 15%
// 解决方案：增加引导教程，改进入口位置

// 追踪付费流程
trackEvent('pricing_page_viewed')
trackEvent('plan_selected', { plan: 'pro' })
trackEvent('checkout_started')
trackEvent('payment_completed')

// 分析结果：90% 选择 Pro 但只有 60% 完成支付
// 解决方案：优化支付页面，增加信任元素

// 登录后关联用户身份
const { trackEvent, identify } = useAnalytics()

useEffect(() => {
  if (user) {
    identify(user.id, {
      email: user.email,
      plan: user.subscription?.plan,
      signupDate: user.createdAt
    })
  }
}, [user])

// 基于分析数据进行 A/B 测试
const variant = user.id % 2 === 0 ? 'A' : 'B'

trackEvent('ab_test_viewed', { 
  test: 'signup_button_color',
  variant 
})

// 丰富的事件上下文
trackEvent('blog_post_read', {
  postId: 'how-to-mvp',
  category: 'tutorial', 
  readTime: 180,
  scrollDepth: 0.8,
  source: 'google',
  device: 'mobile'
})

# 检查追踪代码是否正确加载
# 浏览器开发者工具 > Network > 搜索 analytics

# 确认环境变量配置
echo $NEXT_PUBLIC_GA_ID

# 测试追踪事件
trackEvent('test_event', { timestamp: Date.now() })

// 添加 Cookie 同意横幅
const [cookieConsent, setCookieConsent] = useState(false)

// 只有用户同意后才启用追踪
{cookieConsent && <AnalyticsScript />}

# 使用异步加载
# 分析脚本默认不阻塞页面渲染

# 监控 Core Web Vitals
# Vercel Analytics 自动监控性能指标