mPulse Deployment Guide Complete - JP 140724

SOASTA mPulse
デプロイメントガイド
2014/7/24
SOASTA Proprietary and Confidential
9/8/14
Table of Contents
概要 .................................................................................................................................... 1 キーとなる技術要素 ............................................................................................................. 1 キーとなるデプロイメント項目 ......................................................................................... 1 デフォルトで収集されるデータ ......................................................................................... 1 mPulse テクノロジーに関する議論 ............................................................................... 2 テクノロジーの説明 ............................................................................................................. 2 収集されるデータ – デフォルト ..................................................................................... 4 デプロイ ............................................................................................................................ 5 Web デプロイメント –詳細 ................................................................................................. 5 タグ対象 ................................................................................................................................ 6 タグのカスタマイズ ............................................................................................................. 8 ページグループ .................................................................................................................. 8 カスタムタイマー ............................................................................................................... 8 Custom Metrics .................................................................................................................. 8 タグのカスタマイズ – 詳細 ................................................................................................. 9 ページグループ .................................................................................................................. 9 カスタムタイマー ............................................................................................................. 11 カスタムトリック ............................................................................................................. 12 mPulse JavaScript 例 ..................................................................................................... 14 About SOASTA, Inc. ........................................................................................................ 15 SOASTA Proprietary and Confidential
9/8/14
概要
キーとなる技術要素
•
•
•
•
mPulse には３つの大切な技術要素があります。
o HTML ページに埋め込まれる JavaScript コード
o SOASTA の CDN からダウンロードされる Boomerang.js ファイル。このファ
イルにはブラウザーからパフォーマンス情報を取得するための主要なコンテン
ツが含まれています。
o SOASTA の CDN からダウンロードされる config.js ファイル。このファイルに
は、ページグループ、カスタムタイマー、カスタムメトリックといった、ユー
ザー固有の設定情報が含まれています。
mPulse では API キー情報とサイトのホスト名を照合することでセキュリティを担保
します。
mPulse のコンポーネントおよびパフォーマンス情報は、直接エンドユーザーのブラ
ウザーから、80 番ないし 443 番の TCP ポートを使った通常の HTTPS GET リク
エストで通信されます。
全ての mPulse 関連の通信は、非同期処理にて行われるため、サイト本来のコンテン
ツのダウンロードやレンダリング処理をブロックすることはありません。
キーとなるデプロイメント項目
•
•
•
•
mPulse の JavaScript は、HTML ページの冒頭部分に埋め込むことによって最大の効
果をもたらします。
エンドユーザーのブラウザーは、Boomerang.js ならびに config.js を HTTP 経由で
SOASTA の CDN からダウンロードする必要があります。
エンドユーザーのブラウザーは、HTTP 経由でクラウド上の mPulse データコレクタ
ーにビーコンを送信できる必要があります。
ページグループ、カスタムタイマー、カスタムメトリックは、デフォルトで収集され
る mPulse データに追加することができます。
デフォルトで収集されるデータ
•
•
•
•
•
•
•
•
Page Load – ページ遷移の開始からページ表示完了までの全てを含んだページロード
時間。
DNS Resolution – DNS を参照してホスト名から IP アドレスを解決するのにかかった
時間。
TCP Connection – TCP セッションの開設にかかった時間。
SSL Handshake – SSL セッションのハンドシェイクにかかった時間。
Back-End Time – 最初の応答パケットを受信するまでにかかった時間。
Front-End Time – パケットを受け取ってからレンダリングが完了するまでにブラウザ
ー側でかかった時間。
DOM Loading – DOM Loading タイマーイベントまでの時間。このタイミングですべ
てのウィンドウフレーム、オブジェクト、イメージのロードが完了。
DOM Ready – DOM Ready タイマーイベントまでの時間。このタイミングでブラウザ
ーが HTML ドキュメント内のすべての DOM 構造の解析を完了。
SOASTA Proprietary and Confidential
1
9/8/14
mPulse テクノロジーに関する議論
テクノロジーの説明
SOASTA mPulse は、エンドユーザーのブラウザー上に既に実装されているテクノロ
ジーを利用して、エンドユーザーの Web サイトパフォーマンスに対する体験を収集
する、JavaScript ベースのリアルユーザーメジャーメントシステムです。
収集されたデータは、クラウド上のアプリケーションに安全に蓄積され、PC ブラウ
ザーやモバイルアプリを使ってサイトにアクセスする全エンドユーザーに関する情報
を集積してリアルタイムに表示します。
mPulse パフォーマンスデータの収集は安全に行われ、エンドユーザーの個人データ
や、財務、業務に関連したデータは対象とされません。
mPulse のデータ収集テクノロジーは以下の３つの技術によって支えられています。
1. JavaScript コードパフォーマンスデータを収集したいページに、mPulse が生
成した JavaScript コードを埋め込みます。最大の効果を得るためには、コード
は HEAD タグ内のできる限り先頭部分に配置する必要があります。
2. Boomerang ライブラリこのファイルはパフォーマンスデータの収集に当たり
中心的な役割を果たします。SOASTA の CDN からダウンロードされます。
3. Configure.js このファイルも SOASTA CDN かダウンロードされ、ページ
グループ、カスタムタイマー、カスタムメトリックに関するお客様の設
定に関する情報を保持します。
CDN からダウンロードされるコードの総量は 10K バイト以下です。
エンドユーザーからのデータ収集を安全かつ確実に行うために、以下の手法が使われ
ます。
1. Boomerang と config.js は、正しい API キーとホスト名の組み合わせによるリ
クエストに対してのみ、CDN からダウンロードされます。API キーとホスト名
がマッチしない場合には一切ダウンロードが行われません。
2. 万一エンドユーザーのブラウザーから送信されたビーコンに指定されている
API キーとホスト名の組み合わせが正しくない場合には、ビーコンは破棄され
ます。
SOASTA Proprietary and Confidential
2
9/8/14
Figure 1 mPulse JavaScript コードに含まれるドメイン API キーの例
Figure 2 mPulse ファイルのダウンロード
データはエンドユーザーのブラウザーから直接収集されるため、エンドユーザーのブ
ラウザーは、80 番ポートを使って、CDN から mPulse 関連のファイルをダウンロー
ドでき、かつ mPulse コレクターに対してビーコンを送信できなければなりません。
データの収集は、非同期の iframe を使って行われ、ビーコンはページの onLoad 後に
送信されます。これらの非同期処理は、Web で一般的に使われている技術に基づき、
mPulse のアーキテクトである Philip Tellis によって実装されました。詳細に関しては
http://calendar.perfplanet.com/2012/the-non-blocking-script-loader-pattern/ を参照
してください。
Boomerang JavaScript ファイルは、ブラウザーのローカルキャシュに７日間キャッ
シュされます。エンドユーザーの設定情報を含む config.js ファイルは、５分間キャッ
シュされます。これらのファイルのキャッシュが有効な間は、CDN からのダウンロ
ードを行うことなく参照することが可能です。
mPulse に必要なファイルがダウンロードされ、ブラウザーで onLoad イベントが発
生すると、mPulse は収集したパフォーマンスデータを HTTP Get リクエストを使っ
て mPulse コレクターに送信します。これをビーコンと呼びます。mPulse コレクタ
ーでは、リアルタイムに mPulse ダッシュボードに表示するため、ビーコンを集積し
ます。ビーコンが mPulse コレクターに到着後、3 から 6 秒でダッシュボードに表示
されます。
SOASTA Proprietary and Confidential
3
9/8/14
収集されるデータ – デフォルト
mPulse は、ほとんどのモダンなブラウザーで利用可能な Navigation Timing API を
使ってパフォーマンス情報を取得します。Navigation Timing API がサポートしてい
ないパフォーマンス情報に関しては、JavaScript 変数を使って実装することができま
す。
デフォルトで、以下のパフォーマンス情報を、Navigation Timing API から取得します。
•
•
•
•
•
•
•
•
Page Load – ページ遷移の開始からページ表示完了までの全てを含んだページ
ロード時間。
DNS Resolution – DNS を参照してホスト名から IP アドレスを解決するのにか
かった時間。
TCP Connection – TCP セッションの開設にかかった時間。
SSL Handshake – SSL セッションのハンドシェイクにかかった時間。
Back-End Time – 最初の応答パケットを受信するまでにかかった時間。
Front-End Time – パケットを受け取ってからレンダリングが完了するまでに
ブラウザー側でかかった時間。
DOM Loading – DOM Loading タイマーイベントまでの時間。このタイミング
ですべてのウィンドウフレーム、オブジェクト、イメージのロードが完了。
DOM Ready – DOM Ready タイマーイベントまでの時間。このタイミングで
ブラウザーが HTML ドキュメント内のすべての DOM 構造の解析を完了。
mPulse は、更に、以下の情報を収集します。
•
•
•
•
•
•
Visitor Browser
Visitor Location
Bounce Rate
Bytes Transferred until Page Onload
Visitor Operating System
Visitor IP（データとして収集しますが、UI 上には表示しません。）
SOASTA Proprietary and Confidential
4
9/8/14
デプロイ
Web デプロイメント –詳細
mPulse の JavaScript を Web サイトに埋め込むには、大きく２つの方法があります。
•
HTML 内の最初の＜HEAD＞タグになるべく近い場所に直接埋め込みます。こ
の方法の場合、通常手作業で各ページに JavaScript を差し込みます。
•
ページテンプレートに JavaScript を埋め込むことで、最終的に生成される
HTML ページに JavaScript を埋め込みます。
いずれの方法でも、差し込まれた JavaScript コードは、エンドユーザーがアクセスす
る HTML ページ内のコンテンツとしてダウンロードされます。
Figure 3 mPulse スクリプトコードを含んだ Analytics INCLUDE ファイル
Figure 4 HTML ドキュメントに差し込まれた JavaScript コード例
SOASTA Proprietary and Confidential
5
9/8/14
上記のいずれかの方法が一般的に使われる方法ですが、他にも以下のような方法があ
ります。
•
タグマネージメントサービスの利用：タグマネージメントサービスを利用すること
で、タグの管理を一箇所に統合することができます。ただし、mPulse をサポ
ートしているタグマネージメントサービスもあれば、mPulse をサポートして
いないタグマネージメントサービスもあるので、利用に当たっては注意が必要
です。最も重要な確認ポイントは、利用を検討しているタグマネージメントサ
ービスが、HTML のどの位置にタグを差し込むことができるかどうか、という
点です。onLoad イベントの後にタグを差し込むタグマネージメントサービス
は mPulse のタグ管理には使えません。
•
ファイアウォールもしくはロードバランサーによる HTML のリライト：多くのネットワ
ーク機器は、通過する HTTP プロトコルに対して、HTML コンテンツを書き
換える機能をサポートしています。お客様のネットワーク環境で、このような
機器が使われている場合、その機能を利用して mPulse のタグを差し込む方法
を検討することができます。
•
外部 JavaScript ファイル：複数の JavaScript を１つのファイルにまとめて管
理している場合、mPulse の JavaScript も同じファイルに取り込むことで、
HTML ページに差し込むことができます。しかし、この方法では、
JavaScript ファイルの読み込みがブラウザーのキャッシュ制御の影響を受けた
り、OnLoad イベントの後に JavaScript が読み込まれたりするリスクが高い
ため、SOASTA では推奨していません。
このように、mPulse タグの埋め込みには色々な方法が考えられますが、最も安全か
つ効果的なのは、ページテンプレートを使って、HTML ページ内の<HEAD>タグの先
頭にタグを埋め込む方法になります。可能な限りこの方法を採用するようにしてくだ
さい。
タグ対象
mPulse のタグはすべての Web アプリケーションおよびモバイル Web アプリケーシ
ョンのコンテンツを対象にしています。
エンドユーザーのすべての UX を測定するには、エンドユーザーがアクセスする可能
性があるすべてのページにタグを埋め込む必要があります。これにより、特定の一部
サンプリングに基づく情報ではなく、すべてのユーザーのすべての動向に基づく情報
を収集することができるようになります。
一日に百万ページビューがあるサイトを例に考えてみましょう。もし、サンプリング
レートを 1%に設定した場合、１時間当たりのサンプリング数は 400 件程度になりま
す。ここから更にブラウザーやその他のユーザー特性によって絞り込んだ場合、ユー
ザー動向の傾向を分析するのに十分なデータが収集できているとは言えない状況にな
ります。
SOASTA Proprietary and Confidential
6
9/8/14
Figure 5 ユーザー特性による絞り込み結果の違い：サンプリングレート 1%（右）と 100%（左）
このように、サンプリングに基づく情報収集は、時として分析結果に不正確な結果を
もたらすリスクがあるため、mPulse を使った情報収集ではすべてのページを対象に
タグ付けすることを推奨しています。
SOASTA Proprietary and Confidential
7
9/8/14
タグのカスタマイズ
ページグループ
•
mPulse はページグループという概念を使ってパフォーマンスデータを論理的
なユニットに分割して収集します。
(http://cloudlink.soasta.com/t5/Knowledge-Base/Configuring-mPulse-to-usePage-Groups/ba-p/8608).
o ページグループは、mPulse の Web App 設定ダイアログの Page
Groups タブを使って設定します。
o すでにサイトを論理的なユニットに分割して管理していれば、それと同
じルールにしたがって mPulse のページグループを定義します。
o mPulse のページグループ名は、URL パターンもしくはページ内の
JavaScript 変数を使って決定されます。
カスタムタイマー
•
デフォルトで収集されるもの以上のパフォーマンス情報が必要な場合、カスタ
ムタイマーを作成することで対応します。
(http://cloudlink.soasta.com/t5/Knowledge-Base/mPulse-Custom-andNavigation-Timers/ba-p/17071).
o カスタムタイマーは、mPulse の Web App 設定ダイアログの Custom
Timer タブを使って設定します。
o mPulse の最初の導入からカスタムタイマーが必要か、それとも最初の
導入以降に必要なタイマーを検討するかを決めましょう。
o 一部のページコンテンツ、サードパーティーのコード、ページロードの
特定のタイミングなどに対してカスタムタイマーを設定することができ
ます。
o カスタムタイマーは、JavaScript 変数、ナビゲーションタイミングタイ
マー、リソースタイミングタイマー、ユーザータイミングタイマーを使
って作成することができます。
Custom Metrics
•
パフォーマンスデータの他に、コンバージョンレート、カート内のアイテム数、
購入金額などのビジネスデータを取得して、パフォーマンスとの相関関係を調
べることができます。このようなビジネスデータをカスタムメトリックといい
ます。(http://cloudlink.soasta.com/t5/Knowledge-Base/mPulse-CustomMetrics/ba-p/17067).
o カスタムメトリックは、mPulse の Web App 設定ダイアログの
Custom Metric タブを使って設定します。
o サイト上でパフォーマンスとの相関関係を調べたいビジネスメトリック
を検討します。
o カスタムメトリックは JavaScript 変数もしくは URL パターンから作成
することができます。
SOASTA Proprietary and Confidential
8
9/8/14
タグのカスタマイズ – 詳細
ページグループ
エンドユーザーのパフォーマンス傾向分析や、問題解析の対象としたい特定のページ、
もしくは論理的なページグループを決定します。
ページグループは mPulse の Web App 設定ダイアログにある Page Groups タブで設
定します。(Figure 6).
ページグループの定義には以下の４つの方法を使うことができます。
•
•
•
•
•
JavaScript Variable – ページ内に存在する JavaScript 変数の値をページグル
ープ名とします。
Query String Parameter – クエリストリングパラメターの値をページグループ
名とします。クエリストリングパラメターが使用される URL パターンと、値
を抽出するクエリストリングパラメター名を指定します。
URL Substring - End of Text – URL 中の先頭パターンを指定することで、そ
れに続く URL 文字列をページグループ名とします。
URL Substring - Trailing Text – URL 中の先頭パターンに加えて、終端パター
ンを指定することで、先頭パターンと終端パターンに挟まれた文字列を抽出し
てページグループ名とします。
URL Regular Expression – 正規表現にマッチした URL に対してページグルー
プ名を個々に指定します。
Figure 6 ページグループ設定ダイアログ - mPulse User Interface
ページグループの検証は最初のエントリーから順番に行われ、初めにマッチしたペー
ジグループ名が採用されます。Enter Test URL フィールドに URL を入力し、Test ボ
SOASTA Proprietary and Confidential
9
9/8/14
タンをクリックすることで、入力した URL がどのエントリーにマッチするのかを検
証することができます。
Figure 7 パターンマッチテスト
上記の例 (Figure 7 パターンマッチテスト Figure 7) では、Enter Test URL に入力した
URL が緑色と黄色でハイライトされた２つのパターンにマッチし、結果として緑色の
エントリーが採用され、PRODUCT というページグループ名になることを示していま
す。
ページグループは、mPulse の統計データに大きく影響します。
Figure 8 ページグループがない場合（右）とある場合（左）の統計情報表示の違い
ページグループが定義されていれば、パフォーマンス傾向はページグループごとに集
計され、重要なページグループから順番に統計情報を表示することができるようにな
ります。
ページグループに関するより詳細な情報は以下を参照してください。
http://cloudlink.soasta.com/t5/Knowledge-Base/Configuring-mPulse-to-use-PageGroups/ba-p/8608
SOASTA Proprietary and Confidential
10
9/8/14
カスタムタイマー
mPulse はデフォルトで一般的に必要とされるパフォーマンス情報を採取しますが、
ページ内の特定部分が表示されるまでにかかった時間や、特定のリソースのロードに
かかった時間など、サイトに固有なパフォーマンス情報を採取する必要がある場合に
はカスタムタイマーを定義することで対応します。
カスタムタイマーは、Web App ダイアログの Custom Timer タブで定義します。
(Figure 9).
Figure 9 カスタムタイマー設定ダイアログ- mPulse User Interface
カスタムタイマーは以下の４つの方法で定義することができます。
•
•
•
•
JavaScript Variable – ページ内に、パフォーマンス情報を保持している
JavaScript 変数があれば、その変数名を指定することで、その値からタイマー
を作成します。
Navigation Timing – ナビゲーションタイミング API の特定開始タイミングか
ら特定終了タイミングを指定することで、mPulse がデフォルトでは取得しな
い特定タイミングを計測するタイマーを作成します。
Resource Timing – リソースタイミング API を使って、XPath またはリソース
URL パターンに該当するリソースのロード時間を計測するタイマーを作成しま
す。
User Timing – performance.mark() や performance.measure() などのユーザー
タイミング API で計測したタイマーから mPulse のカスタムタイマーを作成し
ます。
カスタムタイマーに関するより詳細な情報は以下を参照してください。
http://cloudlink.soasta.com/t5/Knowledge-Base/mPulse-Custom-and-NavigationTimers/ba-p/17071
SOASTA Proprietary and Confidential
11
9/8/14
カスタムトリック
カスタムメトリックはカスタムタイマーと異なり、ページのロードにかかった時間を
測定するものではありません。例えば、カスタムメトリックを使えば、以下のような
データを収集することができます。
•
E コマースサイトのカートに入っているアイテムの金額
•
E コマースサイトのカートに入っているアイテムの数
•
会員登録サイトのレジストレーション数
•
エアラインやホテルサイトのエンドユーザーロイヤリティ
•
株式サイトでの取引株数
カスタムメトリックは Web App 設定ダイアログの Custom Metric タブで定義します。
(Figure 10).
Figure 10 カスタムメトリック設定ダイアログ- mPulse User Interface
収集されたカスタムメトリックの値とカスタムタイマーで取得したパフォーマンスデ
ータとの相関関係を調べることで、サイトパフォーマンスのビジネス面での健全性を
検証することができます。
カスタムメトリックは以下の２つの方法で定義することができます。
•
•
JavaScript Variable – ページ上に存在する JavaScript 変数の値を使ってカス
タムメトリックを作成します。他のアナリティクスツールがサイトのビジネス
メトリックを収集しているような場合に便利なオプションです。
URL Pattern – 特定の URL パターンへのアクセスをビジネス KPI として測定
しカスタムメトリックを作成します。URL パターンに対してオプションで
SOASTA Proprietary and Confidential
12
9/8/14
XPath を指定することで、ページ内の特定コンテンツへのアクセスをビジネス
KPI とすることができます。
カスタムメトリックに関するより詳細な情報は以下を参照してください。
http://cloudlink.soasta.com/t5/Knowledge-Base/mPulse-Custom-Metrics/ba-p/17067
SOASTA Proprietary and Confidential
13
9/8/14
mPulse JavaScript 例
<script type="text/javascript">
(function(){
var dom,doc,where,iframe = document.createElement('iframe');
iframe.src = "javascript:false";
(iframe.frameElement || iframe).style.cssText = "width: 0; height: 0;
border: 0";
where = document.getElementsByTagName('script')[0];
where.parentNode.insertBefore(iframe, where);
try {
doc = iframe.contentWindow.document;
} catch(e) {
dom = document.domain;
iframe.src="javascript:var d=document.open();d.domain='"+dom+"';void(0);";
doc = iframe.contentWindow.document;
}
doc.open()._l = function() {
var js = this.createElement("script");
if(dom) this.domain = dom;
js.id = "boomr-if-as";
js.src = '//c.go-mpulse.net/boomerang/' +
'YOUR API KEY GOES HERE!!!!!';
BOOMR_lstart=new Date().getTime();
this.body.appendChild(js);
};
doc.write('<body onload="document._l();">');
doc.close();
})();
</script>
SOASTA Proprietary and Confidential
14
9/8/14
About SOASTA, Inc.
SOASTA is the leader in cloud testing. Its web and mobile test automation and
monitoring solutions, CloudTest, TouchTest and mPulse, enable developers, QA
professionals and IT operations teams to test and monitor users with unprecedented
speed, scale, precision and visibility. The innovative product set streamlines test
creation, automates provisioning and execution, and analyzes real user behavior in
real-time to deliver actionable intelligence, faster. With SOASTA, companies have
confidence that their applications will perform as designed, delivering quality user
experiences every time. SOASTA’s customers are many of today’s most successful
brands including Avaya, American Girl, Bonobos, Backcountry.com, Chegg, Experian,
Gilt Groupe, Hallmark, Intuit, Microsoft and Netflix. SOASTA is privately held and
headquartered in Mountain View, Calif. For more information about SOASTA, please
visit www.soasta.com.
SOASTA Proprietary and Confidential
15
9/8/14

Download Report