HonoXで作成したサイトにGoogle Analyticsを導入しました
2025-01-05
はじめに
HonoXで作成したサイトにGoogle Analyticsを導入しました。
※そもそもGoogle Analyticsってなんだっけ？という方はこちらをご覧ください。）
導入の目的としては、Google アドセンスの審査通過に向けたサイトのデータを取得することです。
（いずれは広告収入を得て、今使ってるドメインの更新費を回収できればと考えてます。）
導入方法
HonoXでGoogle Analyticsを導入する方法はhonoxにGoogle Analyticsを追加しました - scrpbook を参考にしました。
routes/_renderer.tsxにGoogle Analytics 用のスクリプトをhtml helperを使用して定義します。
const GoogleAnalytics = () => {
return (
<>
{html`
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WKXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-WKXXXXXXXX');
</script>
`}
</>
);
};
これを jsxRenderer で呼び出すだけです。
export default jsxRenderer(({ children, title, frontmatter }) => {
return (
<html lang='ja' class="dark">
<head>
<!-- 他のメタ・リンクタグ等は省略 -->
{import.meta.env.PROD ? (
<GoogleAnalytics />
) : (
<></>
)}
</head>
<body className="bg-teal-50 flex flex-col min-h-screen">
<!-- コンテンツは省略 -->
</body>
</html>
)
})
これを本番環境にデプロイして数時間～48時間程度で、Google Analyticsでデータ取得ができるようになります。
ではでは。