[JS]あなたのウェブページがどのくらいスクロールされて見られているかが分かるスクリプト -jQuery Scroll Depth

Googleアナリティクスを使って、ウェブページがどのくらいスクロールされているか解析するjQueryのプラグインを紹介します。

下記のキャプチャはスクロールの量(パーセント)ですが、特定のエレメント(フッタや記事など)までスクロールされたかもできます。

サイトのキャプチャ

Tracking Scroll Depth with jQuery and Google Analytics
jQuery Scroll Depth -GitHub

Scroll Depthの使い方

Scroll Depthの設置は簡単です。

Gooleアナリティクス

まず、Googleアナリティクスのトラッキングコードを設定します。

スクリプト

jQuery 1.7+」と当スクリプトを外部ファイルとして記述し、スクリプトを実行します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.scrolldepth.js"></script>
<script>
$(function() {
  $.scrollDepth();
});
</script>

コードは</body>の前、アナリティクスのトラッキングコードの後に記述します。

スクリプトのオプション

minHeight
対象とするドキュメントの最小の高さ
elements
対象とするエレメントの指定
※HTMLの要素やidで指定、classは通常複数あるので非推奨。
percentage
スクロール量をパーセントで追跡するかどうか
※elementsで特定のDOMエレメントだけを対象とする場合はflaseに。

オプションを使用すると、下記のようになります。

$.scrollDepth({
  minHeight: 2000,
  elements: ['#comments', 'footer']
  percentage: false,
});

Scroll Depthの対応ブラウザ

Scroll Depthは下記の環境でテスト済みとのことです。

  • Chrome 18
  • Firefox 8
  • Safari 5
  • Opera 10
  • IE 7-10
  • iOS
  • Opera Mobile
  • Android emulator

top of page

©2017 coliss