一般的なアクセス解析で測定するのはPCのモニタ解像度の場合が多い。しかし、それをそのままユーザーがブラウザが描画できる領域と想定しWebページのデザインをしてしまうと、間違いが起きる。なぜなら、大半のユーザーがブラウザの描画領域がPCモニタの解像度に比べて小さいエリアに過ぎないからである。

PCモニタの解像度がブラウザの描画領域と同じになるのはWindowsであれば、タスクバーを隠した状態でブラウザを全画面表示にしなければならない。しかし、実際には日常的な利用においてそのような使い方をしているユーザーは稀だろう。通常のユーザーは画面下部にはWindowsのタスクバーがあり、ブラウザの上部にはメニューバーや、ロケーションバー、タブエリアなどが並んでいる。仮にウィンドウを最大化したとしても、その分縦方向の描画領域は狭くなっている。横方向に関しても、例えばお気に入りをブラウザのサイドバーに表示していれば、その分狭くなる。そして、なによりも全てのユーザーがウィンドウを最大化しているとは限らない。

そうしたことを踏まえると、PCモニタの解像度ではなくブラウザの描画領域を知る方がWebページをデザインする上では役に立つことが分かる。以前にブラウザの描画領域を測定するサービスとして「BROWSIZE.ORG」を取り上げた(ユーザーの画面解像度ではなく、ブラウザのサイズを測定するサービス - BROWSIZE.ORG)が、今度はGoogle Analyticsを用いて同様にブラウザのサイズを測定してみる。

手法としてはJavascriptで「document.documentElement.clientWidth」を使って描画領域の横幅を取得し、それをGoogle Analyticsのカスタム変数を使って集計する。実際のコードは下記のようになる。

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-XXXXXX-X");
var bw = document.documentElement.clientWidth;
bw = bw - ( bw % 20 );
var bh = document.documentElement.clientHeight;
bh = bh - ( bh % 20 );
pageTracker._setCustomVar(1,"browseWidth",bw,2);
pageTracker._setCustomVar(2,"browseHeight",bh,2);
pageTracker._trackPageview();
} catch(err) {}</script>

単に「document.documentElement.clientWidth」で集めた値を集計すると1px単位になってしまうので、今回は20px単位にして、値を切り捨てるような形にした。