2015年3月23日月曜日

Googleアナリティクスでスクロール計測

縦長のランディングページは通常のWebサイトに比べるとページ数がなくリンクが少ないという特性上、Googleアナリティクスをはじめとした“数値解析系ツール”だとなかなか問題が見えにくいです。

ヒートマップ系ツール(※)を入れる!という選択肢もありますが、Googleアナリティクスでもどこまでどれくらいのユーザがスクロールしたのかを調べることは可能です。

※ヒートマップ系ツールについてはまた別の機会に紹介したいと思います。

以下のようなデータを取得できます。

「Baseline」がデータ取得できた全体の件数です。そのうち、「25%」まで進んだのが12件、「50%」まで進んだのが10件・・・といった具合です。このサンプルだと「100%」進んだのが全体の25%ということになります。もちろん、ページごとのデータを見ることも可能です。また参照元やキーワードといったセグメントごとに見ることも可能です。

他にも各%まで到達するのに要した平均時間も見ることができます。

なお、このカスタム設定ですが、ユニバーサルTC、非同期(旧)TC、どちらでも動きました。以下が実装手順です。


Scroll DepthのサイトのDownloadボタンからjavascriptファイル(jquery.scrolldepth.min.js)を右クリックで保存し、任意のディレクトリに格納します。


②jQueryを埋めこみます。<head>内。
※jQueryについては既に導入済の場合は必要ありません。あまりバージョンが古いと動かない可能性があります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


③スクロール計測用のコード(下記)を埋めこみます。<head>内。
1行目のパスの部分は「jquery.scrolldepth.min.js」が格納されているパスに変えます。
※トラッキングをする最小のピクセルや、指定した要素のスクロールイベントなどオプション設定もできますが、ここでは最も標準的な例として紹介されていた形式をデフォルトとしてあります。

<script src="js/jquery.scrolldepth.min.js"></script>
<script>
jQuery(function() {
jQuery.scrollDepth();
});
</script>
<script>
// Example with options
jQuery.scrollDepth({
minHeight: 2000,
elements: ['#comments', 'footer'],
percentage: false,
userTiming: false,
pixelDepth: false,
nonInteraction: false
});
</script>