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. 05Vercel での分析データ確認

活用シーン

  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 対応