Umami入門: エンジニアのためのモダンなウェブ解析ツール

umami-software/umami

Umamiは、Google Analyticsに代わる、プライバシーに配慮したモダンなウェブサイト解析ツールです。ソフトウェアエンジニアの視点から見ると、Umamiは単なるアクセス解析ツール以上の価値を提供します。

Google Analyticsのような既存のツールは、非常に多機能な一方で、データの収集方法やプライバシー保護の観点から問題視されることがあります。特に、GDPR（EU一般データ保護規則）やCCPA（カリフォルニア州消費者プライバシー法）などの法規制が厳格化する中、ユーザーの同意なしにデータを収集することはリスクとなります。

Umamiは、このような課題を解決するために設計されました。シンプルで軽量でありながら、ウェブサイトのトラフィック、ページビュー、参照元といった基本的な指標を、個人を特定する情報を収集せずに正確に追跡できます。

Umamiを導入することで、ソフトウェアエンジニアは以下のようなメリットを享受できます。

プライバシー保護と法令遵守
Umamiは個人を特定する情報を収集しないため、GDPRやCCPAといったプライバシー関連の法令を遵守しやすくなります。開発者は、ユーザーのプライバシーを尊重した設計を最初から組み込むことができます。

シンプルな導入と管理
Dockerを利用して簡単にデプロイでき、複雑な設定は不要です。自己ホスト型なので、データの管理を完全に自分たちで行うことができます。

軽量で高速
Umamiのトラッキングスクリプトは非常に軽量です。ウェブサイトのパフォーマンスを低下させることなく、スムーズに動作します。

APIと拡張性
Umamiは豊富なAPIを提供しており、取得したデータを他のシステムと連携させたり、独自のダッシュボードを構築したりすることが可能です。例えば、サーバーサイドのアプリケーションやモバイルアプリに組み込んで、独自の解析データを取得することもできます。

Umamiは主に自己ホスト型で運用されます。最も簡単な導入方法は、Dockerを利用することです。

まず、docker-compose.yml ファイルを作成します。このファイルには、データベースとUmamiのコンテナを定義します。

docker-compose.yml

version: '3.8'

services:
  umami-db:
    image: postgres:14-alpine
    restart: always
    environment:
      - POSTGRES_USER=umami
      - POSTGRES_PASSWORD=umami
      - POSTGRES_DB=umami
    volumes:
      - ./database:/var/lib/postgresql/data

  umami:
    image: umami/umami:postgresql-latest
    restart: always
    environment:
      - DATABASE_URL=postgresql://umami:umami@umami-db:5432/umami
      - UMAMI_WEBSITE_ID=your_website_id  # 任意のID
    ports:
      - "3000:3000"
    depends_on:
      - umami-db

次に、このファイルを保存したディレクトリで以下のコマンドを実行するだけです。

docker-compose up -d

このコマンドを実行すると、Umamiのコンテナが起動し、http://localhost:3000 でアクセスできるようになります。初期のログイン情報は以下の通りです。

ユーザー名
admin

パスワード
umami

Umamiを導入したウェブサイトにトラッキングコードを追加する方法は非常にシンプルです。

Umamiの管理画面でウェブサイトを登録すると、以下のようなトラッキングスクリプトが生成されます。これをウェブサイトのHTMLファイルの </head> タグの直前に追加します。

<script async defer data-website-id="あなたのサイトID" src="https://your.umami.domain/umami.js"></script>

data-website-id には、Umamiの管理画面で設定したサイトのIDが入ります。src には、UmamiをデプロイしたサーバーのURLを指定します。

ボタンのクリックやフォームの送信など、特定のユーザーアクションを追跡したい場合は、JavaScriptでイベントを送信できます。

ボタンクリックイベントのトラッキング例

document.getElementById('download-button').addEventListener('click', () => {
  // umami.track() メソッドを使用してイベントを送信
  window.umami.track('Download Button Click');
});

このコードでは、IDが 'download-button' の要素がクリックされたときに、'Download Button Click' というイベント名でUmamiにデータを送信しています。

シングルページアプリケーション（SPA）の場合、ページのURLが変わったときに手動でページビューをトラッキングする必要があります。react-router-dom を使っている場合の例です。

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const UmamiTracker = () => {
  const location = useLocation();

  useEffect(() => {
    // URLが変わるたびにページビューをトラッキング
    if (window.umami) {
      window.umami.track(location.pathname);
    }
  }, [location]);

  return null;
};

export default UmamiTracker;