mcpField
A
analytics-best-practices

analytics-best-practices

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

关于 analytics-best-practices

面向开发者的 Vercel Web Analytics 配方，用于记录自定义事件和转化。内容介绍如何在客户端代码和组件中追踪事件，以及如何在开发期间测试追踪。

主要功能

  1. 01追踪命名的自定义事件
  2. 02为事件附加属性
  3. 03在组件中追踪事件
  4. 04启用开发环境测试
  5. 05在 Vercel 中查看分析数据

适用场景

  1. 01衡量注册和购买转化
  2. 02记录功能使用事件
  3. 03在本地测试事件追踪

安装

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

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

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

详细介绍

分析最佳实践

使用 Vercel Web Analytics 跟踪自定义事件和转化。

前提条件

请先完成以下设置指南：

  • Vercel Web Analytics
跟踪事件

在客户端代码中调用 track(name) 或 track(name, properties)。

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

track("signup_clicked");

track("purchase_completed", { plan: "pro", price: 29, currency: "USD" });

围绕身份验证、功能使用和转化，以一致的方式为事件命名。

track("signup_completed", { method: "email" });
track("chat_completed", { messageCount: 5 });
track("subscription_created", { plan: "pro" });
track("upgrade_completed", { from: "free", to: "pro" });
在组件中

在事件处理函数中跟踪事件。

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

function UpgradeButton() {
  return (
    <button
      onClick={() => track("upgrade_button_clicked", { location: "header" })}
    >
      Upgrade
    </button>
  );
}

function ContactForm() {
  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    track("contact_form_submitted", { source: "footer" });
    // submit...
  };

  return <form onSubmit={handleSubmit}>...</form>;
}
在开发环境中测试

默认情况下，事件仅在生产环境中发送。在 layout.tsx 的 <Analytics /> 组件上启用本地发送。

<Analytics mode="development" />  // sends events
<Analytics debug />               // logs events to console

在 Vercel 控制面板的 Analytics 中查看页面浏览量、访客数和自定义事件。

参考资料

评论

支持 Markdown