EmDashにGoogle Analyticsを導入する

20260405ga4.webp

EmDashにGoogle Analytics 4(GA4)を導入する方法は、WordPressのプラグインのように管理画面でポチポチするだけ、とはいかない。現時点(2026.04.05)ではBase.astroに直接タグを貼ってデプロイするというのが唯一の方法だ。

ただ作業自体は非常にシンプルで、慣れていれば5分もかからない。

手順

GA4の管理画面でデータストリームを開き、「タグの実装手順を表示する」からgtagコードを発行する。

発行されたコードをコピーして、src/layouts/Base.astro<head>内、<title>タグの直後に貼り付ける。

このとき2つ目の<script>タグにis:inlineを追加する必要がある。

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script is:inline>
  /* Analyticsが発行したコードをここに */
</script>

is:inlineが必要な理由

Astroはデフォルトでスクリプトを最適化・バンドルしてしまう。gtagのような外部スクリプトはそのままの形で出力される必要があるため、is:inlineを付けてAstroの処理をバイパスする必要がある。これを忘れると計測が正常に動作しない。

デプロイして確認

npm run build && npx wrangler deploy

GA4の管理画面でリアルタイムレポートを開いて、自分でサイトにアクセスしてみる。数分以内にカウントされれば成功だ。

WordPressとの違い

WordPressでは「Site Kit by Google」などのプラグインを使えば、管理画面からタグを貼り付けるだけで完了する。EmDashではそういったプラグインがまだ存在しないため、コードを直接編集してデプロイが必要になる。将来的にはプラグインで対応できるようになる可能性はあるが、今のところはこの方法が現実的な選択肢だ。

No comments yet