Astro製のWebサイトでGoogleアナリティクスを導入する

Astroフレームワークで製作されたWebサイトへ、Googleアナリティクスを導入する手順と設定方法を解説します。

分析ツールであるGoogleアナリティクスをWebサイトへ導入することで、Webサイトの日々の改善が可能になり、運用に役立てることができます。

手順

  1. Googleアナリティクス にてアカウントを作成し、画面の指示に従ってGoogleタグを発行する。

  2. Astroプロジェクトにて、Partytownをインストールする（参考：Partytownの公式ドキュメント）。

npx astro add partytown
  1. astro.config.mjsに、以下のコードを追記する。
export default defineConfig({
  integrations: [
    partytown({
      config: {
        forward: ["dataLayer.push"],
      },
    }),
  ],
});
  1. Googleアナリティクスの初期設定で取得したGoogleタグを、headタグの直後に挿入する。
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-708BQXT8D2"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-708BQXT8D2');
</script>
  1. 挿入したscriptタグに、以下の2つの属性を追加する。
    • is:inline
    • type="text/partytown"
<!-- Google tag (gtag.js) -->
  <script is:inline type="text/partytown" async src="https://www.googletagmanager.com/gtag/js?id=G-708BQXT8D2"
  ></script>
  <script is:inline type="text/partytown">
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag("js", new Date());

    gtag("config", "G-708BQXT8D2");
  </script>

Partytownとは？

Partytownは、Builder.io/QwikDevが開発しているオープンソースのJavaScriptライブラリです。

Googleアナリティクスや広告タグなどのサードパーティースクリプトをWeb Workerに移動させて、メインスレッドを空けることを目的としています。

これにより、ページ表示の遅延やTotal Blocking Timeなど、Core Web Vitalsへの悪影響を最小化しつつ、計測・広告などの機能をそのまま維持できます。

Webサイトのパフォーマンスを向上させるためには必須のライブラリです。

なお、AstroではPartytownを簡単に導入できます。

Astroを使ったWebサイトへの導入方法や詳細な使い方は、Astroの公式ドキュメントをご参照ください。