GTMでSPAのページビューを正しく計測する方法｜履歴変更トリガーの重複発火を防ぐ｜未経験から100日後にGTMのプロになる話【Day 30】

SPA（シングルページアプリケーション）のサイトでは、画面は切り替わってもブラウザ的には「同じページ」のままなので、GTMが標準で持つ「ページビュー」トリガー（ページの読み込み時に発火）は反応しません。この対策として履歴変更トリガーを使いますが、実装時に見落としがちな重複発火の問題があります。

履歴変更トリガーを作成する

1. 「トリガー」→「新規」→種類は「履歴の変更」
2. 「このトリガーの発火を」は「すべての履歴変更」のまま
3. トリガー名を付けて保存

この履歴変更トリガーは、ブラウザのpushState・replaceState・popstate・URLのハッシュ変更などを検知します。逆に言えば、使っているフレームワークやライブラリが実際にこれらのHistory APIを呼んでいない場合は、そもそも発火しません。「履歴変更トリガーを設定したのにタグが発火しない」というときは、まず開発者に「ルーティングでpushState等を使っているか」を確認してもらってください。

1回の画面遷移で複数回発火することがある

ここが今日一番の実務ポイントです。フレームワークによっては、1回のユーザー操作による画面遷移の中で、replaceStateとpushStateが立て続けに呼ばれたり、クエリパラメータの更新だけで別途history系イベントが発生したりすることがあります。履歴変更トリガーをそのままGA4の仮想ページビュータグに直結すると、1回の遷移でpage_viewが2回、3回と重複して送られてしまうことがあります。

これを防ぐ定石は、「直前に送信したページパスを覚えておいて、実際にパスが変わったときだけ発火させる」条件を加えることです。カスタムJavaScript変数で、直前のパスを内部変数に保持しつつ現在のパスと比較し、変化があった場合だけtrueを返すようにし、この変数をトリガーの条件に追加します。これにより、同じページ内での些末な履歴イベントによる重複計測を防げます。

GA4の仮想ページビューを設定する

「Google アナリティクス: GA4 イベント」タグでイベント名をpage_viewにし、page_location={{Page URL}}、page_referrer={{Referrer}}を設定して、重複防止条件を付けた履歴変更トリガーに紐付けます。

ページタイトルの更新も忘れずに

SPAではdocument.titleが更新されないまま画面だけ切り替わることがあるので、開発者にルーティングのタイミングでタイトルを書き換えてもらうか、それが難しい場合はカスタムJavaScript変数でdocument.titleを取得し、page_titleパラメータとして送信します。ただしこれは「開発側でタイトルをきちんと更新する」のが本来あるべき姿で、GTM側での取得は次善策だと理解しておいてください。

今日のまとめ

履歴変更トリガーはSPA計測の基本ですが、フレームワークの実装次第で複数回発火することがある点を必ず考慮してください。「パスが実際に変わったときだけ発火」という条件を挟むひと手間が、正確なページビュー数を保つ鍵になります。次回は、A/Bテストの計測設定を扱います。