honoxにGoogle Analyticsを追加しました

honoxで作ったBlogにGoogle Analyticsを追加しました。

Google Analyticsとは

Googleが開発、提供しているサイト解析ツールです。PV数やボタンクリックのイベントなどを計測できます。 無料で使えて、機能も豊富なためサイト解析ツールの利用としては最初に候補に上がるツールだと思われます。 導入するためには、通常以下のコードを埋め込みます。

<script
	async
	src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX"
/>
<script>
	window.dataLayer = window.dataLayer || [];
	function gtag() {
	dataLayer.push(arguments);
	}
	gtag("js", new Date());

	gtag("config", "G-XXXXXXXXX");
</script>

HTMLだと、問題のないコードですが、TSX（TypeScript）だとdataLayerや、argumentsの変数が見つからないとエラーが出てしまいます。これは、TypeScriptだと型に対して厳格であるため、dataLayerなどが見つからないとエラーになってしまいます。

honoxでGoogle Analyticsを使う場合

honoには、htmlタグをそのまま記述できるhtml helperが提供されています。html helperを利用して、Google Analyticsのタグを記述するのが簡単だと思われます。

const GoogleAnalytics = () => {
  return (
    <>
      {html`
	<script
		async
		src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX"
	/>
	<script>
		window.dataLayer = window.dataLayer || [];
		function gtag() {
		dataLayer.push(arguments);
		}
		gtag("js", new Date());

		gtag("config", "G-XXXXXXXXX");
	</script>
      `}
    </>
  );
};

この実装方法については、@p1assさんのリポジトリを参考にしました。

この対応をいれることで、honoxでもGoogle Analyticsによる計測が行えるようになります。