Back to Details

using-analytics

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Working with Analytics

运用Vercel Web Analytics

Track custom events and conversions with Vercel Web Analytics. Covers common events, form tracking, and development testing.
使用Vercel Web Analytics追踪自定义事件与转化，涵盖常见事件、表单追踪及开发测试。

Implement Working with Analytics

实现Vercel Web Analytics事件追踪

Track custom events and conversions with Vercel Web Analytics. Covers common events, form tracking, and development testing.
See:
使用Vercel Web Analytics追踪自定义事件与转化，涵盖常见事件、表单追踪及开发测试。
参考：

Tracking Custom Events

追踪自定义事件

Track user actions and conversions:
typescript
import { track } from "@vercel/analytics";

// Basic event
track("signup_clicked");

// Event with properties
track("purchase_completed", {
  plan: "pro",
  price: 29,
  currency: "USD",
});
追踪用户行为与转化：
typescript
import { track } from "@vercel/analytics";

// 基础事件
track("signup_clicked");

// 带属性的事件
track("purchase_completed", {
  plan: "pro",
  price: 29,
  currency: "USD",
});

Common Events to Track

可追踪的常见事件

Track meaningful user actions:
typescript
// Authentication
track("signup_completed", { method: "email" });
track("signin_completed", { method: "google" });

// Feature usage
track("chat_started");
track("chat_completed", { messageCount: 5 });
track("file_uploaded", { type: "pdf", size: 1024 });

// Conversions
track("trial_started");
track("subscription_created", { plan: "pro" });
track("upgrade_completed", { from: "free", to: "pro" });
追踪有意义的用户行为：
typescript
// 认证相关
track("signup_completed", { method: "email" });
track("signin_completed", { method: "google" });

// 功能使用
track("chat_started");
track("chat_completed", { messageCount: 5 });
track("file_uploaded", { type: "pdf", size: 1024 });

// 转化事件
track("trial_started");
track("subscription_created", { plan: "pro" });
track("upgrade_completed", { from: "free", to: "pro" });

Tracking in Components

在组件中实现追踪

tsx
import { track } from "@vercel/analytics";

function UpgradeButton() {
  const handleClick = () => {
    track("upgrade_button_clicked", { location: "header" });
    // Navigate to upgrade page...
  };

  return <button onClick={handleClick}>Upgrade</button>;
}
tsx
import { track } from "@vercel/analytics";

function UpgradeButton() {
  const handleClick = () => {
    track("upgrade_button_clicked", { location: "header" });
    // 跳转到升级页面...
  };

  return <button onClick={handleClick}>Upgrade</button>;
}

Tracking Form Submissions

追踪表单提交

tsx
import { track } from "@vercel/analytics";

function ContactForm() {
  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();

    track("contact_form_submitted", { source: "footer" });

    // Submit form...
  };

  return <form onSubmit={handleSubmit}>...</form>;
}
tsx
import { track } from "@vercel/analytics";

function ContactForm() {
  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();

    track("contact_form_submitted", { source: "footer" });

    // 提交表单...
  };

  return <form onSubmit={handleSubmit}>...</form>;
}

Testing in Development

开发环境测试

Analytics only send in production by default. For development testing:
tsx
// In layout.tsx
<Analytics mode="development" />

// Or just log to console
<Analytics debug />
默认情况下，Analytics仅在生产环境中发送数据。若要在开发环境中测试：
tsx
// 在layout.tsx中
<Analytics mode="development" />

// 或仅在控制台打印日志
<Analytics debug />

Viewing Analytics

查看分析数据

View analytics in the Vercel dashboard:
  1. Go to your project in Vercel Dashboard
  2. Click "Analytics" in the sidebar
  3. View page views, visitors, and custom events
在Vercel控制台中查看分析数据：
  1. 前往Vercel Dashboard中的你的项目
  2. 点击侧边栏中的“Analytics”选项
  3. 查看页面浏览量、访客数及自定义事件

References

参考资料