Umami - Google Analytics の軽量オープンソース代替

Umami 、シンプルで使いやすいセルフホスト型のウェブ分析ソリューションです。Google Analyticsよりもユーザーフレンドリーでプライバシー重視の代替手段を提供するだけでなく、有料ソリューションに代わる無料かつオープンソースの代替手段としても機能します。Umamiは、ユーザーが必要とする指標のみを収集し、すべてが1ページにまとめられています。

特性

Umamiのシンプルなアナリティクスは、ページビュー、使用デバイス、訪問者の出所といった、お客様が重視する主要な指標のみを測定します。これらのデータはすべて、操作しやすいページに表示されます。

Umami を使用すると、1 回のインストールで無制限の数の Web サイトを追跡でき、サブドメインや個々の URL も追跡できます。

Umami を使用した広告ブロッカーのバイパスは、Google Analytics からのさまざまな広告ブロッカーを効果的に回避できるセルフホスト型のデプロイメントです。

軽量のトラッキングスクリプトは非常に小さく (わずか 2 KB)、IE などの古いブラウザーをサポートします。

Umamiマルチアカウントは、友人や顧客のデータをホストするために使用できます。別のアカウントを作成するだけで、彼らは自分のダッシュボードで自分のウェブサイトのトラッキングを開始できます。

統計情報を公開したい場合は、独自に生成された URL を使用して共有できます。

モバイルフレンドリーなUmami インターフェースはモバイルデバイス向けに最適化されているため、どこからでも統計情報を表示できます。

Umamiはセルフホスティングされているため、データの所有権は保証されています。すべてのデータはお客様の所有物となり、第三者にデータを渡す必要はありません。

Umami はプライバシーを最優先し、個人を特定できる情報を一切収集せず、収集したすべてのデータを匿名化します。

Umami はオープンソースであり、MIT オープンソースライセンスに基づいてライセンスされます。

インストール

ソースコードからビルドする

ソースコードからビルドしてインストールする場合は、次の条件を満たす必要があります。

Node.js バージョン 12 以上
MySQLまたはPostgreSQLデータベース

次に、ソースコードを直接取得し、依存パッケージをインストールします。

 git クローンhttps://github.com/mikecao/umami.git
 CD うま味
npm インストール

次に、データベースのテーブル構造を作成します。UmamiはMySQLとPostgreSQLをサポートしているため、まずUmamiのインストール用のデータベースを作成し、付属のスクリプトを使用してテーブルをインストールする必要があります。

MySQLの場合:

 mysql - u ユーザー名- p データベース名< sql / スキーマ.mysql .sql

PostgreSQLの場合:

 psql -h ホスト名-U ユーザー名-d データベース名-f sql / スキーマ.postgresql .sql

これにより、ユーザー名adminとパスワードumamiのログインアカウントも作成されます。

次に、次の内容を使用して.envファイルを作成します。

 DATABASE_URL = 接続アドレス
HASH_SALT = 任意のランダム文字列

URL の形式は次のとおりです。

 postgresql :// ユーザー名: mypassword @localhost : 5432 / mydb
 mysql :// ユーザー名: mypassword @localhost : 3306 / mydb

HASH_SALTは、インストールに対して一意の値を生成するために使用されます。

設定後、次のコマンドを使用してアプリケーションをビルドします。

 npm 実行ビルド

ビルドが完了したら、アプリケーションを起動できます。

 npm スタート

デフォルトでは、アプリケーションは http://localhost:3000 で起動します。

Dockerの使用

さらに簡単な方法は、Dockerを使ってワンクリックで起動することです。docker-composeの設定はソースコードのルートディレクトリにあります。umamiコンテナをビルドしてPostgresデータベースを起動するには、プロジェクトのルートディレクトリで以下のコマンドを実行するだけです。

 docker-compose アップ

あるいは、PostgreSQL をサポートする Umami Docker イメージのみを取得します。

 docker pull ghcr .io / mikecao / umami : postgresql-latest

あるいは、MySQL サポートを使用することもできます。

 docker pull ghcr .io / mikecao / umami : mysql-latest

使用

インストール後、Umami はユーザー名adminとパスワードumamiを使用してデフォルトの管理者アカウントを作成します。

Umami にログインしたら、上部のSettingsをクリックしてWebsitesに移動し、右側の+ Add websiteボタンをクリックして Web サイト分析の作成を開始します。

フォームの詳細を入力し、「保存」ボタンをクリックして保存します。

Name欄は任意の名前を入力できますが、通常はドメイン名と同じになります。 Domain欄はウェブサイトの実際のドメイン名です。 Enable share URL 、ウェブサイトの統計情報を固有のURLで共有することを示します。

ウェブサイトを追加した後、 「トラッキングコードを取得」ボタンをクリックしてトラッキングコードを取得します。

ポップアップフォームからコードをコピーし、Web サイトの<head>セクションに挿入するだけです。

ウェブサイトにアクセスした後、すべてが正常であれば、Umami ダッシュボードにデータが表示されます。

Umamiはウェブサイトの閲覧データに加えて、ウェブサイト上で発生するイベントも追跡できます。Umamiでイベントを記録するには、 CSSクラスを使用するか、 JavaScriptを使用するかの2つの方法があります。

CSSクラスの使用

イベントトラッキングを有効にするには、トラッキングしたい要素に特別なCSSクラスを追加するだけです。例えば、次のようなコードを持つボタンがあるとします。

 < button id = "signup-button" class = "button" > サインアップ</ button >

次に、次の形式を使用してclassを追加します。

 umami-- <イベント> -- <イベント名>

ボタン要素のコードは次のようになります。

 < button id = "signup-button" class = "button umami--click--signup-button" > サインアップ</ button >

ユーザーがボタンをクリックすると、Umamiはイベントタイプがclickであるsignup-buttonというイベントをログに記録します。このイベントは、要素に適用できる任意のJavaScriptイベントです。

注意: scrollやdragなど、連続してトリガーされるイベントにはアタッチしないでください。

Javascriptの使用

window.umamiオブジェクトを使って手動でイベントをログに記録することもできます。上記の CSS メソッドと同じことを実現するには、次のようにします。

 const button = document . getElementById ( 'signup-button' );
 button . onclick = () => umami ( 'サインアップボタンのクリック' );

この場合、Umami はイベントタイプがcustomでSignup button clickという名前のイベントを記録します。

イベントを表示

イベントが記録されると、Web サイトの詳細ページに表示されます。

さらに、Umami には、トレース設定、トレース関数、環境変数、API など、多くの高度な機能があります。より高度な使用方法については、公式ドキュメント https://umami.is/docs を参照してください。

最後に、Umami を使用したサンプルダッシュボードを見てみましょう。

Git リポジトリ: https://github.com/mikecao/umami。

DUICUO