はじめにSPAサイトでのGoogle Analytics 4（GA4）による計測には、従来の静的サイトとは異なる実装方法が必要です。私たちは大手メディア企業のSPAサイトでGA4計測を実装する過程で、データレイヤーの制御とイベント発火のタイミングに関する課題を特定し、解決しました。本稿では、その実装手法と注意点を解説します。1. SPAサイトの特性SPAサイト（Single Page Application）は、React、Angular、Vue.jsなどのフレームワークで構築された動的なWebアプリケーションです。主な特徴単一ページ上でのコンテンツ更新非同期によるデータ取得クライアントサイドでのルーティング処理これらの特性により、従来のページ読み込みベースの計測手法では正確なデータ取得が困難になります。2. デフォルト機能による計測GA4は以下のデフォルト機能でSPAサイトの計測に対応しています：拡張計測機能履歴の変更に基づくページビューの自動送信GA4管理画面から設定可能GTMの履歴変更トリガーURLの変更を検知基本的なページビュー計測に対応3. 実装における課題デフォルト機能による実装で以下の問題が発生しました。// 問題のある実装例window.dataLayer.push({ 'articleId': '12345', 'author': 'yamada'});データ送信のタイミングページコンテンツの更新前にデータが送信される前ページの値が誤って送信されるデータの整合性非同期更新による値の欠落データレイヤーの更新タイミングの制御が困難4. カスタムイベントによる解決策以下の実装により、問題を解決しました。function updateDataLayer(pageData) { window.dataLayer = window.dataLayer || []; window.dataLayer.push({ event: 'pageview', page: { title: pageData.title, path: pageData.path, articleId: pageData.articleId, author: pageData.author } });}function onPageUpdate(newPageData) { updateContent(newPageData); updateDataLayer(newPageData);}実装のポイントカスタムイベントの使用データ更新の同期化一括でのデータ送信GTMの設定トリガー：カスタムイベントイベント名：'pageview'5. デバッグ手順実装の検証は以下の手順で実施します。GA4タグの設定・debug_mode: True の設定・詳細ログの有効化動作確認・GTMプレビューモードでのタグ発火確認・GA4 DebugViewでのデータ検証確認項目イベント発火のタイミング送信データの正確性イベントの順序性6. 実装から得られた知見デフォルト機能の適用範囲・基本的なページビュー計測は可能・カスタムデータには不適データレイヤーの制御・非同期更新への対応が必須・タイミング制御が重要カスタムイベントの有用性・データ送信の正確なコントロール・一貫性のあるデータ収集検証の重要性・定期的な動作確認・データ整合性の継続的な監視パフォーマンスへの配慮・必要最小限のデータ送信・処理の最適化まとめSPAサイトでのGA4計測において、カスタムイベントを活用した実装は、データの正確性と送信タイミングの制御を可能にします。実装時は、SPAの特性を理解し、適切なデバッグを行うことが重要です。また、サイトの更新に応じて継続的な検証と調整が必要です。今回の実装方法は、多くのSPAサイトに適用可能です。ただし、各サイトの要件に応じて適切なカスタマイズを検討することを推奨します。