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

React 等を使用した SPA では、実際にページ遷移が発生しているわけではないため、ブラウザでのページ遷移が発生する時のように、Google Analytics に記録ができません。

どのように記録するのか、調べて実装してみました。
React で、Reactt-Helmet を使わない通常時と、React-Helmet を使っている場合で実装方法異なります。
結果を以下に記載します。

参考

• Angular2（SPA）に、Google Tag Manager 経由でGoogle Analyticsを設定する方法 | 株式会社エムアイ・ラボ

• Analytics with React-Redux SPAs and Google Tag Manager — Part 2
  GTM 経由 で MixPanel の Tracking 設定を 行っている例になります。

• 【GAトラッキング】React+Reduxでページごとに統計情報を送信する - Qiita
  こちらは、GTM を使用しないで、Pageview イベントを送信する方法かと思います。

• Google Tag Manager and React/Redux データレイヤ変数をリセットする? おそらくカスタムディメンションを送付する際の実装かと思います。

• SPA(React)にGoogleAnalyticsを導入する際のパターン - Qiita
  Reactと GoogleAnalytics を使用する際の注意点が記載されています。

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

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

Google Analytics でのブラウザの進む、戻る<wbr>の扱い

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

• How does history-back navigation influence analytics statistics? - Webmasters Stack Exchange

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

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

GTMの設定

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

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

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

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

React-Helmet を使っている場合、Title が誤って記録されることがある

Google Analytics を後日確認したところ、ページパス と ページタイトル が異なって記録される場合がありました。
気になったので調べたところ以下の記事が見つかりました。

• reactjs - React SPA - GTM Analytics React-Helmet Previous Page Title - Stack Overflow

Google Tag Manager ではイベントで発火させて、JavaScript の実装で ページタイトルを書き換えた後に、イベントを発火させる方法になります。

関連するIssue、 Pull Request

上記の Stackoverflow の 記事の実装が適切かというと、別のやり方がありそうにも思いましたので関連する Issue、Pull Request へのリンクを記載しておきます。

• [gatsby-plugin-google-gtag]: Page and Title do not match in Analytics Dashboard · Issue #11592 · gatsbyjs/gatsby
• Title update lag · Issue #189 · nfl/react-helmet
• fix(gatsby-plugin-google-gtag): page view and title mismatch by JacobBlomgren · Pull Request #12033 · gatsbyjs/gatsby

React-Helmet 使用時のGTMの設定

Title not updating after history change - タグマネージャ ヘルプ を参考に以下のように実装しました。

1. 全ての履歴の変更トリガーで、fireDelayedHistoryChange カスタムHTMLタグを発火させる。

   • HTMLタグ
     

   • HTMLタグの内容
     setTimeout関数で、GTMイベントのpushを少し遅延させます。
     これで、React-Helmet でのTitleタグの変更後に、GTMイベントがpushされるようになります。
     

         <script>
             window.setTimeout(function() {
             window.dataLayer = window.dataLayer || [];
             window.dataLayer.push({
             event: 'delayedHistoryChange'
             });
             }, 100);
         </script>
     

2. delayedHistoryChange イベントトリガーを作成する。
   

3. ページビュータグと、delayedHistoryChange イベントトリガー を紐づける。
   

上記設定で、ページタイトルが正しく記録されるようになります。

以上です。