Astroサイトでアクセス解析ができるようにする

今回、AstroのサイトはNetlifyへデプロイしました。

VercelですとデフォルトでAnalyticsが使えますが、Netlifyではアカウントをアップグレードしないと使えません。

いったんはどのみちアクセスなんかほとんどないだろうとアクセス解析などするつもりはなかったのですが、念の為？組み込むことにしました。

解析には、Google Analyticsを使います。
専用タグを組み込まないといけないのですが、以下のインテグレーションを使うといいそうです。

docs.astro.build

まずはインストール。

npm install @astrojs/partytown

astro.config.mjsに設定追加。
すでにmdxやsitemapのインテグレーションを設定していたりする場合があるので、注意深く追加する。

import partytown from "@astrojs/partytown"; //importも忘れずに

-----

export default defineConfig({
  integrations: [
    partytown({
      // Example: Add dataLayer.push as a forwarding-event.
      config: {
        forward: ['dataLayer.push'],
      },
    }),
  ],
});

BaseHead.astro等のコンポーネントに追加。
type="text/partytown"属性を追加する。

<!-- Google tag (gtag.js) -->
<script type="text/partytown" async src="https://www.googletagmanager.com/gtag/js?id=x-xxxxxxxxxx"></script>
<script type="text/partytown">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'x-xxxxxxxxxx');
</script>

インストールでは、クイックインストールもできる。

npx astro add partytown

自分も一度はクイックインストールを試したのだが、なんだか余計に複雑になってしまったので、間違いがわかりやすい手動インストールを好んで選んでいる。

Astro公式ドキュメントを読んで、すぐにこうして設定するんだと理解できる人がいるんだな。。。
自分は公式ドキュメントだけでは気づけなかった。。。