Google AnalyticsでJavaScriptファイルのローディング時間を計測する

SEO

やっほぉ、鳥さんとかそんな感じのものだ。

今回はGoogle Analyticsで外部のJavaScriptのローディングタイムをトラッキングする方法を説明するよっ
Google Analyticsの「_trackTiming」ってやつを使うんだ〜。

導入手順

user-timing.js - analytics-api-samples - Google Analytics Sample Code - Google Project Hostingを元にして、ちょっとしたスクリプトを組んでみた。

Tracking JavaScript file loading time with Google Analytics ― Gist

まず、上記のJavaScriptファイルをDLする。

エディタで開いて、_loadJsAryにこんな感じでロードするJavaScriptとその説明の配列をセットする。非同期でOK！の場合は、最後にtrueって入れると良いよん。

var _loadJsAry = [
	['js/ga.js', 'Load Google Analytics Component', true]
	, ['js/jquery-min.js', 'Load jQuery']
	, ['js/jquery-ui-min.js', 'Load jQuery UI']
];

必要に応じて、デバッグかどうかをセットする。（デバッグの場合はサンプルレート100%、GA標準の場合は1%）
※グローバル変数（￣▽￣；

var debug = true;

IE8以下で動かない

ちなみに、IE8以下だと、どーーーにもウマく動かん(´・ω・｀)

試した方法は、以下のとおり。

  • DOMでスクリプトタグの直前や直後にロード（GA標準）　→　なんか要素自体が追加されない
  • DOMでbodyタグの最後にロード　→　要素自体は追加されるけど、ロード順が同期にしてもグチャグチャ
  • scriptタグをbodyタグの最後に追加　→　なんか追加されない
  • Ajaxでロードしてeval　→　グローバル変数にした奴が機能しない（￣▽￣；　（どうやらスコープがeval内で完結するっぽい、セキュリティ考えれば確かにね）←Gistのコードはこの状態

参考

でわでわっ