Google Analytics の カスタムディメンションに、ブラウザ の戻る、進む、リロードを記録する

Google Analytics の ページビュー の記録では、通常のリンククリックで表示したのか、ブラウザで URL を入力して表示したのか、PWA のホームボタンをクリックして表示したのか、リロードして表示したのか、ただ記録していただけではなかなか区別つかないという問題があります。

Google Analytics の機能を使って、キャンペーンパラメータをつけて区別したり、ページ表示後の遷移であれば、イベントとして記録したり、ユーザの動向を記録する方法は幾つかあると思いますが、戻ると進む、リロードの動作は、ページの URL だけでは判断ができません。

何か方法はないのか調べたところ、Track Browsing Behavior In Google Analytics | Simo Ahava’s blog に、ブラウザの戻る、進む、リロードを カスタムディメンションに設定する方法が記載されており、これを参考に実装してみましたので、その結果を記載します。

Google Analytics の カスタムディメンションに 戻る、進む、リロードを記録するメリット、デメリット

まず、Google Analytics の カスタムディメンションに 戻る、進む、リロードを記録するメリットとデメリットを記載します。

• メリット

  • ページの操作を可視化できる。
    一覧から詳細ページに遷移して、一覧ページに戻る挙動はブラウザバックを使っている人が多い。ということがわかります。
    UI 上 ナビゲーションは置いているけど、機能していなくて、実はみんなブラウザの戻るで戻っているから、UI 改善しよう。
    というデータはとれるかもしれません。

• デメリット

  • パフォーマンスに影響がある。
    JavaScript の function 呼び出しが絡むので遅くなります。

  • 可視化したところで、何もできないかもしれない。
    UI はガイドラインで決まっていたりして、ここに「戻る」ボタンは配置しておけ。という命令があるかもしれません。
    「現状こうなっていて、記録した結果としてこうなってほしい」が、「そうはならなかった」とか、ある程度仮説がないと記録しても意味がないかもしれません。

戻る 進むは区別しないで記録する

Track Browsing Behavior In Google Analytics | Simo Ahava’s blog では、戻る、進むを PerformanceNavigation API と localstorage を使って、判断しています。
どちらか判断できるのは、素晴らしいのですが、若干実装が込み入っているので、PerformanceNavigation API のみで判断可能な範囲で実装することにしました。
PerformanceNavigation API では、戻る、進むは丸められて、戻る<wbr>進むの<wbr>どちらか という状態で記録されます。

追加するカスタムディメンション

以下の2つを追加します。

• redirectCount
  performance.navigation.redirectCount で取得できる リダイレクト回数を設定します。

• type
  performance.navigation.type で取得できる値を設定します。
  取りうる値は、0、1、2、255 で、この値をNavigation Timing API - Web API インターフェイス | MDN 記載の定数値に変換します。

どちらも対応していないブラウザがあります。対応していないブラウザの場合は、UNSUPPORTED をディメンションの値として設定します。

GTM、Google Analytics の設定

留意事項

performance.navigation.type についてですが、以下 AMP 版 と通常版の設定を行うと、設定されるカスタムディメンションの値が通常版は文字列、AMP 版は、数値が設定されます。
AMP は JavaScirpt による値の導出が現状はできないので、統一したい場合は 通常版のほうを AMP の値を合わせることをお勧めします。

GTM に JavaScript 変数の設定をする。

GTM に以下の変数を設定します。

• window.performance.navigation.redirectCount
  

  function () {
      if (!window.performance) return "UNSUPPORTED";
      if (!window.performance.navigation) return "UNSUPPORTED";
      if (window.performance.navigation.redirectCount !=  0 && !window.performance.navigation.redirectCount) return "UNSUPPORTED";
     return window.performance.navigation.redirectCount;
  }
  

• performance.navigation.type
  

  function () {
    if (!window.performance) return "UNSUPPORTED";
    if (!window.performance.navigation) return "UNSUPPORTED";
    var type = performance.navigation.type;
    switch(type) {
      case 0:
        return "NVIGATE";
        break;
      case 1:
        return "RELOAD";
        break;
      case 2:
        return "BACK_FORWARD";
        break;
      case 255:
        return "UNDEFINED";
        break;
      default:
        return "UNSUPPORTED";
        break;
    }
    return "UNSUPPORTED";
  }
  

カスタムディメンションの設定

カスタムディメンションとして、追加した変数を設定します。

AMP GTM の設定

Performance に、performance.navigation の使用可能な変数の記載があり、${navType} 、 ${navRedirectCount} が取得できそうです。

この２つの変数を定義して、タグにカスタムディメンションとして設定します。

上記、定義した変数をタグに設定します。

これで、AMP の GTM 設定は完了です。

参考

設定時、以下の記事を参考にしました。

• Navigation Timing APIの仕様
• PerformanceNavigation.type - Web APIs | MDN
• Track Browsing Behavior In Google Analytics | Simo Ahava’s blog
• Navigation Timing API - Web API インターフェイス | MDN

以上です。