Web サイトのアクセス解析において、Google Analytics を利用しているというケースは多いと思います。私がお仕事で Web サイトの構築をお手伝いする場合でも、ほぼ 100% といっていい確率で、Google Analytics 導入してくださいっていう話になりますし、まぁ確かに無料であれだけの機能が使えれば便利ですから使わない理由はないですよね。
とはいえ、アクセス解析って導入は簡単なんですけど、実際に活用できるかっていうとまた別の話で、実際に導入した後でたま～に月のアクセス数だけ見て終わり、何も活用できてませんなんて人も多いんじゃないでしょうか。
もちろん、必要な機能を理解し、データを分析して、仮説を立てて CVR 改善のサイクルを回そう、みたいな明確な目的を持って使う人にとっては Google Analytics は便利です。広告など特に Google が提供する他のサービスと連動させるなんて場合には Google Analytics 使っとけってなりますし。
私はアクセス解析なんて、どこから入ってきたか、つまり流入経路とか、どこにランディングしたか、あとコンバージョンまでの経路くらいがわかればまぁ仮説は立てられるし、その辺のデータだけ見られれば OK ...... 程度で、Google Analytics の機能をすべて使いこなしてます、なんて絶対に言えないレベルではありますが、それでも現在の Google Analytics で使えるセグメント機能とか、セカンダリディメンション機能なんかは仮説を立てるためのデータを収集したり分析する上で便利だなと思いますからね。
なので、Google Analytics なんて駄目だみたいな話ではないのですが、一方で 「月に 1 度くらいアクセス数確認するくらいしか使わないです」 という人にはもっとシンプルで、Cookie の同意がどうこうとか、個人を特定できるデータの保管場所がどうのこうの、みたいなことを気にせず使えるアクセス解析があってもいいですよね。
で、そんなニーズにマッチしそうなアクセス解析ツールとして 「Umami」 というオープンソースのツールがありまして、個人的に気になって以前から一度使ってみようと思いつつダラダラと先延ばししていたのですが、週末に少し時間があったのでさらっと調べてみたら結構簡単に導入できました。
ということでここに導入方法をまとめておこうと思います。
Umami とは
Umami は下記の通り、公式サイトでは 『Google Analytics の代替として、シンプルで使いやすく、プライバシーに配慮したフレンドリーなセルフホスティング型の Web 解析ソリューション』 とうたわれています。
Umami is a simple, easy to use, self-hosted web analytics solution. The goal is to provide you with a friendlier, privacy-focused alternative to Google Analytics and a free, open-sourced alternative to paid solutions. Umami collects only the metrics you care about and everything fits on a single page.
About Umami から引用
アクセス解析において多くの人が気になる指標だけに絞ってデータを収集し、それをシンプルなページで表示することでわかりやすくて使いやすいアクセス解析ツールになっています。トラッキングのための Cookie も使用していませんし、収集したすべてのデータは匿名化することで、個人を特定できる情報は残しません （Umami FAQ を参照）。
つまり、Umami では、ユーザーを特定したり、Web サイト間で追跡するようなことはできませんが、それによって逆に個人データ収集の問題や Cookie 同意の問題からも解放されると。
冒頭に書いた、現時点で Google Analytics の機能をある程度使いこなしているような層にとっては正直 「代替」 になるかは疑わしいですけども、月に何回かアクセス数を確認するくらいで、なんか大きな変動があったときだけその理由がリファラとかからなんとなくわかればいいくらいのユーザーにとってはよいプロダクトなんじゃないかなと思います。
なお、ソースコードは MIT License のもとで公開されていますので、Fork して機能を足したり、といったカスタマイズもやりやすいですし、インターフェースの多言語対応もしっかりされていて日本語でも使えますので、英語無理、みたいな人でも導入しやすいと思います。
さくらの VPS で立ち上げてみる
ということで、実際に Umami をインストールする環境を作って試してみようと思います。Umami の動作に最低限必要な環境としては下記の通り。
- Node.js v12 以降
- データベース （MySQL か Postgresql）
その他、Web サーバとかはなんでもいいので、比較的環境を整えるのは楽です。
以前、同じような Node.js アプリケーションを DigitalOcean で立ち上げた記事を書きました （下記参考）。
- DigitalOcean （Ubuntu 20.04） で Pa11y Dashboard を簡単に立ち上げる
- 日本語化して、ダッシュボードへのベーシック認証を追加した Pa11y Dashboard を作ってみた
今回も楽なので、DigitalOcean を使おうかなと思ったんですが、自分が運営しているサイトで本格的に使用することを考えて、さくらインターネットさんが提供する VPS （さくらの VPS） で VPS 立ててそこでホストしてみることにしました。
選択したのは 「1G」 プランで、SSD だけ 100 GB に変更しました。初期費用は別として、これで月額 800 円とかですからね。お安い （実際には年払いしてるのでもっと安い）。
ちなみに、OS は、標準 OS から
- Ubuntu 20.04 （amd64）
を選択しています。
インストール手順
ということで、サーバが立ち上がって、SSH など、最低限の設定だけ終わらせたところからスタートします。
sudo apt update
sudo apt upgrade
データベース （MySQL）
まずは、MySQL のインストールから。
sudo apt install mysql-server
sudo systemctl start mysql.service
sudo mysql_secure_installation
mysql_secure_installation は基本的に全項目 Y を選択しました （パスワード強度はお好みで）。
sudo mysqlMySQL にログインし、ユーザーと Umami で使用するデータベース （今回は 「umami」 という名前で） を作成します。
mysql> CREATE USER '<username>'@'localhost' IDENTIFIED BY '<password>';
mysql> CREATE DATABASE umami;
mysql> GRANT ALL ON umami.* TO <username>@localhost;
mysql> FLUSH PRIVILEGES;
mysql> EXIT;
今作ったユーザーでログインできることを確認し、
mysql -u <username> -pデータベースも問題なく作成されていることを一応確認します。
mysql> SHOW DATABASES;文字コードなどはデフォルトのままで問題ないと思いますが、こちらも一応確認して必要なら設定を変更します。
mysql> STATUS;Web サーバ （Nginx）
次に Web サーバですが、Nginx を使用します。ファイアウォールに Nginx が使うポートの許可も加えておきましょう。
sudo apt install nginx
sudo systemctl enable nginx
sudo ufw allow 'Nginx Full'
sudo ufw reload
Umami をインストールするためのディレクトリを作ります。umami.example.com というドメインで運用する前提です。
sudo mkdir -p /var/www/umami.example.com/html
sudo chown -R www-data:www-data /var/www/umami.example.com
sudo chmod -R 755 /var/www/umami.example.com
umami.example.com 用の設定ファイルを新規作成し、
sudo vim /etc/nginx/sites-available/umami.example.comとりあえず下記のように記述して保存しておきます。
server {
listen 80;
listen [::]:80;
root /var/www/umami.example.com/html;
index index.html index.htm index.nginx-debian.html;
server_name umami.example.com;
add_header Access-Control-Allow-Origin '*';
location / {
proxy_pass http://localhost:3000;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_hide_header 'Access-Control-Allow-Origin';
}
}
作成した設定ファイルのシンボリックリンクを Nginx が起動時に読み取る sites-enabled ディレクトリに作成することで設定が有効になります。
sudo ln -s /etc/nginx/sites-available/umami.example.com /etc/nginx/sites-enabled/ついでに、Let's Encrypt でサーバ証明書を取得し、HTTPS で接続可能にしましょう。certbot を使います。
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d umami.example.com質問に答えていくだけなので簡単。設定ファイルも certbot に書き換えてもらいましょう （その後、細かい SSL 関連の設定は Mozilla SSL Configuration Generator などを参考にしつつ調整しました）。
自動更新が有効になっているか確認して完了です。
sudo systemctl status certbot.timer最後に Nginx を再起動。
sudo systemctl reload nginxNode.js
次に Node.js 環境を整えます。まずは npm と n をインストール。
sudo apt install npm
sudo npm install -g nNode.js は v16 の現時点での最新版を入れます。sudo node -v してインストールされたバージョンを確認しておきます。
sudo n v16.14
sudo node -vあと、Node.js アプリの実行状態を永続化したり、ログを管理するため、PM2 をインストールしておきます。
sudo npm install pm2 -gこれで下準備は完了。Umami のインストールに入りましょう。
Umami のインストール
まず、先ほど作成した Umami インストールディレクトリに移動します。
cd /var/www/umami.example.com/htmlGitHub から Umami リポジトリを取得。npm install を行います。
sudo git clone https://github.com/mikecao/umami.git
cd umami
sudo npm install
Umami が提供している schema.mysql.sql を使用して、テーブルを作成します。今回は umami というデータベースを作成した前提で書いていますが、この辺は環境に合わせてください。
mysql -u <username> -p umami; < sql/schema.mysql.sql次に環境設定ファイル （.env ファイル） を新規作成します。
sudo vim .env.env ファイルには下記の 2 つの設定を記述します。
DATABASE_URL=mysql://<username>:<password>@localhost:3306/umami
HASH_SALT=<適当な文字列ご自由に>1 行目はデータベースへの接続情報ですね。
2 行目はインストール時に使用されるソルトですので、適当な文字列 （例えば E1F53135E559C253C3PO みたいな 20 桁くらいの文字列） を設定しておけば OK です。
設定ファイルを保存したら、ビルドしましょう。
sudo npm run buildPM2 を使用して、Node.js アプリを立ち上げます。
sudo pm2 start npm --name umami -- start
sudo pm2 save設定したドメインにブラウザでアクセスすれば、下記のようなログイン画面が表示されると思います。何かうまく行かない場合は PM2 のログなどを確認しましょう。
初期状態では、アカウント名 admin、パスワード umami でログインできます。初期立ち上げ状態で放置したりせずに、必ず次の初期設定を行ってください。
Umami の初期設定手順
Umami を立ち上げたら、まず最初に必ず、admin アカウントのパスワードを強固なものに変更してください。
変更は、「プロファイル」 設定画面にある 「パスワード変更」 から行えます （画面は言語設定を日本語に変更後の状態）。
Umami は現時点で、管理アカウントのアカウント名を変更する手段が提供されていませんので、初期パスワードのまま放置すると脆弱です。必ずパスワードを強固なものに変更し、また通常の運用に使用するアカウントも作ってそちらを普段は利用するようにした方がよいでしょう。
Umami v1.29.0 で admin アカウントをリネームすることができるようになりました。最新版を使用しましょう。
ここまで終わったら、あとはアクセス解析を行いたい Web サイトを追加して、そのサイトにトラッキング用の JavaScript コードを追加するだけです。「Web サイト」 メニューから、「Web サイトを追加」 ボタンを押すと、下記のように追加画面が出ますので、名前とドメインを入力して保存しましょう。
「共有リンクを有効にする」 というオプションがありますが、これは特に理由がないなら無視して問題ないです。チェックを入れるとアクセス解析のデータを URL でシェアできるようになりますから、組織内でデータを閲覧したいみたいな場合には便利かもしれません。
Web サイトの追加が完了すると、下記のような画面となり、</> ボタンをクリックするとトラッキング用の script タグが取得できます。
取得したコードを、当該 Web サイトの、head 要素内に追加すればアクセス解析が開始されます。
実際にトラッキングコードを追加して数時間後のダッシュボードが下記ですが、このようにデータが取得できていることがわかります。
画面はシンプルですが、例えば 「ページ」 部分の URL をクリックしたりすると、それをキーにデータの絞り込みみたいなことができます。なので、「このページに対する、Google からの流入数は......」 みたいな感じで見ていけます。
インストールも設定も非常に簡単で、アクセス数やリファラなどの基本的なデータもきちんと取得できるため、とても便利だなという印象でした。
その他、トラッキング用コードで指定可能なオプションや、イベント取得の方法など、ドキュメントにまとまっていますので興味のある方は確認して試してみるといいと思います。
