ページを閲覧した人が、どの場所で離脱しているのかを調べる際に便利なjQueryプラグイン「Scroll Depth」。

 

「Scroll Depth」では、離脱箇所をピクセルとパーセンテージの2種類で確認することができます。

 

デフォルトのプラグインでは、パーセンテージは25%刻みで認識しますが、より本格的なWEB改善を行うためには、20%刻み、10%刻み、5%刻みといった、細かなパーセンテージ評価が欲しいところです。
サイトの内容や構成に応じたパーセンテージでスクロール離脱箇所を見ることができれば、より効果的なWEB改善を行うことができます。

 

ここでは、「Scroll Depth」がセットアップ済みの状態から、さらに細かなスクロールパーセンテージを取得できるようなカスタマイズを行う方法を紹介していきます。

 

「Scroll Depth」のセットアップがまだの方は、以下のページを参考にしてください。

 

N%刻みでスクロール位置を取得するようにカスタマイズする方法

「Scroll Depth」をカスタマイズするには、サーバーにアップロードした「jquery.scrolldepth.min.js」ファイルのプログラムの一部を変更する必要があります。

 

ここでは、N%刻みの取得を行う場合のカスタマイズ方法を紹介していきます。

 

取得用イベントラベルをN%刻みで作成する

jquery.scrolldepth.min.js(元のプログラム)

 

jquery.scrolldepth.min.js(カスタマイズ後のプログラム)

 

取得用スクロールイベントの数を[ 100 ÷ N ]個に設定する

jquery.scrolldepth.min.js(元のプログラム)

 

jquery.scrolldepth.min.js(カスタマイズ後のプログラム)

 

実際のカスタマイズ例

20%刻みでスクロール位置を取得するようにカスタマイズする

イベントラベルのカスタマイズ

 

スクロールイベント数の設定

 

10%刻みでスクロール位置を取得するようにカスタマイズする

イベントラベルのカスタマイズ

 

スクロールイベント数の設定

 

5%刻みでスクロール位置を取得するようにカスタマイズする

イベントラベルのカスタマイズ

 

スクロールイベント数の設定

 

 

おすすめの記事