Google analytics と Clarity を Misskey に導入する

統計データが大好きなSigmaです。Misskey にもアクセス解析を導入したいと漠然と思っていたのですが、どこにタグを埋め込めばいいか全くわからなかったのでずっと困っていました。今回、ちょっと進展があったので、備忘録として記事にしたいと思います。

1. 実行環境

Oracle Cloud Infrastructure VM.Standard.E2.1.Micro Ubuntu 22.04
Misskey 2023.12.2

2. Pugの編集

正直この辺は全く分からなくて、ひたすらにトライアンドエラーでやったのでもっといいやり方があったら是非ご教示ください。以下には、最終的に成功した方法を記します。

まずは、GoogleアナリティクスとClarityのHTMLをそれぞれPugに変換します[1]。以下はその一例です。

// Google tag (gtag.js)
script(async='' src='https://www.googletagmanager.com/gtag/js?id=G-YOURID')
script.
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}
	gtag('js', new Date());
	gtag('config', 'G-YOURID');

// Microsoft tag
script(type='text/javascript').
	(function(c,l,a,r,i,t,y){
	c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
	t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
	y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
	})(window, document, "clarity", "script", "yourid");

Pugは字下げはスペースでもインデントでもいいが、混ぜるとコンパイルエラーになるので注意しつつ “/home/misskeyuser/misskey/packages/backend/src/server/web/views/base.pug” の48行目に挿入します。もとのPugがインデントで字下げされているので、インデントでそろえます。挿入後は以下の通りです。

(前略)
		if Array.isArray(clientEntry.css)
			each href in clientEntry.css
				link(rel='stylesheet' href=`/vite/${href}`)

		// Google tag (gtag.js)
		script(async='' src='https://www.googletagmanager.com/gtag/js?id=G-YOURID')
		script.
			window.dataLayer = window.dataLayer || [];
			function gtag(){dataLayer.push(arguments);}
			gtag('js', new Date());
			gtag('config', 'G-YOURID');

		// Microsoft tag
		script(type='text/javascript').
			(function(c,l,a,r,i,t,y){
			c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
			t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
			y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
			})(window, document, "clarity", "script", "yourid");

		title
			block title
				= title || 'Misskey'
(後略)

3. サーバーの更新

私は、Bashスクリプト[2]をお借りしてサーバーを建てているので、ドキュメント通り

sudo bash update.sh

を実行しますが、このままだと git pull でエラーが出るか上書きされてしまうと思われるので、”/misskeyuser/misskey/.gitignore” に下記の要素を付け足すと良いと思われます。

# gitignore
.gitignore

# Analytics
/packages/backend/src/server/web/views/base.pug

これで、スクリプトを実行する準備が整ったのでスクリプトを実行し、数分待つとちゃんとMisskeyにアナリティクス用のタグが埋め込まれていると思います。

今回は、devモードの起点となる index.html に惑わされたり、Pug のインデントがおかしいというコンパイルエラーを10回くらい見たりと、なかなか時間がかかりましたが何とか1日でタグ埋め込みが終わって良かったです。ところで、個人用サーバーにタグ埋め込んで何か意味があるんですかね？

Reference

HTML TO PUG – Online Converter https://html-to-pug.com/
Misskey install shell script v3.0.0 https://misskey-hub.net/ja/docs/for-admin/install/guides/bash/