Google Analytics 接続回線の情報をカスタムディメンションに設定する

ブラウザ JavaScript API で NetworkInformation API という ネットワーク通信の状況を取得できる API があります。

現在ステータスは Draft で、Chrome で動作します。
回線の状況を判定し、WI-FI 環境下ではサイズの大きい コンテンツ を取得し、3G 回線下ではサイズの小さい画像を使用する といった使い方が想定される API で、回線のデータ転送量も取得することができます。

本筋から外れる使い方かもしれませんが、Google Analytics 上で取得できる サイトの速度 や、Webpagetest の結果との関係を見るとおもしろそうでしたので、Google Analytics のカスタムディメンションに設定してみました。
設定内容を記載します。

Chrome での API 実行、他ブラウザでのサポート状況について

Network Information API Sample に Chrome での API 実行例があります。

console.log('type: ' + navigator.connection.type);
console.log('downlink: ' + navigator.connection.downlink + 'Mb/s');
console.log('rtt: ' + navigator.connection.rtt + 'ms');
console.log('downlinkMax: ' + navigator.connection.downlinkMax + 'Mb/s');
console.log('effectiveType: ' + navigator.connection.effectiveType);
console.log('saveData: ' + navigator.connection.saveData);

-------------------------------------
VM157:1 type: undefined
VM157:2 downlink: 7.25Mb/s
VM157:3 rtt: 100ms
VM157:4 downlinkMax: undefinedMb/s
VM157:5 effectiveType: 4g
VM157:6 saveData: false
-------------------------------------

Network Information API - Web APIs | MDN に Firefox、Safari、Chrome で動作しそうな Example が記載されています。

var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

console.log('type: ' + connection.type);
console.log('downlink: ' + connection.downlink + 'Mb/s');
console.log('rtt: ' + connection.rtt + 'ms');
console.log('downlinkMax: ' + connection.downlinkMax + 'Mb/s');
console.log('effectiveType: ' + connection.effectiveType);
console.log('saveData: ' + connection.saveData);

--------------------------------------
VM114:3 type: undefined
VM114:4 downlink: 5.6Mb/s
VM114:5 rtt: 100ms
VM114:6 downlinkMax: undefinedMb/s
VM114:7 effectiveType: 4g
VM114:8 saveData: false
--------------------------------------

ProductName: Mac OS X ProductVersion: 10.13.6 BuildVersion: 17G65で、Safari バージョン11.1.2 (13605.3.8)、Firefox 62.0 ですが、どちらのブラウザでも動作しませんでした。
現状だと、MAC では Chrome でのみ動作する API かと思われます。

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

GTM と、 Google Analytics 上での設定を行います。

GTM カスタム JavaScript 変数の作成

以下の変数を作成します。 navigator.connection を各変数が参照します。

• navigator.connection
  

  function() {
      var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
     return connection;
  }
  

• connection.downlink
  

  function () {
      var connection = {{navigator.connection}};
     if (! connection) {
          return "UNSUPPORTED";
     }
     if (!connection.downlink) {
          return "UNSUPPORTED";
     }
     return connection.downlink;
  }
  

• connection.downlinkMax
  

  function () {
     var connection = {{navigator.connection}}
      if (!connection) {
          return "UNSUPPORTED";
      }
      if(!connection.downlinkMax) {
          return "UNSUPPORTED";
     }
     return connection.downlinkMax;
  }
  

• connection.effectiveType
  

  function () {
     var connection = {{navigator.connection}}
      if (!connection) {
          return "UNSUPPORTED";
      }
      if(!connection.effectiveType) {
          return "UNSUPPORTED";
     }
     return connection.effectiveType;
  }
  

• connection.rtt
  

  function () {
     var connection = {{navigator.connection}}
      if (!connection) {
          return "UNSUPPORTED";
      }
      if(!connection.rtt) {
          return "UNSUPPORTED";
     }
     return connection.rtt;
  }
  

• connection.saveData
  戻り値が、Boolean なので、未定義の判定は、typeof を使います。
  

  function () {
     var connection = {{navigator.connection}}
     if (!connection) {
          return "UNSUPPORTED";
     }
     if (typeof connection.saveData === "undefined") {
          return "UNSUPPORTED";
     }
     return connection.saveData;
  }
  

• connection.type
  

  function () {
     var connection = {{navigator.connection}}
      if (!connection) {
          return "UNSUPPORTED";
      }
      if(!connection.type) {
          return "UNSUPPORTED";
     }
     return connection.type;
  }
  

Google Analytics 上で カスタムディメンションを作成する

以下、カスタムディメンションを追加しました。
無料版のディメンション数の上限が 20 なのでそろそろ使い尽くします。

GTM Google Analytics タグの設定

以下、カスタムディメンションを設定しました。

AMP での タグの設定

現在 (2018/09/08) は、Network Information API の値を取得可能な、AMP 変数は存在しません。

実行結果、使用用途

GTM デバッグした結果、使用用途について記載します。

実行結果

Chrome で GTM デバッグした結果です。
開発コンソールでの結果の通り、downlink、rtt、effectiveType、saveData について記録されています。

使用用途

Google Analytics のカスタムディメンションに、Network Information API の値を設定することができました。
設定した値を何に使うのか? 考えられる用途を記載します。

• Network Information API 自体の使用用途
  JavaScript で navigator.connection を使ってネットワーク情報を取得する に記載されている説明がわかりやすいです。
  以下が使用用途として考えられます。

  1. 接続速度でコンテンツを切り替える。
  2. 従量課金のアラートに使用する。
  3. saveData が true であれば、回線速度問わず、軽いコンテンツへ切り替える。

• Google Analytics 上で Network Information API の値を確認する意味

  1. Network Infomation API による判定実装の要否を判断する、統計情報として設定する。
  2. 回線速度と、ページ滞在時間、直帰率の関係を見る。
     これも、実装要否の判断材料になるのかなと思います。
  3. 接続地域と回線速度の関係を見る。
     Push したい地域の回線が遅い場合、CDN 導入 や 遅い地域向けのリージョンでサーバを契約する材料に使えるかと思います。

• 現状は、connection.downlinkMax、connection.type は取得できないので設定不要
  一律 カスタムディメンションに設定しましたが、現状取得できないので、ディメンションの無駄です。
  実際仕事で使う場合には、無料版を使っている場合は設定しないほうがいいかと思います。

参考

以下、参考になりました。

• Network Information API
• Network Information API - Web APIs | MDN
• JavaScript で navigator.connection を使ってネットワーク情報を取得する