jQuery Scroll Depthが便利すぎて手放せない件。

LPとか縦に長いホームページのアクセス解析ってどうやってますか？

Google Analyticsならデフォルトでも色んなデータ見れるので重宝してるんですが、それでもLPとか縦長のページだとどこまで読まれてるんだろう？とかどれぐらいの滞在時間なのかな？とか色々気になります。

特に、LPだとボタンのクリック数とかから推定してたんですけど、ある日スーパーなjQuery Pluginを見つけました₍₍⁽⁽(ી(*ﾟ▽ﾟ*)ʃ)₎₎⁾⁾

jQuery Scroll Depth

Scroll Depth is a small Google Analytics plugin that allows you to measure how far down the page your users are scrolling. It monitors the 25%, 50%, 75%, and 100% scroll points, sending a Google Analytics Event at each one.

つまり、この「Scroll Depth」はGoogle Analyticsのプラグインで、ページの中でユーザーがどこまでスクロールしたかを計測出来るんです。Google Analytics上では、イベントから確認することが出来ます。

Scroll Depth - A Google Analytics plugin for measuring page scrolling

jQuery Scroll Depthの使い方

使い方は非常に簡単で、以下のように読み込むだけ。

<script src="js/jquery.scrolldepth.min.js"></script>
<script>
$(function() {
  $.scrollDepth();
});
</script>

デフォルトの設定だと、Baseline, 25%, 50%, 85%, 100%がイベントとして送られるだけなんですが、実際の詳細な分析には、具体的などこまで見られたかっていうのが重要です。そのために、パーセント表記をやめるためのオプションももちろんあります。

jQuery Scroll Depthのよく使うオプション

minHeight

これは、このプラグインが作動するページの高さの最低値です。例えば、これを2000にすると、1500pxの高さのページではスクロールの計測をせず、2000px以上の高さをもつページで動作します。CMSなどで特に長いページの時にだけ計測させるようにする時に使えます。ちなみに、デフォルトは0になってるので、どんなページでも計測されることになります。

elements

ページ上の要素を指定することが出来て、その要素がスクロールされたか（表示されたか）を計測することが出来ます。後述しますが、パーセントでの計測をやめて、「導入部」「訴求部」「申し込みボタン」「フッター」などの要素を指定することで、具体的にどこまでスクロールされたかをより詳細に取得することが出来ます。

percentage

パーセントでのスクロールの追跡のフラグです。デフォルトはtrueなので、25%, 50%, 85%, 100%と計測されます。パーセントでの計測が鬱陶しい時には、falseにしてください。

pixelDepth

パーセントと同じです。ピクセル単位での追跡フラグで、デフォルトはtrueです。

jQuery Scroll Depthのオプション設定

以下は、実際にLPで使ってる設定です。

パーセントとピクセルでの計測はうざいのでオフ
計測するのは、自分が定義した要素

<script src="js/jquery.scrolldepth.min.js"></script>
<script>
  $(function(){
    $.scrollDepth({
      elements: ['#mv', '#section01', '#section02', '#section03', '#section04', '#tour01', '#tour02', '#tour03', '#section05', 'footer'],
      pixelDepth: false,
      percentage: false,
    });
  });
</script>

こんな感じです。

要素をclassにしてしまって、複数回通過する場合は複数カウントされてしまう可能性があるので、基本的にはidかタグ（headerとかfooterぐらい）で指定してあげてください。

これ以外のプラグイン

nquinlan/jquery-track-everything · GitHub

これはまだあんまりきちんと触れてないんだけども、きちんと使うととんでもない効果を発揮しそうなので、今度これも導入してみます。

ﾉｼﾉｼ

Ich habe hunger

あふりかエンジニア、アフリカ向けのB2BのSaaSを開発する