[JS]ユーザーがどのようにスクロールしてページを見ているかGoogle Analyticsで解析できるスクリプト -Scroll Depth

ユーザーがページを見た際に、どのくらいスクロールされているのか、また指定した要素がスクロールされて表示されるまでにどのくらいかかるのか、といったデータをGoogle Analytics上で解析できるようにするjQueryのプラグインを紹介します。

実装は簡単、ほんの数行ページに加えるだけです。

Scroll Depth
Scroll Depth -GitHub

• Scroll Depthのデモ
• Scroll Depthの使い方

Scroll Depthのデモ

Scroll Depthは、Universal Analytics, Classic Google Analyticsに対応しており、Google Tag Managerもサポートしています。
対応ブラウザは、Chrome, Safari, Firefox, Opera, IE7-10で、スマフォもiOS, Mobile Opera, Android emulatorで動作テストを行っているとのことです。

スクロールで解析するのは大きく分けて2点。

• ページの長さはパーセント（25%, 50%, 75%, 100%）
• 指定したDOM要素（<footer>や.contentなど）

Scroll Depth

デモでは、ページの長さのパーセントが左に表示されています。

Scroll Depthの使い方

Step 1: Scroll Depthの設置

Google Analyticsのトラッキングコードの下に、以下を記述するだけ。

  ...
  <!-- Google Analytics tracking code  -->

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

スクリプトのオプション

minHeight (default: 0)

トラッキングをする最小の高さ

elements (default: empty)

指定した要素のスクロールイベント

percentage (default: true)

スクロールした量のパーセントでのトラッキングの有無
特定のDOM要素だけをトラッキングしたい時はfalse

例えば、スクロールイベントを2,000px以降、ビューポイントに「#comments」と「footer」が表示されるまでをトラッキングする時は、こんな感じに。

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