はじめに
サイトにGoogle Analyticsを入れたら、次に待っているのはクッキー同意バナーの実装です。GDPRやCCPAへの対応、Cookieポリシーの文言調整、同意管理ツールの選定……アクセス数を知りたいだけなのに、やることがどんどん増えていきます。
Umamiは、この悩みを根本から解決するオープンソースのアクセス解析ツールです。クッキーを使わず、個人を特定できる情報も収集しないため、同意バナーなしでページビューやイベントを計測できます。自分のサーバーにセルフホストできるので、データの保管場所も自分でコントロールできます。
Umamiとは
Umamiは、Google AnalyticsやMixpanel、Amplitudeの代替として作られたプライバシー重視のアクセス解析プラットフォームです。MITライセンスのオープンソースソフトウェアで、セルフホストでもUmami Cloudでも利用できます。
トラッキング対象のページに1行の<script>タグを埋め込むだけで、ページビュー・参照元・デバイス情報・カスタムイベントなどを収集し、管理画面のダッシュボードでリアルタイムに確認できます。
主な特徴
- クッキー不使用・プライバシー重視 - Cookieを発行せず、IPアドレスなど個人を特定できる情報も保存しないため、多くの地域で同意バナーなしで運用できます
- セルフホスト可能 - 自分のインフラ上にデータを置けるので、外部SaaSにアクセスログを渡したくないケースに向いています
- 軽量なトラッキングスクリプト - 埋め込むスクリプトはシンプルで、ページの表示速度への影響を抑えています
- カスタムイベント計測 -
window.umami.track()でクリックやフォーム送信など、ページビュー以外の行動も記録できます - リアルタイムダッシュボード - 訪問者数、参照元、UTMキャンペーン、デバイス・ブラウザ内訳などをリアルタイムで確認できます
インストール
Umamiのセルフホストには、Node.js 18.18以上とPostgreSQL（またはMySQL）が必要です。もっとも手軽なのはDocker Composeを使う方法です。
git clone https://github.com/umami-software/umami.git
cd umami
docker compose up -d
これだけでhttp://localhost:3000にダッシュボードが立ち上がり、初期アカウント（ユーザー名: admin / パスワード: umami）でログインできます。
ソースからビルドする場合は、.envにDATABASE_URLを設定してから以下を実行します。
pnpm install
pnpm run build
pnpm run start
基本的な使い方
Umamiのダッシュボードでサイトを登録すると、専用のwebsite-idが発行されます。これを埋め込んだトラッキングスクリプトを、計測したいページの<head>に追加するだけで計測が始まります。
<script
defer
src="https://your-umami-instance.example.com/script.js"
data-website-id="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
></script>
デフォルトでは、このスクリプトが読み込まれた時点で自動的にページビューが送信されます。SPAでもルーティングの変化を検知して、追加のイベントリスナー登録なしでページビューを計測してくれます。
なお、Umamiはブラウザ単体では完結せず、送信先となる自分のUmamiサーバー（ダッシュボード）が必須です。本記事では実際に手元で動かせる埋め込みサンプルの代わりに、実際の設定コードを紹介します。
実践的なユースケース
カスタムイベントの計測
ページビューだけでなく、資料請求ボタンのクリックや動画の再生開始など、任意のユーザー行動をイベントとして記録したい場面は多くあります。Umamiはwindow.umami.track()を呼び出すだけで、任意の名前とデータを持つカスタムイベントを送信できます。
<button onclick="umami.track('signup-button-click')">
無料で始める
</button>
<script>
// イベント名だけでなく、追加データも一緒に送れる
umami.track('purchase', {
plan: 'pro',
price: 1980,
})
</script>
data-website-idを持つトラッキングスクリプトが読み込まれていれば、umamiはグローバルオブジェクトとして利用できます。ボタンのIDやフォーム名をtrack()の第一引数に渡すだけで、ダッシュボードの「Events」タブに集計結果が表示されます。
data-before-sendによる送信前フィルタリング
計測対象から特定のURLパラメータを除外したい、社内アクセスを除外したいといった場合は、data-before-send属性でコールバック関数を指定します。
<script
defer
src="https://your-umami-instance.example.com/script.js"
data-website-id="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
data-before-send="filterPayload"
></script>
<script>
function filterPayload(type, payload) {
// 社内IPからのアクセスは送信しない
if (payload.url.includes('preview=true')) {
return false
}
return payload
}
</script>
typeにはイベント種別、payloadには送信予定のデータが渡ってきます。falseを返せば送信自体をキャンセルでき、オブジェクトを返せばその内容で送信を続行できます。プレビュー環境の除外やURLの正規化など、送信直前のデータ加工に使えます。
サーバーサイドからのイベント送信（@umami/node）
バックエンドで発生した処理（決済完了、Webhook受信など）をUmamiに記録したい場合は、公式のNode.js SDKである@umami/nodeが使えます。
npm install @umami/node
import { Umami } from '@umami/node'
const umami = new Umami({
websiteId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
apiEndpoint: 'https://your-umami-instance.example.com/api/send',
})
// 決済完了処理の後などに呼び出す
await umami.track('checkout-completed', { amount: 4980 })
ブラウザからのイベントとサーバーからのイベントを同じダッシュボードに集約できるので、フロントエンドの操作とバックエンドの処理をまたいだファネル分析がしやすくなります。
まとめ
Umamiは、クッキー同意バナーの実装や外部SaaSへのデータ委託に悩んでいたチームにとって、有力な選択肢になるアクセス解析ツールです。セルフホストであればデータの主権を自分たちで持てますし、track()によるカスタムイベント計測や@umami/nodeによるサーバーサイド連携まで、実用に足る機能がそろっています。
まずはDocker Composeでダッシュボードを立ち上げ、自分のサイトに1行のスクリプトタグを追加するところから試してみてください。