技術 約2分で読めます

AstroサイトにGoogle Analytics (GA4) をPartytownで導入する

Astro Google Analytics Partytown パフォーマンス

AstroサイトにGoogle Analytics 4 (GA4) を導入した。Astro公式が推奨するPartytownを使うことで、アナリティクススクリプトをWeb Workerで実行し、メインスレッドへの影響を最小限に抑えられる。

Partytownとは

Partytownは、サードパーティスクリプトをWeb Workerに移動させるライブラリ。Google AnalyticsやGoogle Tag Managerなどの重いスクリプトをメインスレッドから分離することで、ページのパフォーマンスを改善できる。

Astroは @astrojs/partytown として公式インテグレーションを提供している。

導入手順

1. パッケージのインストール

pnpm add @astrojs/partytown

2. astro.config.mjsの設定

import partytown from '@astrojs/partytown';

export default defineConfig({
  integrations: [
    partytown({
      config: {
        forward: ['dataLayer.push'],
      },
    }),
  ],
});

forward 設定は、メインスレッドからWeb Workerへ転送する関数を指定する。GA4は dataLayer.push を使うため、これを転送対象に含める。

3. BaseLayoutにGA4スクリプトを追加

<!-- Google Analytics (GA4) with Partytown -->
{import.meta.env.PROD && (
  <>
    <script type="text/partytown" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
    <script type="text/partytown">
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-XXXXXXXXXX');
    </script>
  </>
)}

ポイント:

  • type="text/partytown" を指定することで、スクリプトがWeb Workerで実行される
  • import.meta.env.PROD で本番環境のみ読み込む（開発環境のアクセスを計測しない）

動作確認

  1. pnpm build && pnpm preview でプレビュー
  2. ブラウザの開発者ツール > Network で gtag.js が読み込まれていることを確認
  3. Google Analyticsのリアルタイムレポートでアクセスが計測されていることを確認

なぜPartytownを使うのか

GA4のスクリプトを直接埋め込む方法もあるが、以下の理由でPartytownを推奨する:

  1. パフォーマンス: メインスレッドをブロックしないため、Core Web Vitals（特にTBT、FID）が改善される
  2. 公式サポート: Astroが公式インテグレーションとして提供しており、メンテナンスが継続される
  3. 設定が簡単: type="text/partytown" を追加するだけで移行できる

参考