アクセス解析作るよ

December 04, 2020

結論から言うとブログのURLを変更したのでもしブックマークとかつけている人がいたら変更してください。Netlifyの方はそのうち見れなくなります。

https://jmrtmt-blog.vercel.app/

ブログのホスティングをNetlifyからVercelに変えようかなと思って色々やっていたんですがその過程でやっとGatsby.jsにmetaタグをつける方法が分かりました。ありがとうReact-helmet。なぜかと言うとVercelにはsnippet injection機能がないから…。でもscriptタグの挿入の仕方が分かりません。なぜ動かないのか。私はブログもサイトもGoogleアナリティクスを使っているのでCookie取得のお知らせをしないといけないんですが(ブラウザのアドオンとかで拒否できる)、その警告ポップアップをJavaScriptで作っています。出来ないならそもそもGoogleアナリティクスを使わなければいいのではとなり変な所からアクセス来てないかだけ分かればいいなと思ったので変えることにしました。

Vercelの解析が何故か有効化出来ず困っていたらUmami (ttps://umami.is/) というのを見つけました。どこかのハンバーガー屋みたいな名前だな。自力でホスティングする必要があるけどCookieを使わないアクセス解析らしい。MySQLとか使ったことないけどなんとかなるやろ(前向き)。

  • Vercelは無料プランだと1つのプロジェクトしかビルド出来ない
  • Netlifyは静的ファイルしか扱えないのでMySQLが置けない
補足(2021/02/28)

Vercelの無料プランにプロジェクト上限はありませんでした…。

ということで自動的にHerokuを使うことになりました。とりあえず公式ドキュメント通りにやります。クローンしたumamiのGitリポジトリに接続したらまだDeployはしません。Resources > Find more add-onsに飛んでHeroku Postgresを追加します。先にDeployするとエラーで詰みます(経験者)。あとこれは公式ドキュメントには書いてなくて誰かのブログ (ttps://chenhuijing.com/blog/setting-up-umami-on-heroku/) に書いてあったんですがHeroku側でHASH_SALTの設定をしたら最後にコマンドラインで

heroku run psql -h YOUR_HOST_IP.compute.amazonaws.com -U HEROKU_ASSIGNED_USERNAME -d HEROKU_ASSIGNED_DBNAME -f sql/schema.postgresql.sql -a APPLICATION_NAME

する必要があります。Heroku CLIとPostgreSQLをパソコンにインストールしてください。キレそう。ユーザー名とかはHeroku PostgresのDatabase Credentialsに書いてあります。APPLICATION_NAMEはHerokuのアプリ名です。初心者にはハードルが高かった。

これでサイトもブログも晴れて脱Googleアナリティクスしました。なんか思ったより大袈裟になっちゃったな。

追記

サイトもブログもdata-do-not-track="true"したので解析されたくない方はお使いのブラウザから設定してください。iOSは知らんうちにDo Not Track削除されていたのでどうしたらいいか分かりません。iPhoneを使わないくらいしか思いつかない。


Profile picture

オタクの日記です。