Works PR

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

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

scrolldepth

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

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

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



「jQuery Scroll Depth」の簡単な説明

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

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

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」を入れている設定です。


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

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

Scroll Depth

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


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


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

ABOUT ME
Resound Web Lab
Resound Web Lab 代表。 福岡県北九州市で、Web制作サポート・運営指導、女性の起業支援、カウンセリングをしています。 お客さま「らしさ」を引き出し、人とひと・人とモノを繋げていきます。 このサイトでは、Webの技術的な情報や、ご自身で情報発信をされる方に向けて、記事を更新しています。