mcpField
U
using-analytics

using-analytics

github.com/andrelandgraf营销与增长2397 次安装20 周前更新
代码仓库

关于 using-analytics

using-analytics 是一项使用 Vercel Web Analytics 跟踪自定义事件和转化的技能，涵盖事件示例、表单跟踪、开发测试及查看分析数据的方式。

主要功能

  1. 01跟踪自定义事件和转化
  2. 02演示在组件中跟踪事件
  3. 03涵盖表单提交跟踪
  4. 04说明开发环境中的测试
  5. 05介绍在 Vercel 控制台查看分析数据

适用场景

  1. 01跟踪注册和登录操作
  2. 02衡量功能使用情况与转化
  3. 03记录联系表单提交
  4. 04在开发期间测试分析功能

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/andrelandgraf/fullstackrecipes --skill using-analytics

安装后在 Claude Code 中输入/using-analytics确认已加载。

详细介绍

使用分析

使用 Vercel Web Analytics 跟踪自定义事件和转化。涵盖常见事件、表单跟踪和开发测试。

实现使用分析

使用 Vercel Web Analytics 跟踪自定义事件和转化。涵盖常见事件、表单跟踪和开发测试。

参见：

跟踪自定义事件

跟踪用户操作和转化：

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

// Basic event
track("signup_clicked");

// Event with properties
track("purchase_completed", {
  plan: "pro",
  price: 29,
  currency: "USD",
});
要跟踪的常见事件

跟踪有意义的用户操作：

// 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" });
在组件中跟踪
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>;
}
跟踪表单提交
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>;
}
在开发环境中测试

默认情况下，分析数据仅在生产环境中发送。如需在开发环境中测试：

// In layout.tsx
<Analytics mode="development" />

// Or just log to console
<Analytics debug />
查看分析数据

在 Vercel 控制面板中查看分析数据：

  1. 前往 Vercel 控制面板中的项目
  2. 点击侧边栏中的“Analytics”
  3. 查看页面浏览量、访客数和自定义事件

参考资料

评论

支持 Markdown