解析タグ実装の3つのメソッド比較：headの非同期はUXに悪い?
2011年05月06日 12:05
Google Analyticsの非同期方式は、JavaScriptファイルを並行でロードするだけでなく、ロード完了直後にすぐ計測を実行するようになっています。
ということは、ある程度のボリュームを持つ普通のページの場合、ページ上のコンテンツが全てロードされるよりも前のタイミングで計測されることになります。この結果、確かに計測漏れは減りますが、コンテンツの一部を取得・加工・判定できなくなる、という不都合も生じます。
カスタム変数を使わずに標準的なタグだけでGoogle Analyticsを導入している場合はあまり問題にならないのですが、次のような応用的な計測・解析・分析をする場合に困ることになります。
- URLは同じでもページの内容が条件によって切り替わることがあるため、特定のテキストの有無を判定してページ名を変更したい
- ショッピングカートの完了ページに金額や商品名を出力するのが開発の都合で難しいため、formのhiddenから値を取得したい
- 画面上にある外部サイトへのリンクを自動判定し、クリック計測したい
- ログイン用リンクの有無でログイン状態を判定したい
- Facebookの「いいね」ボタンのクリック回数を計測したい
- 資料請求フォームに記入された都道府県を取得し、地域別のコンバージョンを比較したい
- はてなブックマーク数とエンゲージメントスコアの相関を調べたい
- AdSenseの表示広告タイトルを記録したい
このため、重要度に応じてタグを入れる場所や方式を決める必要があると思います。
計測精度を最優先する場合 |
コンテンツを優先する場合 |
ユーザー体験を最優先する場合 |
|
| 方式 |
(1) head内の非同期 |
(2) body最後の非同期 |
(3) onLoad後の遅延非同期 |
|---|---|---|---|
| タグを入れる位置 | headの中 | bodyを閉じる直前 | bodyを閉じる直前 |
| JSのロード開始タイミング | bodyのコンテンツよりも先 | コンテンツのロード後 （ただしonLoadイベントよりも前） |
全コンテンツのロード後 （onLoadイベントの後） |
| 前処理と計測実行タイミング | 解析用JavaScriptファイルのロード完了直後 | コンテンツのロード完了後 | 全コンテンツのロード後にバックグラウンドで処理 |
| 計測の精度 | 最高 | 少し良い | 普通（従来の同期型とほぼ同じ） |
| 長所・短所 | 最速のタイミングで処理するので計測漏れは最低限だが、後続のJavaScript処理に順番待ちが発生するため、onLoad後の処理（ブログパーツ描画、A/Bテスト切り替え、動画再生など）が後送りになる。 | 通常コンテンツのパフォーマンスには影響を与えないが、onLoad後の処理（ブログパーツ描画、A/Bテスト切り替え、動画再生など）が遅延する。 | ユーザーにとっては導入前と変わらないパフォーマンス。JSロード開始を遅らせるため、計測精度は少し下がるが、従来の同期型の計測と挙動も精度もほぼ同じ。 |
| 対象ツールの例 | メインのアクセス解析ツール、 アフィリエイトやリスティング広告用のコンバージョンタグ | サブのアクセス解析ツール | ユーザーが利用しない運営者都合のツールすべて |
補足
- 前処理・・・カスタム変数の準備とセット
- 計測実行・・・Google Analyticsの場合はtrackPageview、SiteCatalystの場合はs.t()を実行し、解析用サーバーにデータを送信すること
結論
こうして整理してみると、非同期の方が常にベストとは限らない、と分かります。
JSファイルのロードは常に非同期にすべきですが、解析用の処理の実行タイミングは、ユーザーエクスペリエンスを考えて決める必要がありますね。
なお、ningで構築したeVar7のサイトは、ning運営側のGAは方式(1)ですが、自分で導入したGAとSiteCatalystとClickyのタグはheadに入れられない（システム制約）ので、割り切って全部方式(3)にしました。