AstroにGoogle Analytics 4をPartytownで導入する方法【パフォーマンス最適化】

Astroで作ったサイトにGoogle Analytics 4（GA4）を普通に設置すると、外部スクリプトの読み込みがメインスレッドをブロックし、Core Web Vitalsのスコアが下がってしまいます。「計測したいけどパフォーマンスも落としたくない」というジレンマはAstroユーザーが共通して直面する課題です。

実際、GA4のトラッキングスクリプトは外部CDNから読み込む100KB超のJavaScriptで、低速回線やモバイルでは表示速度に無視できない影響を与えます。Partytownを使ってWebワーカーに逃がすことで、同じスクリプトをメインスレッドを汚染せずに実行できます。

本記事では、AstroサイトにGoogle Analytics 4をPartytownで導入する4ステップと、本番環境のみ読み込む環境変数の設定、動作確認の方法をすべてコード付きで解説します。

---

Partytownとは何か｜外部スクリプトをWebワーカーに逃がしてパフォーマンスを守る仕組み

Partytownを使う前に、「なぜ外部スクリプトがパフォーマンスを下げるのか」と「Partytownがどう解決するのか」を理解しておくと、設定内容が腑に落ちやすくなります。

通常のGA4スクリプトの問題点

【通常のGA4スクリプトがPageSpeedを下げる理由】

ブラウザの構造：
メインスレッド（1本）
 ├─ HTMLの解析・DOMの構築
 ├─ CSSの計算・レイアウト
 ├─ JavaScriptの実行   ← ここで外部スクリプトも実行される
 └─ 描画（Paint / Composite）

問題：
→ GA4のスクリプト（外部CDNから100KB超）がメインスレッドで実行される
→ 実行中、ページの描画・ユーザー操作への応答がブロックされる
→ FID（First Input Delay）・TBT（Total Blocking Time）が悪化する
→ Core Web Vitals スコアが下がる

Partytownの解決策

【Partytownを使うと何が変わるか】

ブラウザの構造（Partytown導入後）：
メインスレッド               Webワーカー（別スレッド）
 ├─ HTMLの解析・DOM構築      │
 ├─ CSSの計算・レイアウト    │  ← GA4スクリプトがここで動く
 ├─ JSの実行（軽くなる！）   │     メインスレッドに影響ゼロ
 └─ 描画（高速！）           │

効果：
✅ メインスレッドのブロック時間が大幅に減少
✅ FID / TBT の改善 → Core Web Vitals が向上
✅ PageSpeed Insights のスコアが上がる
✅ GA4のトラッキングは通常通り動作する（計測精度に影響なし）

注意点：
❌ window オブジェクトへの直接アクセスは制限される
   → forward オプションで dataLayer.push を転送する設定が必要

対応バージョン

パッケージ	動作確認バージョン
Astro	5.0.5 以降
@astrojs/partytown	2.1.3 以降
Node.js	18.x 以降推奨

---

手順1：Google Analytics 4のトラッキングIDを取得する

まずはGA4の管理画面からトラッキングIDを取得します。すでに取得済みの場合はこの手順を読み飛ばしてください。

1. Google Analytics にアクセスしてGoogleアカウントでログイン
2. 「管理」→「プロパティを作成」からGA4プロパティを新規作成（既存なら対象プロパティを選択）
3. 「データストリーム」→「ウェブ」を選択してサイトのURLとストリーム名を入力
4. 作成されたストリームの「測定ID」を確認する（G-XXXXXXXXXX 形式）

【取得するトラッキングID】

G-XXXXXXXXXX  ← この形式の文字列（X の部分は英数字）

・「G-」から始まる文字列がトラッキングID
・後のコンポーネント作成で使用するのでメモしておく
・絶対に公開リポジトリに直書きしない
  → 環境変数（.env）に保存するのが安全

---

手順2：Partytownをインストールして astro.config.mjs を設定する

Astroには公式インテグレーションとして @astrojs/partytown が用意されており、コマンド1つで設定まで自動で行えます。

インストールコマンド

# Astroプロジェクトのルートで実行する
npx astro add partytown

コマンドを実行すると以下の確認が表示されます。すべて y で進めてください。

✔ Continue? … yes
✔ @astrojs/partytown を package.json に追加しますか？ … yes
✔ astro.config.mjs を更新しますか？ … yes

astro.config.mjs の設定（forwardオプション必須）

自動追加されたコードに、forward: ["dataLayer.push"] の設定を必ず追記してください。この設定がないとGA4のイベントがWebワーカーからメインスレッドへ正しく転送されず、計測が機能しません。

// astro.config.mjs
import { defineConfig } from "astro/config";
import partytown from "@astrojs/partytown";

export default defineConfig({
  integrations: [
    partytown({
      config: {
        // dataLayer.push をWebワーカーからメインスレッドへ転送する
        // ← この設定がないとGA4のイベントが計測されない
        forward: ["dataLayer.push"],
      },
    }),
  ],
});

【forward オプションが必要な理由】

問題の背景：
→ WebワーカーはブラウザのAPIの一部（window・documentなど）にアクセスできない
→ GA4は内部で window.dataLayer.push() を呼び出してイベントを記録する
→ スクリプトをWebワーカーに移すと、window が参照できずイベントが消える

解決策：
→ forward に "dataLayer.push" を指定すると
   Partytownがダミーの dataLayer.push をメインスレッドに作成する
   WebワーカーのGA4が dataLayer.push を呼ぶ
   → メインスレッドのダミーが受け取って本物の dataLayer.push に渡す

▶ forward の設定はPartytown導入で最もよくミスするポイントなので要注意

---

手順3：GoogleAnalytics.astroコンポーネントを作成する

GA4のトラッキングコードを1か所にまとめたAstroコンポーネントを作成します。コンポーネント化することで、Layout.astroから1行で呼び出せるようになります。

ファイルの作成場所

src/
├── components/
│   └── GoogleAnalytics.astro  ← このファイルを新規作成
├── layouts/
│   └── Layout.astro
└── pages/
    └── index.astro

GoogleAnalytics.astroのコード

<!-- src/components/GoogleAnalytics.astro -->

<!--
  重要：script タグに type="text/partytown" を指定する
  → これがないとWebワーカーではなくメインスレッドで実行されてしまう
-->

<!-- ① GA4の外部スクリプトを非同期で読み込む -->
<script
  type="text/partytown"
  async
  src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
></script>

<!-- ② GA4の初期設定スクリプト -->
<script type="text/partytown">
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag("js", new Date());
  gtag("config", "G-XXXXXXXXXX");
</script>

G-XXXXXXXXXX の部分を手順1で取得したトラッキングIDに置き換えてください。

環境変数でトラッキングIDを管理する（推奨）

トラッキングIDをソースコードに直書きすると、GitHubなどに誤って公開してしまうリスクがあります。環境変数で管理するのがベストプラクティスです。

# .env（プロジェクトルートに作成）
PUBLIC_GA_TRACKING_ID=G-XXXXXXXXXX

# .env はリポジトリに含めない！
# .gitignore に .env を追記しておく

<!-- src/components/GoogleAnalytics.astro（環境変数版） -->
---
// Astroでは PUBLIC_ プレフィックスのついた環境変数がクライアントに公開される
const trackingId = import.meta.env.PUBLIC_GA_TRACKING_ID;
---

<script
  type="text/partytown"
  async
  src={`https://www.googletagmanager.com/gtag/js?id=${trackingId}`}
></script>

<script type="text/partytown" define:vars={{ trackingId }}>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag("js", new Date());
  gtag("config", trackingId);
</script>

【Astroの環境変数の使い分け】

PUBLIC_ プレフィックスあり（例：PUBLIC_GA_TRACKING_ID）
→ クライアントサイド（ブラウザ）でも参照できる
→ ビルド後のJSに含まれる
→ GA4のトラッキングIDなど「公開されても問題ない値」に使う

PUBLIC_ プレフィックスなし（例：SECRET_API_KEY）
→ サーバーサイド（.astroファイルのfrontmatter）のみ参照可能
→ ブラウザのJSには絶対に含まれない
→ APIキー・データベースの接続情報など「秘密にすべき値」に使う

---

手順4：Layout.astroのheadタグにコンポーネントを埋め込む

作成した GoogleAnalytics.astro を Layout.astro の <head> 内にインポートして配置します。

<!-- src/layouts/Layout.astro -->
---
import GoogleAnalytics from '../components/GoogleAnalytics.astro';
---

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>

    <!-- GoogleAnalytics コンポーネントを head 内に配置 -->
    <GoogleAnalytics />
  </head>
  <body>
    <slot />
  </body>
</html>

この時点でGA4は全ページに適用されます。ただしこのままでは開発環境でも計測されてしまうため、次のステップで本番環境のみに絞ります。

---

本番環境のみGA4を読み込む｜import.meta.env.PRODで環境を判定する

開発環境でもGA4が動いていると自分のアクセスが計測データに混入し、数値が正確でなくなります。import.meta.env.PROD で本番環境のみGA4を読み込むように設定しましょう。

Layout.astroの修正

<!-- src/layouts/Layout.astro（本番環境のみGA4を読み込む版） -->
---
import GoogleAnalytics from '../components/GoogleAnalytics.astro';

// import.meta.env.PROD
// → 本番ビルド（npm run build）のとき true
// → 開発サーバー（npm run dev）のとき false
const isProd = import.meta.env.PROD;
---

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>

    <!-- isProd が true のときだけ GoogleAnalytics を表示する -->
    {isProd && <GoogleAnalytics />}
  </head>
  <body>
    <slot />
  </body>
</html>

【Astroの環境変数まとめ】

import.meta.env.PROD
→ npm run build で生成した本番ビルドのとき true
→ npm run dev（開発サーバー）のとき false

import.meta.env.DEV
→ 開発サーバーのとき true（PRODの逆）

import.meta.env.MODE
→ "production" または "development" の文字列

import.meta.env.BASE_URL
→ astro.config.mjs の base オプションの値

活用例：
{import.meta.env.PROD && <GoogleAnalytics />}
→ 本番のみGA4を読み込む（開発中は計測しない）

{import.meta.env.DEV && <DebugPanel />}
→ 開発中だけデバッグパネルを表示する

---

動作確認の方法｜GA4とPartytownが正しく動いているかチェックする3つの手順

設定が完了したら、GA4とPartytownが正しく動いているか確認しましょう。本番ビルドを使う必要があるため、npm run build 後に確認します。

確認手順1：ビルドしてプレビューサーバーを起動する

# 本番ビルドを実行
npm run build

# プレビューサーバーを起動（本番ビルドの動作確認用）
npm run preview

# → http://localhost:4321 でアクセスできる
# → isProd が true になるのでGA4が読み込まれる

確認手順2：開発者ツールのネットワークタブで確認する

1. ブラウザで http://localhost:4321 を開く
2. F12で開発者ツールを開く
3. 「Network」タブを選択
4. フィルターに「gtag」と入力
5. ページをリロード

確認ポイント：
✅ "googletagmanager.com/gtag/js?id=G-XXXXXXXXXX" のリクエストが
   「Initiator: partytown」と表示されていればWebワーカー経由で動いている

❌ Initiatorが通常のスクリプトになっている場合
→ type="text/partytown" が script タグについているか確認する

確認手順3：GA4のリアルタイムレポートで確認する

1. Google Analytics の管理画面にアクセス
2. 左メニュー「レポート」→「リアルタイム」を開く
3. プレビューサーバー（localhost:4321）のページを開く
4. 「現在のユーザー数」が1以上表示されれば計測成功

注意：
→ localhost での計測はGAにフィルタリングされる場合がある
   → 本番環境にデプロイした後で確認するのが確実

PageSpeed Insightsでスコアを確認する

【Partytown導入前後のPageSpeed Insightsの変化（目安）】

計測指標              導入前    導入後（目安）
─────────────────────────────────────────────
TBT（Total Blocking Time）
                      100〜300ms →  20〜80ms
FID（First Input Delay）
                      100ms超   →  50ms以下
パフォーマンススコア  70〜80    →  85〜95

※ サイトの構成や他スクリプトの量によって効果は異なる
※ 効果を最大化するには、他の外部スクリプト（広告・チャット等）も
   同様にPartytownに移すことを検討する

---

よくあるトラブルと解決方法

設定後に想定通りに動かないケースと、その解決方法をまとめます。

トラブル1：GA4がイベントを計測しない

【原因と対処法】

原因A：astro.config.mjs に forward: ["dataLayer.push"] を書き忘れている
対処：astro.config.mjs を確認して forward オプションを追記する

原因B：script タグに type="text/partytown" を付け忘れている
対処：GoogleAnalytics.astro の両方の script タグに
     type="text/partytown" が付いているか確認する

原因C：開発サーバー（npm run dev）で確認している
対処：npm run build && npm run preview でビルド後に確認する
     （isProd を使っている場合、dev では読み込まれない）

原因D：トラッキングIDが間違っている
対処：G- から始まるIDが正しく設定されているか確認する

トラブル2：コンソールに「partytown」関連のエラーが出る

// よく見られるエラーメッセージ
// "Partytown could not find 'dataLayer'"
// → forward オプションが設定されていない

// astro.config.mjs を確認・修正する
partytown({
  config: {
    forward: ["dataLayer.push"],  // ← これが必要
  },
})

トラブル3：Google Tag ManagerをPartytownで動かしたい

<!-- GTMをPartytownで動かす場合（GA4ではなくGTM経由の場合） -->
<script
  type="text/partytown"
  async
  src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXXX"
></script>

<script type="text/partytown">
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
</script>

// astro.config.mjs の forward も更新が必要
partytown({
  config: {
    forward: ["dataLayer.push"],
    // GTM独自のイベントも必要に応じて追加
  },
})

---

よくある質問（FAQ）

Q1. Partytownを使うとGA4の計測精度は下がりますか？

A. 基本的には計測精度に影響ありません。Partytownはスクリプトを実行する場所（Webワーカー）を変えるだけで、GA4の計測ロジック自体は変わらないからです。ただし、forward オプションの設定ミスがあるとイベントが欠落する場合があるため、動作確認は必ず行ってください。

Q2. GA4以外の外部スクリプトもPartytownで動かせますか？

A. はい。Google Tag Manager・Meta Pixel・Hotjar・インターコムなどの多くの外部スクリプトをPartytownで動かすことができます。type="text/partytown" を追加するだけで動くものと、forward オプションへの追記が必要なものがあります。各スクリプトの公式ドキュメントやPartytownのドキュメントを確認しながら設定してください。

Q3. Astro以外のフレームワークでもPartytownは使えますか？

A. 使えます。Next.js・Nuxt・SvelteKit・Remixなど主要なフレームワーク向けのインテグレーションが用意されています。また、フレームワークなしのVanilla JSプロジェクトでも、@builder.io/partytown を直接インストールして使えます。基本的な考え方（type="text/partytown"・forward設定）はどの環境でも共通です。

Q4. Astro 4.x から 5.x へのアップグレードで設定が変わりますか？

A. @astrojs/partytown の基本的な設定方法はAstro 4.x と 5.x で大きく変わりません。ただし、Astroのバージョンアップ時は @astrojs/partytown のバージョンも合わせてアップデートし、公式のマイグレーションガイドを確認することを推奨します。

Q5. VercelやNetlifyにデプロイしても動作しますか？

A. 動作します。Partytownはビルド時に静的ファイルとして生成され（public/~partytown/ 以下）、サーバーに依存しない仕組みで動きます。Vercel・Netlify・Cloudflare Pagesいずれも追加設定なしで使えます。デプロイ後は必ずGA4のリアルタイムレポートで計測できているか確認してください。

---

---

まとめ

本記事では、AstroサイトにGoogle Analytics 4をPartytownで導入する方法として、インストールから本番環境の設定・動作確認・トラブルシューティングまで解説しました。

• Partytownの仕組み：外部スクリプトをWebワーカーに移すことで、メインスレッドへの影響を最小限にしてCore Web Vitalsを改善できる。
• インストール：npx astro add partytown の1コマンドで完了。ただし forward: ["dataLayer.push"] の追記を忘れずに。
• コンポーネント作成：script タグに type="text/partytown" を指定するのが最重要。これがないとWebワーカーで動かない。
• 環境変数：トラッキングIDは PUBLIC_GA_TRACKING_ID として .env に保存し、ソースコードに直書きしない。
• 本番環境のみ読み込む：import.meta.env.PROD で本番ビルド時のみGA4を読み込み、開発中の計測データ混入を防ぐ。
• 動作確認：npm run build && npm run preview でビルド後に確認し、ネットワークタブで「Initiator: partytown」と表示されれば成功。

AstroにGA4をPartytownで導入することで、パフォーマンスを落とさず正確な計測データを取得できるようになり、SEOとUXの両面でサイトの品質を高めることができます。

WithCodeで学んだHTML/CSS/JavaScriptの基礎を土台に、Astroでのサイト制作を始めてみましょう。パフォーマンスへの理解が深まるほど、Webサイトの質を高める手段が広がっていきます。

---

WithCodeを体験できる初級コース公開中！

初級コース（¥49,800）が完全無料に！

• 期間：1週間
• 学習内容：ロードマップ／基礎知識／環境構築／HTML／CSS／JavaScript → AstroやPartytownを使いこなすための必須基礎（HTML構造・JS・パフォーマンスの考え方）を体系的に習得できるカリキュラムです

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！