React（SPA構成）でGA4+GTMを本番導入した時の気付きやトラブルシューティング｜Japan Digital Design, Inc.

三菱UFJフィナンシャル・グループ（MUFG）の戦略子会社であるJapan Digital Design株式会社でフロントエンドエンジニアをしている小笠原と申します。 今回は、Reactを用いてSPAを作成しGA4とGTMを導入した結果、様々な気付きがあったので、トラブルシューティングなども含め記事にまとめました。 はじめに本記事では、GA4＋GTMの構成に関する事前知識となるような内容を記載しています。そのため、体系的な話や、GAからGA4の移行、GTMタグと広告の連携など高度なことについては記述しておりません。 使用ライブラリについてReact: v18系 React Router 6系 GA4: react-ga4 GTM: @elgorditosalsero/react-gtm-hook SPAの注意点通常のReactでSPAを実装した場合、正しくページロードが起こらない可能性があ