TableauでWebパフォーマンスを可視化してみる
こんにちは。システム本部の苅部です。
BIツールの評価にあたって、WebpageTestとGoogleAnalyticsのそれぞれのデータを利用してTableauで可視化のイメージを掴んでみましたので、 一連の流れを備忘録として残しておきます。
その1 WebPagetestのデータを可視化する
WebPagetestで定点観測しているデータについて、Tableauを使って時系列データおよび散布図として可視化していきます。
WebPagetestとGoogleSpreadSheetの連携については以前の記事をご確認ください。
・DataStudioとGASでWebPagetestの計測結果をグラフ化する
1. GoogleSpreadSheetを選択
まずデータソースとしてGoogleSpreadSheetを選択します。
Google側の認可画面でGoogleDriveへのアクセスを許可し、任意のシートを選択します。
以下のような形でインポートできました。
日付が文字列として認識されているので、時系列データとして扱えるように日付型に変換しておきます。
2. ざっくり下地を作成
次に新規のシートを作成してグラフを可視化を進めていきます。
SpreadSheetのグラフ機能やDataStudioと比較するとTableauは軽快で使いやすく、直感的に操作をしても見た目が整います。
また、データソースがデータウェアハウスや数百万行のCSVファイルといった巨大な場合でも、予め抽出しておくことで高速なクエリエンジン(Hyper)を利用して非常に早く処理することができます。
3. 微調整して完成
必要に応じてNULLの除去や目盛りの最大値の調整等をすれば完成です。
TimeToFirstByte,DOMInteractive,FirstPaint,onLoad,SpeedIndexの指標を、時系列として綺麗に可視化できました。
TableauOnline/Serverであればデータ主導アラートを使って「特定の閾値を超えたらアラートメールを送信」といった設定もできるはずです。
FirstPaintを説明変数、SpeedIndexを目的変数として散布図も作成してみました。
ツールヒントにはR2乗値とp値が表示されますので、回帰式の当てはまりの良さを把握することができます。
その2 GoogleAnalyticsのデータを地図に重ねる
GoogleAnalyticsの速度指標を使って地域ごとのWebパフォーマンスをTableauでマッピングしていきます。
1. GoogleAnalyticsを選択
データソースとしてGoogleAnalyticsを選択します。
Google側の認可画面でGoogleAnalyticsへのアクセスを許可し、任意のシートを選択します。
今回は以下のような形でGoogleAnalyticsのCoreReportingAPIからデータを取得しました。
2. 地域名を正規化して地理データへ
GoogleAnalyticsの地域情報には[Kanagawa Prefecture]といった形で[Prefecture]の文字列が入っていることがあるので、Tableauの計算フィールドを使って正規化しておきます。
if CONTAINS([地域],"Prefecture") = FALSE then
[地域]
ELSE
REGEXP_REPLACE([地域],"Prefecture","")
END※地域ディメンションの"Prefecture"の文字列を取り除いています。
そして、このディメンションは都道府県の地理データとして認識させたいので、[地理的役割]から[都道府県/州]を選んでおきます。
3. データを地図と重ねる
さきほど計算フィールドで作成したディメンションと任意のメジャーを選択して記号マップを作成します。
今回はディメンションとしてページ読み込み時間(onLoad)を選択しました。
4. 配色を変化させる
全て同じ色で地域ごとの指標の差が分かりづらいので、メジャーの値を利用して色を変化させます。
5. 指標を中央値に変更する
記号の色も大きさも指標が[合計値]となっているため、それぞれ[中央値]に変更します。
※合計値の場合、単純にレコード数の多い都道府県が大きくなってしまいます。
6. 色を変更する
青のグラデーションでは指標の良し悪しがわからないため、赤から緑の分化に変更しさらに反転をかけておきます。
onLoadの指標が芳しくない沖縄/東北が赤い丸となり、より目立つようになりました。
ということで、まずは1つの目のシートの完成です。
8. ダッシュボードの作成
さらに同じ流れで合計4つのシートを作成し、1つのダッシュボードにまとめて一覧表示させました。
残り3つのシートは、それぞれDOMInteractive/onLoad/DOMContentLoaded/サーバ応答としています。
沖縄県はどの値も悪そうで、北陸や東北の一部の地域も芳しくありません。
直接的な原因は分かりませんが、各Webサーバとの物理的な距離とそれによるレイテンシ影響によって地理的に不利ではありそうです。
GoogleAnalyticsから取得できる指標は、日本中からアクセスしている実際のユーザーの値ですので、地図と指標を重ねることで地域ごとのパフォーマンスを可視化することができました。
備考
- レイテンシ以外にも[地域ごとの携帯端末の利用状況の違い]だったり[WiFi普及状況]といった他の要因もあると思います。
- モバイルネットワークでのIPアドレス地域判定の精度は高くありません。通信事業者によっては東京にいても大阪判定されるケースがあります。
- GoogleAnalyticsのCoreReportingAPIは、セグメントの掛け合わせ方によっては精度が落ちることがあります。
おまけ
TableauはMapboxとの連携も可能です。
MapboxのAPIキーをTableau側で入力することで、任意のマップを使うこともできます。
おわりに
WebPagetestやGoogleAnalyticsのデータを使って、Tableauの基本的な操作感を掴むことができました。
可視化という意味では、他BIツールであったり、GoogleAnalytics、GoogleSpreadSheet、Excel、DataStudio、Re:Dash、Grafana、R、Pythonなども選択肢としてありますが、[個人個人が探索的に分析してデータを理解していく]という目的においては、機能面と操作性でTableauがバランスが取れていると思いました。
TableauはUIが直感的でデータの抽出速度も速いため可視化のコストが低い印象です。
今回TableauDesktopで完結させていますが、TableauOnline/Serverでブラウザ上で分析できる環境を整えると、データが民主化され一歩進んだ分析が可能になると思います。
参考URL
