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

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

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

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

[ad#ad-2]

• Scroll Depthの使い方
• Scroll Depthの対応ブラウザ

Scroll Depthの使い方

Scroll Depthの設置は簡単です。

Gooleアナリティクス

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

• トラッキング コードの追加 -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>の前、アナリティクスのトラッキングコードの後に記述します。

[ad#ad-2]

スクリプトのオプション

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