💼 ビジネスコミュニティ

umami

プライバシーを重視したオープンソースのウェブサイト分析ツールUmamiを活用し、Cookieなしでアクセス状況を把握、GDPRにも対応しながら、Google Analyticsの代替として導入やイベント追跡、API利用などを支援するSkill。

📜 元の英語説明(参考)

Track website analytics with Umami — privacy-focused, open-source Google Analytics alternative. Use when someone asks to "track website analytics", "Umami", "privacy-friendly analytics", "self-hosted analytics", "GDPR analytics", "replace Google Analytics", or "website traffic tracking without cookies". Covers setup, event tracking, custom properties, API, and self-hosting.

🇯🇵 日本人クリエイター向け解説

一言でいうと

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o umami.zip https://jpskill.com/download/15510.zip && unzip -o umami.zip && rm umami.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/15510.zip -OutFile "$d\umami.zip"; Expand-Archive "$d\umami.zip" -DestinationPath $d -Force; ri "$d\umami.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して umami.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → umami フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-18
取得日時: 2026-05-18
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Umami

概要

Umami はプライバシーを重視したウェブ解析プラットフォームです。Cookie や個人データの収集なしに、ページビュー、訪問者、カスタムイベントを追跡します。デフォルトで GDPR/CCPA に準拠しており（同意バナーは不要です）。ご自身のインフラストラクチャで自己ホストすることも、Umami Cloud を利用することもできます。クリーンなダッシュボード、リアルタイム統計、プログラムによるアクセス用の API が用意されています。ナンバーワンのオープンソースの Google Analytics の代替手段です。

どのような時に使うか

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

手順

自己ホストのセットアップ

# Docker Compose
git clone 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}
    >
      Choose {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 に追加する

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

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

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

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

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

ガイドライン

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

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Umami

Overview

Umami is a privacy-focused web analytics platform — tracks page views, visitors, and custom events without cookies or personal data collection. GDPR/CCPA compliant by default (no consent banner needed). Self-hostable on your own infrastructure, or use Umami Cloud. Clean dashboard, real-time stats, and an API for programmatic access. The #1 open-source Google Analytics alternative.

When to Use

Need website analytics without cookie consent banners
GDPR/CCPA compliance is mandatory
Don't trust Google with your analytics data
Want to self-host analytics on your infrastructure
Simple, clean analytics without the complexity of GA4
API access to analytics data for dashboards/reporting

Instructions

Self-Host Setup

# Docker Compose
git clone https://github.com/umami-software/umami.git
cd umami
docker compose up -d

# Or one-click deploy to Vercel/Netlify/Railway
# See: https://umami.is/docs/install

Add Tracking Script

<!-- Add to your site's <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>
  );
}

Custom Event Tracking

// Track custom events
// Umami exposes a global `umami` object

// Track button clicks
document.getElementById("signup-btn")?.addEventListener("click", () => {
  umami.track("signup-click", { plan: "pro", source: "header" });
});

// Track form submissions
function handleSubmit(formData: FormData) {
  umami.track("form-submit", {
    form: "contact",
    subject: formData.get("subject"),
  });
}

// Track with React
function PricingCard({ plan }: { plan: string }) {
  return (
    <button
      onClick={() => umami.track("pricing-click", { plan })}
      data-umami-event="pricing-click"
      data-umami-event-plan={plan}
    >
      Choose {plan}
    </button>
  );
}

API Access

// api/analytics.ts — Fetch analytics data programmatically
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 }, ...]
}

Examples

Example 1: Add privacy-friendly analytics to a SaaS

User prompt: "Add analytics to our SaaS without cookies or consent banners."

The agent will deploy Umami, add the tracking script, set up custom events for key actions (signup, upgrade, feature use), and create an API integration for internal dashboards.

Example 2: Build a custom analytics dashboard

User prompt: "Pull our Umami data into a custom dashboard for the marketing team."

The agent will use the Umami API to fetch page views, top pages, referrers, and events, then display them in a React dashboard.

Guidelines

No cookies = no consent banner — GDPR compliant by default
data-umami-event attribute — track clicks without JavaScript
umami.track(name, data) for custom events — flexible event tracking
Self-host for full control — Docker, Vercel, Railway, or any Node.js host
API for programmatic access — build custom dashboards and reports
Multi-site support — one Umami instance tracks multiple websites
Real-time dashboard — see active visitors now
UTM tracking — campaign attribution works automatically
Lightweight script — <2KB, doesn't slow down your site
PostgreSQL or MySQL — your choice for the backend database