【Astro】Partytownを利用してGoogle Analyticsを導入する
以前Next.js製のブログにGoogle Analyticsを導入したが、その際にパフォーマンス面を考慮してPartytownを利用した。
【React】PartytownでGoogle Analytics(Tag Manager)のスクリプトをWeb Worker上で実行する
しかし先日移行した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の導入は完了。
参考