アクセス解析のために、GA4やGTMのトラッキングコードをAstroサイトに導入する必要があります。
Astroを使うとサイト共通のレイアウトコンポーネント（例: src/layouts/BaseLayout.astro）にコードを設置してまとめて管理できるので簡単に導入できます。
AstroサイトにGA4/GTMを導入する手順
1.トラッキングコードを取得
GA4の場合:
- Google Analyticsにログインし、対象のプロパティを選択します。
- 「管理」 > 「データストリーム」でウェブストリームを選択し、「タグの実装手順を表示する」>「手動でインストールする」を開きます。
- 表示される
gtag.jsのコードスニペット (通常<script>タグ2つ) をコピーします。これは<head>タグ内に設置します。
GTMの場合:
- Google Tag Managerにログインし、対象のコンテナを選択します。
- コンテナID（
GTM-XXXXXX）の横にあるリンクをクリックするか、「管理」 > 「Googleタグマネージャをインストール」を開きます。 - 表示される 2種類のコードスニペット をコピーします。
- 1つ目は
<head>タグ内のできるだけ上部に設置するコード。 - 2つ目は
<body>開始タグの直後に設置するコード (通常<noscript>を含む)。
- 1つ目は
2.レイアウトコンポーネントにコードを設置 (BaseLayout.astro)
- サイト共通のレイアウトファイル（例:
src/layouts/BaseLayout.astro）を開きます。 - フロントマター (
---内) に、コピーしたコードを文字列として定義します。 - テンプレート部分の適切な場所に、
set:htmlディレクティブを使ってコードを埋め込みます。
GA4 (gtag.js) の設置例:
---
// 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 の設置例:
---
// 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.動作を確認する
- 開発サーバーを起動します (
npm run devなど)。 - ブラウザでサイトにアクセスし、開発者ツールを開きます。
- 「Elements」タブで、
<head>や<body>の指定した場所にコードが埋め込まれているか確認します。 - 「Network」タブで、
gtag.jsやgtm.jsなどのファイルが読み込まれているか確認します。
- 「Elements」タブで、
- GA4の「リアルタイム」レポートや、GTMの「プレビュー」モードを使って、アクセスが正しく計測されているか確認します。
まとめ
これでAstroサイトでGA4またはGTMを使ったアクセス解析ができるようになります！