Astroで作成したサイトでGA4を導入する方法

Astroで作成したサイトにGA4のアナリティクス用のタグを設置する場合、GA4で発行されたコードをそのまま使えません。いくつか方法がありますが、私はastro-google-analyticsを使いました。
設置方法は以下のとおり。

0.前提

GA4でアナリティクスコード（G-XXXXXXXXXX）を取得します。
プロパティを作成し、「手動で設定」とすればコードを取得できます。

ターミナルから以下のコマンドでインストールします。

npm install astro-google-analytics

メインレイアウトのastroファイルに以下の記述を追加します。
G-XXXXXXXXXXの部分は、GA4で発行された自分のコードに置き換えます。

---
import { GoogleAnalytics } from 'astro-google-analytics';
---

<head>
  <GoogleAnalytics id="G-XXXXXXXXXX" />
</head>

設定後はデプロイし、GA4側も画面を進めて完了です。