react GTM でページ遷移を Google Analytics 記録する方法


react 等を使用した SPA では、実際にページ遷移が発生しているわけではないため、ブラウザでのページ遷移が発生する時のように、Google Analytics に記録ができません。
どのように記録するのか、調べて実装してみました。
結果を以下に記載します。


参考


GTM からは、履歴の変更をトリガーにPageView イベントを Google Analytics に送付する

Angular2(SPA)に、Google Tag Manager 経由でGoogle Analyticsを設定する方法 | 株式会社エムアイ・ラボ の同様の方法で上手くいきそうに思いましたので、こちらを試してみます。


Google Analytics でのブラウザの進む戻るの扱い

イベントの発行タイミングは厳密には異なるので、通常の画面遷移時と、進む戻る クリック時の PageView の記録のされ方について気になったのですが、以下を読む限り記録されそうです。

ただ、firefox の BFCache の動作と、Google analtics のタグの記載方法によっては、戻るのページビューが記録されない場合もあるようにも思います。1 * ブラウザバックするとボタンが反応しなくなる問題 - Qiita * BFCacheを有効化。

ただ、基本的には記録されるので、履歴変更をトリガーにしても、個人的な要件は満たしているので、問題はないのかなと思いました。


GTMの設定

Google Anlaytics タグに以下2つのトリガーを定義しました。
"トリガー"

  • ページビュー のトリガー
    ページ表示時に、タグを起動するためのトリガーです。
    初回表示時、ページ更新時はこのトリガーで Pageview を記録します。

  • 履歴の変更 のトリガー
    ページ表示後の画面遷移時は、このトリガーで Pageview を記録します。

この設定で、Pageview がうまく取得できるようになりました。
以上です。


  1. 試せてないので推測です。 

コメント