Umami 分析スキル

Umami

概要

Umamiはプライバシー重視のWeb分析プラットフォームです。クッキーや個人データを収集せずに、ページビュー、訪問者、カスタムイベントを追跡します。デフォルトでGDPR/CCPAに準拠しているため、同意バナーは不要です。自身のインフラにセルフホストするか、Umami Cloudをご利用いただけます。クリーンなダッシュボード、リアルタイム統計、プログラムによるアクセス用のAPIを提供します。Google Analyticsに代わる、オープンソースの第一候補です。

使用するタイミング

• クッキー同意バナーなしでウェブサイト分析が必要な場合
• GDPR/CCPAへの準拠が必須の場合
• 分析データをGoogleに預けたくない場合
• 自身のインフラで分析をセルフホストしたい場合
• GA4の複雑さを避け、シンプルでクリーンな分析を求める場合
• ダッシュボードやレポート作成のために分析データへAPIアクセスしたい場合

手順

セルフホストのセットアップ

# Docker Compose
https://github.com/umami-software/umami.git をクローン
cd umami
docker compose up -d

# または Vercel/Netlify/Railway にワンクリックデプロイ
# 参照: https://umami.is/docs/install

トラッキングスクリプトの追加

<!-- サイトの <head> に追加 -->
<script
  defer
  src="https://analytics.mysite.com/script.js"
  data-website-id="your-website-id"
></script>

// Next.js — app/layout.tsx
import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          defer
          src="https://analytics.mysite.com/script.js"
          data-website-id="your-website-id"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

カスタムイベントの追跡

// カスタムイベントの追跡
// Umami はグローバルオブジェクト `umami` を公開します

// ボタンクリックの追跡
document.getElementById("signup-btn")?.addEventListener("click", () => {
  umami.track("signup-click", { plan: "pro", source: "header" });
});

// フォーム送信の追跡
function handleSubmit(formData: FormData) {
  umami.track("form-submit", {
    form: "contact",
    subject: formData.get("subject"),
  });
}

// React での追跡
function PricingCard({ plan }: { plan: string }) {
  return (
    <button
      onClick={() => umami.track("pricing-click", { plan })}
      data-umami-event="pricing-click"
      data-umami-event-plan={plan}
    >
      {plan} を選択
    </button>
  );
}

API アクセス

// api/analytics.ts — プログラムで分析データを取得
const UMAMI_URL = "https://analytics.mysite.com";
const UMAMI_TOKEN = process.env.UMAMI_API_TOKEN;

async function getPageViews(websiteId: string, days = 30) {
  const endDate = Date.now();
  const startDate = endDate - days * 24 * 60 * 60 * 1000;

  const res = await fetch(
    `${UMAMI_URL}/api/websites/${websiteId}/pageviews?startAt=${startDate}&endAt=${endDate}&unit=day`,
    { headers: { Authorization: `Bearer ${UMAMI_TOKEN}` } }
  );
  return res.json();
}

async function getTopPages(websiteId: string) {
  const endDate = Date.now();
  const startDate = endDate - 7 * 24 * 60 * 60 * 1000;

  const res = await fetch(
    `${UMAMI_URL}/api/websites/${websiteId}/metrics?startAt=${startDate}&endAt=${endDate}&type=url`,
    { headers: { Authorization: `Bearer ${UMAMI_TOKEN}` } }
  );
  return res.json();  // [{ x: "/pricing", y: 1234 }, ...]
}

例

例1: SaaSにプライバシーに配慮した分析を追加

ユーザープロンプト: 「クッキーや同意バナーなしで、SaaSに分析機能を追加してください。」

エージェントはUmamiをデプロイし、トラッキングスクリプトを追加し、主要なアクション（サインアップ、アップグレード、機能利用）のカスタムイベントを設定し、内部ダッシュボード用のAPI統合を作成します。

例2: カスタム分析ダッシュボードの構築

ユーザープロンプト: 「マーケティングチーム向けのカスタムダッシュボードにUmamiのデータを取り込んでください。」

エージェントはUmami APIを使用してページビュー、トップページ、リファラー、イベントを取得し、Reactダッシュボードに表示します。

ガイドライン

• クッキーなし = 同意バナー不要 — デフォルトでGDPR準拠
• data-umami-event 属性 — JavaScriptなしでクリックを追跡
• カスタムイベントには umami.track(name, data) — 柔軟なイベント追跡
• 完全制御のためにセルフホスト — Docker、Vercel、Railway、または任意のNode.jsホスト
• プログラムアクセス用API — カスタムダッシュボードとレポートの構築
• マルチサイト対応 — 1つのUmamiインスタンスで複数のウェブサイトを追跡
• リアルタイムダッシュボード — 現在のアクティブな訪問者を確認
• UTMトラッキング — キャンペーンアトリビューションが自動的に機能
• 軽量スクリプト — 2KB未満、サイトの速度に影響を与えません
• PostgreSQL または MySQL — バックエンドデータベースを選択可能