スクロール率の計測方法 (要素表示ベース)

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

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

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

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

この記事では、「要素の表示ベースでスクロール率を計測する方法」をご案内します。

（ページの何％までスクロールしたのかを計測する方法はこちら）

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

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

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

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

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

スクロール率を計測したい要素の数だけゴールを追加します。

今回は例として2つ作成しました。

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

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

次に、要素が見えるまでのスクロールを計測するためのロジックを設定します。

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

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

特定の要素が見えるまでのスクロールを計測するサンプルコードを用意いたしました。

下記のコードをご参照ください。

Attention!

こちらで記載している内容はオープンソース、外部のJSファイルを利用しています。

（Waypointsという外部ライブラリを使います）

ご留意の上ご使用ください。

1. vwo_$.getScript('https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.js', function() {

2.     vwo_$.getScript('https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/shortcuts/inview.min.js', function() {

3.         /* 計測要素を定義する */

4.         /* element1は下から入ってくる時に発火されます */

5.         /* このブロックをコピーして「element1」を変更する */

6.         /* 計測したい要素のCSSを変更する */

7.         /* ゴールIDを変更する */

8.         var element1 = new Waypoint.Inview({

9.             element: vwo_$('計測したい要素のCSSセレクター')[0],

10.             enter: function(direction) {

11.                 if (direction == 'down') {

12.                     /* 281をキャンペーンに設定されているゴールIDに変更する */

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

14.                     window._vis_opt_queue.push(function() {

15.                         _vis_opt_goal_conversion(281);

16.                     });

17.                 }

18.             }

19.         });

20. 
    

21.         /* element2は画面上部から消えたら発火されます */

22.         var element2 = new Waypoint.Inview({

23.             element: vwo_$('計測したい要素のCSSセレクター')[0],

24.             exited: function(direction) {

25.                 if (direction == 'down') {

26.                     /* 282をキャンペーンに設定されているゴールIDに変更する */

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

28.                     window._vis_opt_queue.push(function() {

29.                         _vis_opt_goal_conversion(282);

30.                     });

31.                 }

32.             }

33.         });

34.     });

35. });

「計測したい要素のCSSセレクター」と記載されている部分には、その名の通り計測対象の要素のCSSセレクターを入力します。

「○○○（数字）をキャンペーンに設定されているゴールIDに変更する」と記載されている部分には、どのカスタムCVゴールを発火させるのかを指定するため、カスタムCVゴールのタグを設定します。（上記のサンプルコードでは既にカスタムCVゴールのタグが設定されている状態です）

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

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

Attention!

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

コピーしたカスタムCVのタグを、サンプルコード内の「○○○（数字）をキャンペーンに設定されているゴールIDに変更する」と記載されている部分に貼り替えます。

上記のコードは、カスタムCVゴール281と282のタグを入れた状態のものです。

また、上記のコードは、二つの計測方法のロジックが入っているコードです。

1. 要素が画面下から入ってくる時に発火される

2. 要素が画面上部から消えたら発火される

複数の要素を追加して計測することができますが、計測対象の要素を追加する場合、その分のゴールを追加し、コードを修正する必要があります。

複数の要素を追加して計測する場合、コードの修正点は下記になります。

• 「var elements1～」のコードをコピーして、追加します。

• コードを追加したら、「var element1」、「var element2」など、ユニークな変数名を使用します。

• 計測したい要素の数だけ、カスタムCVゴールを追加します。

• 当てはまるカスタムCVゴールタグを入れてください。（数字の部分を入れ替えていただくことで流用可能です）

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

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

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

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

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

クリックすると、JavascriptとCSSを入力する欄が出てきます。そのJavascriptの欄に、先ほど作成したロジックのコードを入力すれば設定が完了です。

上記の計測方法は一例となります。ゴール計測条件は一意に定義できます。