AstroサイトにGA4、GTMを導入する

アクセス解析のために、GA4やGTMのトラッキングコードをAstroサイトに導入する必要があります。

Astroを使うとサイト共通のレイアウトコンポーネント（例: `src/layouts/BaseLayout.astro`）にコードを設置してまとめて管理できるので簡単に導入できます。

## AstroサイトにGA4/GTMを導入する手順

### 1.トラッキングコードを取得

**GA4の場合:**
1.  Google Analyticsにログインし、対象のプロパティを選択します。
2.  「管理」 > 「データストリーム」でウェブストリームを選択し、「タグの実装手順を表示する」>「手動でインストールする」を開きます。
3.  表示される **`gtag.js` のコードスニペット** (通常 `<script>` タグ2つ) をコピーします。これは `<head>` タグ内に設置します。
3.  

**GTMの場合:**
1.  Google Tag Managerにログインし、対象のコンテナを選択します。
2.  コンテナID（`GTM-XXXXXX`）の横にあるリンクをクリックするか、「管理」 > 「Googleタグマネージャをインストール」を開きます。
3.  表示される **2種類のコードスニペット** をコピーします。
    * 1つ目は `<head>` タグ内のできるだけ上部に設置するコード。
    * 2つ目は `<body>` 開始タグの直後に設置するコード (通常 `<noscript>` を含む)。

### 2.レイアウトコンポーネントにコードを設置 (`BaseLayout.astro`)

* サイト共通のレイアウトファイル（例: `src/layouts/BaseLayout.astro`）を開きます。
* フロントマター (`---` 内) に、コピーしたコードを文字列として定義します。
* テンプレート部分の適切な場所に、`set:html` ディレクティブを使ってコードを埋め込みます。

**GA4 (gtag.js) の設置例:**
```astro
---
// src/layouts/BaseLayout.astro
// ... 他のimportや定義 ...

// ★ GA4のトラッキングコードをここに貼り付け (コピーしたコード全体をバッククォートで囲む)
const ga4TrackingCode = `
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX');
</script>
`;
---
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  {/* ... 他のhead要素 ... */}
  <title>{title}</title>

  {/* ★ GA4コードをhead内のできるだけ上部に設置 */}
  <Fragment set:html={ga4TrackingCode} />

  {/* ... OGP, 構造化データなど ... */}
</head>
<body>
  {/* ... bodyの内容 ... */}
  <slot />
</body>
</html>
```

**GTM の設置例:**
```astro
---
// src/layouts/BaseLayout.astro
// ... 他のimportや定義 ...

// ★ GTMの<head>用コードをここに貼り付け
const gtmHeadCode = `
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
`;

// ★ GTMの<body>用コードをここに貼り付け
const gtmBodyCode = `
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
`;
---
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  {/* ... 他のhead要素 ... */}
  <title>{title}</title>

  {/* ★ GTMの<head>用コードをhead内のできるだけ上部に設置 */}
  <Fragment set:html={gtmHeadCode} />

  {/* ... OGP, 構造化データなど ... */}
</head>
<body>
  {/* ★ GTMの<body>用コードをbody開始タグの直後に設置 */}
  <Fragment set:html={gtmBodyCode} />

  {/* ... bodyの内容 ... */}
  <slot />
</body>
</html>
```
*(注: `G-XXXXXXXXXX` や `GTM-XXXXXXX` の部分は、ご自身のIDに置き換えてください。`set:html` を使うと、コピーしたHTMLコードをそのまま安全に埋め込めます)*

### 3.動作を確認する

1.  開発サーバーを起動します (`npm run dev` など)。
2.  ブラウザでサイトにアクセスし、開発者ツールを開きます。
    * 「Elements」タブで、`<head>` や `<body>` の指定した場所にコードが埋め込まれているか確認します。
    * 「Network」タブで、`gtag.js` や `gtm.js` などのファイルが読み込まれているか確認します。
3.  GA4の「リアルタイム」レポートや、GTMの「プレビュー」モードを使って、アクセスが正しく計測されているか確認します。


## まとめ
これでAstroサイトでGA4またはGTMを使ったアクセス解析ができるようになります！