YJK

独立世界

Independent World
twitter
telegram

自己構築Umami | オープンソースのウェブサイト分析ツール

Umami は、ユーザーのプライバシーを保護する Google Analytics の代替ソリューションを提供するために作成されたオープンソースのウェブサイト分析ツールです。Umami を使用すると、ウェブサイトの管理者は訪問者の行動を追跡し、ウェブサイトのパフォーマンスに関する洞察を得ることができますが、ユーザーのプライバシーは侵害されません。Umami には、リアルタイムトラッキング、カスタマイズ可能なダッシュボード、詳細なレポートなどの機能があります。自己ホストされているため、ユーザーは自分のデータを完全に制御し、第三者と共有しないことができます。

以下では、Umami を Vercel にデプロイする方法を簡単に説明します:

0/ 準備#

  1. Githubのアカウント
  2. Vercelのアカウント(Github でログインできます)
  3. Supabaseのアカウント(Github でログインできます)

1/ Umami を Fork する#

Github にログインし、以下の Umami リポジトリにアクセスし、Umami を自分の Github アカウントに Fork してください。

Fork した Umami リポジトリに移動し、Add file - Create new fileをクリックします。

image

ファイル名にvercel.jsonを入力し、以下の内容を入力します。

{
  "rewrites": [
    {
      "source": "/index.js",
      "destination": "/umami.js"
    }
  ]
}

image

2/ データベースの作成#

Supabaseにログインし、New projectをクリックしてプロジェクトを作成し、プロジェクト名とデータベースパスワード(非常に重要なのでメモしておいてください)を入力し、推奨地域をEast USに選択して作成してください。

image

プロジェクトに入り、設定 - データベース - 接続文字列 - URIをクリックし、データベースの接続情報をコピーして保存してください(プロジェクト作成時に設定したパスワードを[YOUR-PASSWORD]に置き換えてください)。

image

3/ Vercel で Umami を構築する#

GithubVercelにログインし、Add New... - Projectをクリックし、Fork した Umami リポジトリを選択してImportをクリックしてください。

image

Environment Variablesを展開し、以下の内容を入力してください。

  • name HASH_SALT - value ランダムな文字列
  • name DATABASE_URL - value 前のステップで保存したデータベースの接続情報

特記事項:データベースの接続情報の後ろに?pgbouncer=trueを追加する必要があります。例:

postgresql://postgres:パスワード@db.ランダム文字列.supabase.co:5432/postgres?pgbouncer=true

image

Deployをクリックして少し待つと、デプロイが成功したことが表示されます。Vercel のデフォルトドメインvercel.appは既に使用されているため、設定 - Domainsに移動して独自のドメインをバインドすることをおすすめします。

まず、サブドメインをCNAMEcname-china.vercel-dns.comに設定し、Addをクリックします。

自分のドメインにアクセスし、ユーザー名admin、パスワードumamiでログインし、ログイン後にパスワードを変更することを忘れないでください。

4/ ウェブサイトに組み込む#

Umami の管理画面にアクセスし、設定ページに移動し、新しいウェブサイトを作成し、埋め込みコードをコピーしてウェブサイトの</body>の前に貼り付けてください。

image

特に Umami のデフォルトリンクは Adblock プラグインによってブロックされるため、最初のステップで設定した内容に基づいて、コード中のumami.jsindex.jsに置き換える必要があります。これにより、Adblock によるブロックを回避できます。例:

元のコード:

<script async defer data-website-id="xxxxxx" src="https://tongji.domain.com/umami.js"></script>

変更後:

<script async defer data-website-id="xxxxxx" src="https://tongji.domain.com/index.js"></script>
読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。