Google Analytics 4 の SPA 対応

React に GA4 を組み込む時の気づき。

結論

下記のようなグローバルサイトタグのインストールのみで計測される。

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

  gtag('config', 'GA_MEASUREMENT_ID');
</script>

理由

ページが読み込まれるたび、またはブラウザ履歴の状態が変更されるたびに、ページビューイベントが記録されるディフォルト設定となっているため。

具体的には

以下のディフォルト設定がされている。

• 管理 > プロパティ > データストリーム > 詳細 > 拡張計測機能 > ページビュー数 > 詳細設定を表示 > 「ブラウザの履歴イベントに基づくページの変更」チェック ON