どこまでスクロール(閲覧)されているかをGoogleアナリテクスで分かる「Scroll Depth」を試してみた

この記事は約 4 分で読めます。

Webサイトの長いページやブログの長い記事を書くと、どこまでスクロールして読んでもらえているのか気になります。

Googleアナリテクスの滞在時間を目安にしたり、「UserHeat」を利用するテもありますが、今回jQueryプラグインを使うことでGoogleアナリテクスの画面でスクロール量を見ることができる「Scroll Depth」が面白そうだったので、試してみました。

※WordPressのプラグインがあることが分かりました！この記事の最後にリンクします。

「jQuery Scroll Depth」の簡単な説明

「Scroll Depth」を導入すると、以下のことがGoogleアナリテクスで計測できるようになります。

ページ到達状況(%やpx単位でわかる。設定をすれば細かな単位で把握できるようになる)
ページの到達時間

Googleアナリテクスのレポート画面で、「行動」→「サマリー」→「イベントラベル」でどこまでスクロールされているか、「行動」→「カスタム速度」でページの到達時間を見ることができます。

ちなみに、MITライセンス、ブラウザはIE7以上なので、無料で商用利用としても問題はないと思います。

「jQuery Scroll Depth」の設置方法

「jQuery Scroll Depth」を設置をするには、事前に以下を記述していることが必須です。

Googleアナリテクスのトラッキングコードを貼りつけていること
htmlのheadにjQueryを読み込む記述がされていること

「Scroll Depth」のサイトを少し下にスクロールさせた所に、ダウンロードのボタン(2つ)があります。こちらからお好きな方法で「Scroll Depth」をダウンロードします。

scrolldepth_img1

ダウンロードした中で必要なファイル「jquery.scrolldepth.min.js」は、サーバーにアップします。

htmlに以下のような記述(「jquery.scrolldepth.min.js」を読み込む記述)をします。
記述場所は、htmlの中でheadのjQueryを読み込みコードとGoogleアナリテクスのトラッキングコードより下に。
※記述例はjsフォルダーに「jquery.scrolldepth.min.js」を入れている設定です。

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

$(function() {

$.scrollDepth();

});

</script>

タグマネージャーを導入している場合は、タグマネージャーの方の設定も必要です。
タグマネージャーの設定は以下の参考サイト・ブログを参考にいたしました。

設置した後、Googleアナリテクスのレポート画面の「リアルタイム」→「イベント」を開いてみます。

左側の横棒グラフの下にある「表示」の部分は「イベント(直前の30分間)」にしておきます。
ここで、閲覧されている状態(自分でサイトを開いておいても良い)で、設定したイベントの表示がされていればOKです！

【参考にさせていただいたサイト・ブログ】

Scroll Depth
jQuery Scroll Depthを使ってみたので詳細を書いとく｜ファンブログハックさま
jQuery Scroll DepthとGoogleタグマネージャでページのスクロール量を計測してみる。｜MarineRoadさま
googleAnalyticsを利用した10%単位でスクロールイベントを取得する方法|ACTZEROさま

「Scroll Depth」のWordPressプラグイン「WP Scroll Depth」を見つけました！
もしWordPress内で使用されるならこちらが便利かもしれません。
設定もWordPressの左側のメニュー「設定」の中からできるます。タグマネージャーを利用の場合は、タグマネージャーはしっかり設定しましょう！