🐎BLOG🐎

Astro x GA4

Tech
Astro
memo
pulished:

Google Analytics 4をAstroで使う

ここらへんは省略。適当にStream作成やらなんやらでなんとかする。

PartyTime

npm install -D @astrojs/partytownこいつで導入おわり。

astro.config.mjsに以下を追加。

import partytown from "@astrojs/partytown";

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

TrackingIDの用意

Note: Astro公式の記事だとUA-XXXXX-XXみたいなGA4までの古いTrackingIDを使っている。 しかし、GA4ではG-XXXXXXXみたいなTrackingIDを使うので注意。

Layout.astroとかにいれる

以下のような感じで。

<!-- head -->
<script
  type="text/partytown"
  src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID">
</script>
<script type="text/partytown">
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag("js", new Date());
  gtag("config", "GA_MEASUREMENT_ID");
</script>
<!-- more head -->
  1. Replace the GA_MEASUREMENT_ID with your own tracking ID.
  2. Add a type attribute and set it to text/partytown to both scripts. This tells partytown which script tags to handle.

参考