Zenn
🥒

[Astro] Google Analytics を追加する

2025/02/12に公開
Google Analytics
ブログ
Astro
tech

Astro 製のサイトへ Google Analytics を設定する方法です。

前提

  • Google Analytics の GA4 tracking ID を取得済み
  • Astro 製のサイト

手順

1. partytown をインストール

partytown はサードパーティのスクリプトを遅延ロードするためのライブラリです。

npx astro add partytown

https://docs.astro.build/en/guides/integrations-guide/partytown/

2. Astro の config ファイルに追記

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

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

3. head 内にスクリプトを記述

src/layouts/Layout.astro
...
<head>
  <script
    is:inline
    type="text/partytown"
    async
    src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
  <script is:inline type="text/partytown">
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag("js", new Date());
    gtag("config", "G-XXXXXXXXXX");
  </script>
</head>
...

Discussion