WordPressからAstroへ移行した話（6）GA4設定とView Transitions対応

はじめに

前回はGoogle AdSenseの設置を紹介しました。
今回はGoogle Analytics GA4の設置です。

AstroPaperはAstroのView Transitions（クライアントサイドルーティング）を使っているため、通常のGA設置だとページ遷移が計測されません。
専用の対応が必要です。

測定IDを確認する

Google Analytics（analytics.google.com）を開く
左下「管理」→「データストリーム」
対象ストリームを開くと「測定ID」として G-XXXXXXXXXX の形式で表示される

※ ストリームIDは数字のみの別物です。G- から始まるものが測定IDです。

なぜ通常の設置方法ではダメなのか

AstroPaperは <ClientRouter />（AstroのView Transitions）を使っており、ページ遷移がSPAのようにクライアントサイドで行われます。

通常のGAスクリプトは最初のページ読み込みしか検知しません。
そのため、その後のページ遷移がカウントされず、アクセス解析が正しく機能しません。

正しいスクリプトの設置

src/layouts/Layout.astro の <head> 内に以下を追加します。

<!-- Google Analytics GA4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX" is:inline></script>
<script is:inline>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX', { send_page_view: false });

  // View Transitionsでのページ遷移ごとにpageviewを送る
  document.addEventListener('astro:page-load', () => {
    gtag('event', 'page_view', {
      page_location: window.location.href,
      page_title: document.title,
    });
  });
</script>

G-XXXXXXXXXX を自分の測定IDに変更してください。

仕組みの解説

設定	役割
`send_page_view: false`	GAの自動pageview送信を無効化する
`astro:page-load` イベント	ページ遷移のたびに発火するAstro固有のイベント
`gtag('event', 'page_view', ...)`	遷移先のURLとタイトルでpageviewを手動送信

これにより、最初のページと遷移後のページ両方が正しく計測されます。

動作確認

デプロイ後、GAの「リアルタイム」画面で自分のアクセスが表示されれば設定完了です。
自分のIPを除外していない場合は、サイトを開いてリアルタイム画面でカウントが増えるか確認できます。

まとめ

AstroPaperでGA4を正しく動かすには send_page_view: false と astro:page-load の組み合わせが必要です。
通常のGA設置コードをそのまま貼っても計測できないので注意してください。

次回はThe Moneytizerの広告移行について紹介します。