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

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

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

サイトのキャプチャ

Scroll Depth
Scroll Depth -GitHub

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
});

top of page

©2017 coliss