スクロール率の計測方法 (ページ内の何%まで)

スクロール率を計測したい場合はカスタムコンバージョンゴールを設定する必要があります。

スクロール率の計測方法は2種類あります。

・ページの何％までスクロールしたのかを計測する方法

・特定の要素が表示されるまでスクロールしたかを計測する方法

この記事では、「ページの何％までスクロールしたのかを計測する方法」をご案内します。

（特定の要素が表示されるまでスクロールしたかを計測する方法はこちら）

1.スクロールCVゴールを追加する

ゴール設定のページを開きます。

（キャンペーンを開き、設定 ＞ ゴールと進みます）

開いた画面にて、カスタムコンバージョンを計測 を選択します。

URLの欄には、計測を行いたいページのURLを入力します。

今回は25%ごとに計測するため、４つのゴールを作成しました。

必要なゴールを全て設定してから、右上もしくは一番下にある緑色の 保存 ボタンを押してください。

これでゴールの追加は完了です。

次に、スクロール率を計測するためのロジックを設定します。

2.スクロール率を計測するためのロジックを作成する

カスタムCVゴールを計測するためには、発火条件のロジックを設定する必要があります。

下記にスクロール率を計測するためのサンプルコードを用意いたしました。

今回は下記のサンプルコードをカスタマイズして設定をしていきます。

1. (function() {

2. 
   

3.     /* スクロールポジション初期化 */

4.     var initialPos = window.pageYOffset;

5.     document.addEventListener('scroll', function(event) {

6.         /* スクロールポジション、コンテンツ高さ、ビューポート */

7.         var scrollPos = window.pageYOffset,

8.             scrollHeight = document.documentElement.scrollHeight,

9.             viewPort = document.documentElement.clientHeight;

10. 
    

11.         /* 下向きスクロールのみにスクロール％を計算、

12.             ゴールを発火する */

13.         if (scrollPos > initialPos) {

14.             /* スクロール％計算 */

15.             var p = Math.floor(scrollPos / (scrollHeight - viewPort) * 100);

16.             if( p >= 25) {

17.                     /* カスタムコンバージョンタグ1 */

18.                 }

19.             if( p >= 50) {

20.                     /* カスタムコンバージョンタグ2 */

21.             }

22.             if( p >= 75) {

23.                     /* カスタムコンバージョンタグ3 */

24.             }

25.             if( p == 100) {

26.                 /* カスタムコンバージョンタグ4 */

27.             }

28.         }

29.         initialPos = scrollPos;

30.     }, false);

31. }

32. )(); 

「カスタムコンバージョンタグ」と記載されている部分には、どのカスタムCVゴールを発火させるのかを指定するため、カスタムCVゴールのタグを設定します。

カスタムCVゴールのタグは、設定 ＞ サマリー 画面で発行されています。該当ゴールのJavascriptタグをコピーします。

今回は、<script></script>の間にあるコードのみをコピーしてください。

Attention!

ゴール毎に一意のタグが発行されますので、 設定 ＞ サマリー 画面より、該当ゴールのタグをコピーしてください。

下記のコードの"ゴールナンバー"の箇所に「1.スクロールCVゴールを追加する」で作成したCVゴールの数字を入れていただくことでもカスタムCVタグを用意できます。

1. window._vis_opt_queue = window._vis_opt_queue || [];

2. window._vis_opt_queue.push(function() {_vis_opt_goal_conversion(ゴールナンバー);}); 

コピーしたカスタムCVのタグを、サンプルコード内の「カスタムコンバージョンタグ」と記載されている部分にペーストしていきます。

今回は25%毎にゴールを設計しましたので、4箇所にタグを入れることになります。

ロジック内に「case: 25」「case:50」「case:75」「case:100」というコードがありますが、そのパーセントに当てはまるゴールタグを入れてください。

完了したら、下記のようになります。

1. (function() {

2.   

3.     /* スクロールポジション初期化 */

4.     var initialPos = window.pageYOffset;

5.     document.addEventListener('scroll', function(event) {

6.         /* スクロールポジション、コンテンツ高さ、ビューポート */

7.         var scrollPos = window.pageYOffset,

8.             scrollHeight = document.documentElement.scrollHeight,

9.             viewPort = document.documentElement.clientHeight;

10. 
    

11.         /* 下向きスクロールのみにスクロール％を計算、

12.             ゴールを発火する */

13.         if (scrollPos > initialPos) {

14.             /* スクロール％計算 */

15.             var p = Math.floor(scrollPos / (scrollHeight - viewPort) * 100);

16.             if( p >= 25) {

17.                 /* スクロール率25% */

18.                 window._vis_opt_queue = window._vis_opt_queue || [];

19.                 window._vis_opt_queue.push(function() {_vis_opt_goal_conversion(281);});

20.                 }

21.             if( p >= 50) {

22.                 /* スクロール率50% */

23.                 window._vis_opt_queue = window._vis_opt_queue || [];

24.                 window._vis_opt_queue.push(function() {_vis_opt_goal_conversion(282);});

25.             }

26.             if( p >= 75) {

27.                 /* スクロール率75% */

28.                 window._vis_opt_queue = window._vis_opt_queue || [];

29.                 window._vis_opt_queue.push(function() {_vis_opt_goal_conversion(283);});

30.             }

31.             if( p == 100) {

32.                 /* スクロール率100% */

33.                 window._vis_opt_queue = window._vis_opt_queue || [];

34.                 window._vis_opt_queue.push(function() {_vis_opt_goal_conversion(284);});

35.             }

36.         }

37.         initialPos = scrollPos;

38.     }, false);

39. }

40. )(); 

これで、スクロール率を計測するためのロジックの作成が出来ました。

次は、作成したロジックを設置します。

3.作成したロジックを設置する

ページスクロール率を計測する時、ページ内の要素が全て読み込まれた状態でのページの高さを参照するので、POST-CAMPAIGN JSという機能を使用します。

Attention!

ページの読み込みが完了した後に動的に要素が追加される場合は、ページの高さが少しずれる可能性があります。

POST-CAMPAIN JSの機能は、コードエディタを開き、バリエーションが並んでいる部分の上に存在しています。

下記の図をご参照ください。

クリックすると、JavascriptとCSSを入力する欄が出てきます。

そのJavascriptの欄に、先ほど作成したロジックのコードを入力し、保存したら設定が完了です。