Analytics Tracking

分析与跟踪技能

为 Next.js 应用提供全面的分析与事件跟踪实现方案。从基础页面浏览量到复杂的转化漏斗，本技能涵盖数据驱动决策所需的一切内容，包括服务商集成、自定义事件系统、A/B 测试和隐私合规。

跟踪用户交互、衡量转化漏斗、开展实验，并深入了解用户行为，从而获得可执行的洞察。集成 Vercel Analytics、PostHog、Mixpanel 和 Google Analytics 等热门分析平台，同时确保符合隐私要求。

核心工作流

工作流 1：Google Analytics 4（GA4）设置

用途： 使用 Google Analytics 实现全面的网站分析

步骤：

1. 安装 @next/third-parties 包
2. 将 GoogleAnalytics 组件添加到布局中
3. 实现自定义事件跟踪
4. 设置转化目标

实现：

// Install
// npm install @next/third-parties

// app/layout.tsx
import { GoogleAnalytics } from '@next/third-parties/google'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <GoogleAnalytics gaId="G-XXXXXXXXXX" />
      </body>
    </html>
  )
}

// Track Events
'use client'

export function TrackableButton() {
  const handleClick = () => {
    window.gtag('event', 'button_click', {
      event_category: 'engagement',
      event_label: 'cta_button',
      value: 1
    })
  }

  return <button onClick={handleClick}>Click Me</button>
}

工作流 2：集成 Vercel Analytics

用途： 为部署到 Vercel 的应用提供零配置分析

步骤：

1. 安装 @vercel/analytics
2. 添加 Analytics 组件
3. 跟踪自定义事件

实现：

// npm install @vercel/analytics

// app/layout.tsx
import { Analytics } from '@vercel/analytics/react'
import { SpeedInsights } from '@vercel/speed-insights/next'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  )
}

// Track Custom Events
import { track } from '@vercel/analytics'

track('Purchase', { amount: 99.99, currency: 'USD' })

工作流 3：PostHog（开源分析）

用途： 借助功能标志和会话回放实现功能齐全的产品分析

步骤：

1. 安装 posthog-js
2. 创建 PostHog 提供程序
3. 实现事件跟踪
4. 设置功能标志

实现：

// lib/posthog.ts
import posthog from 'posthog-js'

export function initPostHog() {
  if (typeof window !== 'undefined') {
    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
      api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://app.posthog.com',
      loaded: (posthog) => {
        if (process.env.NODE_ENV === 'development') posthog.debug()
      }
    })
  }
}

// app/providers.tsx
'use client'
import { useEffect } from 'react'
import { initPostHog } from '@/lib/posthog'

export function Providers({ children }) {
  useEffect(() => {
    initPostHog()
  }, [])

  return <>{children}</>
}

// Track Events
import posthog from 'posthog-js'

posthog.capture('user_signed_up', {
  plan: 'pro',
  source: 'landing_page'
})

工作流 4：自定义分析系统

用途： 构建统一的分析抽象层

实现：

// hooks/use-analytics.ts
'use client'
import { useCallback } from 'react'

type EventProperties = Record<string, any>

export function useAnalytics() {
  const track = useCallback((eventName: string, properties?: EventProperties) => {
    if (typeof window !== 'undefined') {
      // Google Analytics
      window.gtag?.('event', eventName, properties)

      // PostHog
      window.posthog?.capture(eventName, properties)

      // Custom backend
      fetch('/api/analytics/track', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          event: eventName,
          properties,
          timestamp: new Date().toISOString(),
          url: window.location.href,
          referrer: document.referrer,
        })
      }).catch(() => {})
    }
  }, [])

  const identify = useCallback((userId: string, traits?: EventProperties) => {
    if (typeof window !== 'undefined') {
      window.gtag?.('config', 'GA_MEASUREMENT_ID', { user_id: userId })
      window.posthog?.identify(userId, traits)
    }
  }, [])

  const page = useCallback((pageName: string, properties?: EventProperties) => {
    if (typeof window !== 'undefined') {
      window.gtag?.('event', 'page_view', {
        page_title: pageName,
        ...properties
      })
      window.posthog?.capture('$pageview', properties)
    }
  }, [])

  return { track, identify, page }
}

工作流 5：转化漏斗跟踪

用途： 跟踪并分析多步骤转化漏斗

实现：

// lib/funnel.ts
type FunnelStep =
  | 'landing'
  | 'signup'
  | 'onboarding'
  | 'first_action'
  | 'activation'

export class FunnelTracker {
  private steps: FunnelStep[] = []

  trackStep(step: FunnelStep, properties?: Record<string, any>) {
    this.steps.push(step)

    track('Funnel Step Completed', {
      step,
      step_number: this.steps.length,
      funnel_id: 'user_activation',
      ...properties
    })

    // Track drop-off if user hasn't progressed
    setTimeout(() => {
      if (this.steps[this.steps.length - 1] === step) {
        track('Funnel Drop Off', {
          at_step: step,
          steps_completed: this.steps.length
        })
      }
    }, 60000)
  }
}

// Usage
const funnel = new FunnelTracker()
funnel.trackStep('landing')
funnel.trackStep('signup', { method: 'email' })
funnel.trackStep('onboarding', { completed_steps: 3 })

工作流 6：A/B 测试实现

用途： 开展具有统计显著性的受控实验

实现：

// lib/ab-test.ts
'use client'
import { useState, useEffect } from 'react'

type Variant = 'A' | 'B'

export function useABTest(testName: string): Variant {
  const [variant, setVariant] = useState<Variant>('A')

  useEffect(() => {
    const key = `ab_test_${testName}`
    let userVariant = localStorage.getItem(key) as Variant

    if (!userVariant) {
      userVariant = Math.random() > 0.5 ? 'A' : 'B'
      localStorage.setItem(key, userVariant)

      track('AB Test Assigned', {
        test_name: testName,
        variant: userVariant
      })
    }

    setVariant(userVariant)
  }, [testName])

  return variant
}

// Usage
function PricingPage() {
  const variant = useABTest('pricing_layout')

  if (variant === 'A') {
    return <PricingLayoutA />
  }
  return <PricingLayoutB />
}

// Advanced A/B Testing with PostHog
import { useFeatureFlagEnabled } from 'posthog-js/react'

export function PricingPage() {
  const showNewPricing = useFeatureFlagEnabled('new-pricing-layout')

  if (showNewPricing) {
    return <NewPricingLayout />
  }
  return <OldPricingLayout />
}

快速参考

操作	命令/触发语
基本设置	“为我的应用添加分析功能”
跟踪事件	“跟踪 [event name]”
页面浏览量	“跟踪页面浏览量”
转化	“设置转化跟踪”
A/B 测试	“实现 A/B 测试”
功能标志	“添加功能标志”
用户识别	“识别用户”
漏斗分析	“跟踪转化漏斗”

常见跟踪事件

用户身份验证：

track('User Signed Up', { method: 'email' })
track('User Logged In', { method: 'google' })
track('User Logged Out')

用户参与度：

track('Button Clicked', { button_id: 'cta', location: 'hero' })
track('Link Clicked', { url: '/pricing', text: 'See Pricing' })
track('Video Played', { video_id: 'intro', duration: 120 })
track('Form Submitted', { form_id: 'contact', success: true })

电子商务：

track('Product Viewed', { product_id: '123', name: 'Pro Plan' })
track('Product Added to Cart', { product_id: '123', quantity: 1 })
track('Checkout Started', { cart_total: 99.99 })
track('Order Completed', {
  order_id: 'ORD-123',
  total: 99.99,
  items: 3
})

隐私与同意

// components/cookie-consent.tsx
'use client'
import { useState, useEffect } from 'react'

export function CookieConsent() {
  const [showBanner, setShowBanner] = useState(false)

  useEffect(() => {
    const consent = localStorage.getItem('cookie_consent')
    if (!consent) {
      setShowBanner(true)
    } else if (consent === 'accepted') {
      initAnalytics()
    }
  }, [])

  const accept = () => {
    localStorage.setItem('cookie_consent', 'accepted')
    setShowBanner(false)
    initAnalytics()
  }

  const decline = () => {
    localStorage.setItem('cookie_consent', 'declined')
    setShowBanner(false)
  }

  if (!showBanner) return null

  return (
    <div className="fixed bottom-0 left-0 right-0 bg-gray-900 text-white p-4">
      <p>We use cookies to improve your experience.</p>
      <button onClick={accept}>Accept</button>
      <button onClick={decline}>Decline</button>
    </div>
  )
}

最佳实践

• 隐私优先： 尊重用户同意和隐私法规（GDPR、CCPA）
• 命名一致： 事件名称使用 snake_case
• 丰富上下文： 为每个事件附上相关属性
• 用户识别： 关联匿名会话与已验证身份的会话
• 事件分类： 记录事件命名规范
• 抽样： 对高频事件进行抽样
• 测试： 在生产环境部署前于开发环境测试跟踪功能
• 数据质量： 发送事件前进行验证
• 性能： 批量发送事件，避免阻塞主线程
• 文档： 维护事件字典

依赖项

# Vercel Analytics
npm install @vercel/analytics @vercel/speed-insights

# Google Analytics
npm install @next/third-parties

# PostHog
npm install posthog-js

# Mixpanel
npm install mixpanel-browser

错误处理

• 网络故障： 在本地将事件加入队列并重试
• 跟踪器被拦截： 优雅降级，避免影响应用运行
• 无效事件： 发送前验证事件结构
• 速率限制： 实现客户端速率限制
• 缺少用户 ID： 完成身份识别前使用匿名 ID

性能提示

• 对非关键跟踪使用 requestIdleCallback
• 将多个事件合并到单个请求中
• 延迟加载分析脚本
• 对页面卸载事件使用 beacon API
• 避免跟踪每次击键
• 对高频事件进行抽样

何时使用此技能

在以下情况下调用此技能：

• 设置分析跟踪
• 实现转化跟踪
• 创建 A/B 测试
• 跟踪用户行为
• 设置漏斗
• 实现 GDPR 合规
• 调试分析问题
• 优化转化
• 创建分析仪表板
• 跟踪自定义事件