using-analytics

アナリティクスを活用する

Vercel Web Analytics を使って、カスタムイベントとコンバージョンを追跡します。一般的なイベント、フォームのトラッキング、開発環境でのテストについて説明します。

アナリティクスを活用する

Vercel Web Analytics を使って、カスタムイベントとコンバージョンを追跡します。一般的なイベント、フォームのトラッキング、開発環境でのテストについて説明します。

参照：

• リソース：Fullstack Recipes の using-analytics
• URL：https://fullstackrecipes.com/recipes/using-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 Dashboard でプロジェクトを開きます
2. サイドバーの「Analytics」をクリックします
3. ページビュー、訪問者数、カスタムイベントを確認します

---

参考資料

• Vercel Web Analytics
• カスタムイベント