Googleアナリティクス4の導入

By miyazaDaniels on Oct 13, 2022

このウェブサイトがどれだけ見ていただけているか確認するため、Googleアナリティクスを追加しました。 Googleアナリティクス4が推奨されているみたいですね!

導入手順

Googleアナリティクスのアカウントがある前提でざっくり導入は以下のようでした。

Astroへのpartytownの導入
Googleアナリティクス用タグの取得
head要素へのGoogleアナリティクス用タグの導入

Astroへのpartytownの導入

Add google analytics to your Astro project with Partytownのページを参考にして導入しました。とてもわかりやすくてありがたいです。

astro.config.mjsの設定変更が必要になります。上記サイトや、Astroのドキュメントを参考にしてください。

Googleアナリティクス用タグの取得

公式サイトの[GA4] 設定アシスタントを使用して Google アナリティクス 4 の利用を開始するを参考にしました。

head要素へのGoogleアナリティクス用タグの導入

このブログだと、src/templates/Base.astroにあるHead要素の中に以下のようにタグを入れることで、Googleアナリティクスへデータを送ることができました。GA_MEASUREMENT_IDは適宜置き換えてください。

<head>
  <!-- 略 -->
  <script type='text/partytown' async 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>
</head>