【Astro】Partytownを利用してGoogle Analyticsを導入する

Astro
2023-09-11

以前Next.js製のブログにGoogle Analyticsを導入したが、その際にパフォーマンス面を考慮してPartytownを利用した。

【React】PartytownでGoogle Analytics（Tag Manager）のスクリプトをWeb Worker上で実行する2023-08-17

しかし先日移行したAstroの場合はIntegrationとしてPartytownを追加することでより簡単に利用できるとのことなので、今回実際に試しつつ導入してみる。

導入方法

1. partytownのインストール

npx astro add partytown

上記コマンドでクイックインストールする。

これでpartytownのnpmパッケージがインストールされ、astro.config.mjsにIntegrationの設定が追記される。

2. イベント転送の設定

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

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

Google Analyticsの場合はイベントをWebワーカーに転送する必要があるため、上記のようにastro.config.mjsに追記する。

3. コンポーネントを作成し配置

<script
  type="text/partytown"
  src="https://www.googletagmanager.com/gtag/js?id=<TRACKING_ID>"
/>
<script type="text/partytown">
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag("js", new Date());
  gtag("config", "<TRACKING_ID>");
</script>

上記のように、トラッキングのためのインラインスクリプトをコンポーネントとして実装する。

type属性にtext/partytownを指定
GAの管理画面で取得できるトラッキングIDを<TRACKING_ID>に指定

そうしたらこのコンポーネントを共通のレイアウトなどに配置する。これでGoogle Analyticsの導入は完了。