この要件の説明は ユースケース #4 をご覧ください。
今まではページがユーザーによって有効になったときの時間を測定していました。また、これはページ全体の読み込み時間に遅れずにページ内の異なるコンポーネントにかかる時間を測定するには役立つかもしれません。boomerang はページの一部分を測定するための設定が可能なタイマーを追加する機能を提供します。これを行うには roundtrip(BOOMR.plugin.RT
)プラグインの startTimer()
と endTimer()
メソッドを使用します。
以下の例では、boomerang.js
が読み込まれているかの確認とこれらのメソッドを呼び出す前に init()
メソッドが呼び出されているか確認する必要があります。おそらくページの先頭にそれを配置するといいでしょう。これをどう使うかはこの後確認します。
まず最初に、あなたが測定したいページの領域を決めます。前で startTimer()
を、後で endTimer()
を呼び出します。それぞれのタイマーには自身の名前を持ちます。名前は自由な文字列でつけられますが、効率的にするためにシンプルな名前がいいでしょう。英数字とアンダースコアで、最大5文字の名前にしてください。例えば、t_ads
、t_head
、t_js
といった感じです。また、次の名前は予約されています: t_done
、t_page
、t_resp
タイマーを開始する前に boomerang.js が読み込まれていることを確認してください。
<html> <head> <script src="boomerang.js" type="text/javascript"></script> <script type="text/javascript"> BOOMR.init({ beacon_url: "http://yoursite.com/path/to/beacon.php" }); BOOMR.plugins.RT.startTimer("t_head"); </script> <title>page title</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="../../boomerang-docs.css"> <script type="text/javascript"> BOOMR.plugins.RT.endTimer("t_head").startTimer("t_body"); </script> </head> <body> page body here <script type="text/javascript"> BOOMR.plugins.RT.endTimer("t_body"); </script> </body> </html>
タイマーは t_done
と一緒にビーコンに読み込まれます。
endTimer
と startTimer
をチェーンして呼び出すときは順番に注意してください。ほとんどのメソッドはオブジェクトの参照を返すためこれが可能になります。タイマーのメソッドは BOOMR.plugins.RT
オブジェクト上にあることも注意してください。メソッドの返り値はそのオブジェクトであって、BOOMR
オブジェクトではありません。
私たちは何年もパフォーマンスのためにドキュメントの下に JavaScript を配置すると良いと言ってきました。いいアドバイスではないかもしれませんが、ドキュメントの上部で boomerang を読み込んでください。そうすればページ内で時間を測定できます。読み込みが終われば1度だけ boomerang にそれらの結果を渡します。これは BOOMR.plugins.RT.setTimer()
メソッドを使って行ないます。このメソッドは2つのパラメーターを取ります — タイマーの名前とミリ秒の時間の値です。コードはこのようになります:
<html> <head> <script type="text/javascript"> var t_pagestart=new Date().getTime(); </script> <title>page title</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <script type="text/javascript"> var t_headend = new Date().getTime(); </script> </head> <body> page body here <script type="text/javascript"> var t_jsstart = new Date().getTime(); </script> <script src="boomerang.js" type="text/javascript"></script> <script type="text/javascript"> BOOMR.init({ beacon_url: "http://yoursite.com/path/to/beacon.php" }); var t_bodyend = new Date().getTime(); BOOMR.plugins.RT.setTimer("t_head", t_headend - t_pagestart). setTimer("t_body", t_bodyend - t_headend). setTimer("t_js", t_bodyend - t_jsstart); </script> </body> </html>
最新のソースコードとドキュメントは github.com/SOASTA/boomerang に公開されています。