未経験から100日後にGTMのプロになる話【Day 30】 〜シングルページアプリケーション（SPA）対応 〜消えたページビューを取り戻せ！〜〜

■ SPA（シングルページアプリケーション）とは？

SPA（Single Page Application）とは、ページ遷移を伴わずに動的にコンテンツが切り替わるウェブサイトの仕組み です。

例えば、 ✅ 「クリックしてもURLは変わるけど、ページの再読み込みはされない」
✅ 「動作がサクサク軽いECサイトやアプリ風のUI」
✅ 「でも、Googleアナリティクスのページビューが記録されない」

そう、GTMは 通常「ページの再読み込み時」にタグを発火 するため、SPAでは「ページが変わっても何も起こらない」状態になってしまうのです。

では、この問題をどう解決するのか？

答えは、「履歴変更（History Change）イベントを使う」 です！

① SPA対応のための履歴変更トリガーを設定する

1. GTMで「履歴変更」トリガーを作成する

1. GTMの「トリガー」メニューを開く。
2. 「新規」をクリックし、トリガーの種類を「履歴の変更」に設定。
3. 「このトリガーの発火を...」は「すべての履歴変更」のままでOK。
4. トリガー名を「SPA履歴変更トリガー」にして保存。

✅ これで、ページの遷移が履歴変更イベントとして記録されるようになります！

② 履歴変更をGA4のページビューとして送信する

1. GA4の仮想ページビュータグを作成する

1. GTMの「タグ」メニューを開く。
2. 「新規」をクリックし、タグの種類を「Google アナリティクス: GA4 イベント」に設定。
3. 「設定タグを選択」で、すでに作成したGA4設定タグを選択。
4. 「イベント名」を page_view にする。

2. イベントパラメータを設定する

1. 「イベントパラメータを追加」ボタンをクリック。
2. 以下のパラメータを追加。
3. パラメータ名: page_location（値: {{Page URL}}）
4. パラメータ名: page_referrer（値: {{Referrer}}）
5. 保存。

✅ これで、SPAサイトでも「ページビュー」として計測できるようになります！

③ 履歴変更トリガーを適用する

1. 作成したGA4の仮想ページビュータグの「トリガー」をクリック。
2. 先ほど作成した「SPA履歴変更トリガー」を選択。
3. 保存。

✅ これで、ページ遷移が発生するたびに「仮想ページビュー」としてGA4に送信されるようになります！

④ プレビューモードで動作確認

1. GTMの「プレビュー」を開く。
2. 計測対象のSPAサイトを開き、ページ遷移を試す。
3. デバッグツールの「Tags Fired（発火したタグ）」にGA4の page_view タグがあるか確認。
4. GA4のリアルタイムレポートで page_view イベントが記録されているか確認。

✅ 問題なくデータが送信されていることを確認したら、GTMの「送信」ボタンを押して公開！

⑤ 追加設定：ページタイトルを更新する

SPAサイトでは、ページタイトル（document.title）が更新されない問題 も発生します。

この対策として、「カスタムJavaScript変数」を使ってページタイトルを取得し、GA4のイベントに追加します。

1. JavaScript変数を作成する

1. GTMの「変数」メニューを開く。
2. 「新規」をクリックし、変数の種類を「カスタムJavaScript」に設定。
3. 以下のコードを入力し、変数名を「JS - ページタイトル」にする。

javascript function() { return document.title; }

1. 保存。

2. GA4のイベントタグにページタイトルを追加

1. 先ほど作成したGA4の仮想ページビュータグを開く。
2. 「イベントパラメータを追加」ボタンをクリック。
3. パラメータ名: page_title（値: {{JS - ページタイトル}}）
4. 保存。

✅ これで、SPAサイトでも正しいページタイトルがGA4に送信されます！

■ まとめ 〜SPAサイトの計測をマスターしよう！〜

✅ SPAサイトでは「履歴変更」トリガーを使うとページビューを記録できる！
✅ 仮想ページビューを設定し、GA4のデータを正しく記録する！
✅ ページタイトルをJavaScript変数で取得し、GA4のレポートをより正確にする！
✅ 「プレビューモード」でテストし、問題なければ公開する！

これを活用すれば、 - 「SPAサイトのページビューが記録されない問題を解決」 - 「正確なユーザー行動データをGA4で分析」 - 「広告最適化のための正しいデータ計測」

が可能になります！

■ 明日の予告 〜A/Bテストの計測設定〜

次回は、「A/Bテストの計測設定」 を学びます！ - 「どのバリエーションが成果が高いのか？」 - 「GTMでA/Bテストのタグを適用する方法」

など、テストと計測を連携させる方法を解説します！