ページスクロール + CVの計測方法
特定の箇所までスクロールして、CVしたユーザーを計測するには下記5つの設定が必要です。
カスタムCVゴールを追加する
クッキーを付与するロジックを追加（関数）
クッキーを読み込むロジックを追加（関数）
スクロールイベントハンドラを設置（スクロールされたら、上記のクッキーを設置する関数を実行させる）
CVページに到達した後、クッキーを確認するロジックを設置
1.カスタムCVゴールを追加する
カスタムコンバージョンを使用しますので、設定＞ゴール にて下記のようなゴールを設定してください。
ゴール名：○○（特定の要素）までスクロールかつCV
ゴールの種類：カスタムコンバージョンを計測 を選択
URL一致：最後のアクションが行われるページのURL（CVページ）
2.クッキーを付与するロジックを追加（関数）
ユーザーのブラウザにクッキーを付与するにはJSコードを使用します。
Pre-Campaign JS・Campaign JS・Post-Campaign JSにて使えるように、下記の関数のコードをPre-Campaign JSに入れてください。（Pre-Campaignに入れればすべてに適用されます）
Attention!
domain=ドメインを入力のところはテストを走らせているドメインに書き替えてください。
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/;domain=ドメインを入力";
}
3.クッキーを読み込むロジックを追加（関数）
クッキーを読み込むには下記のような関数が必要です。
Pre-Campaign JS・Campaign JS・Post-Campaign JSにて使えるように、下記のコードをPre-Campaign JSに入れてください。（Pre-Campaignに入れればすべてに適用されます）
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
Attention!
返り値はstringになります。
4.スクロールイベントハンドラ（要素までスクロールされたら、上記のクッキーを設置する関数を実行させる）
ユーザーが特定の要素までスクロールしたアクションを認識するには、イベントハンドラを使用します。ユーザーがスクロールしたアクションに対してクッキーを設置します。Control・各バリエーションの対象になったユーザーのクリックを全部とるには、下記のコードをPost-Campaign JSに入れてください。
vwo_$.getScript( "https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.min.js" , function ( data, textStatus, jqxhr ) {
vwo_$.getScript( "https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/shortcuts/inview.min.js" , function ( data, textStatus, jqxhr ) {
var scroll1 = new Waypoint.Inview({
element: $('スクロール到達させたい要素のセレクタ名')[0],
enter: function(direction) {
if(direction === "down") {
setCookie('任意のクッキー名', 1, 1);
}
}
});
});
});
例えば：
vwo_$.getScript( "https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.min.js" , function ( data, textStatus, jqxhr ) {
vwo_$.getScript( "https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/shortcuts/inview.min.js" , function ( data, textStatus, jqxhr ) {
var scroll1 = new Waypoint.Inview({
element: $('cta1_button')[0],
enter: function(direction) {
if(direction === "down") {
setCookie('ScrollCta1', 1, 1);
}
}
});
});
});
5.CVページに到達した後、クッキーを確認するロジックを設置
要素までスクロールして、ゴールページに到達した時のみゴールを計測したいので、到達したページが計測したいページと同じかどうかのロジックも必要です。クッキーがある場合はゴール発火コードを実行します。
ゴールページにコードを実行するにはPre-Campaign JSに入れる必要があります。
if(document.URL === '/* ゴールページのURL */') {
if(getCookie('設定したクッキー名')) {
window._vis_opt_queue = window._vis_opt_queue || [];
window._vis_opt_queue.push(function() {
_vis_opt_goal_conversion(発火させたいCVゴールの番号);});
}
}
例えば：
if(document.URL === 'https://www.assion.co.jp/lp/05b/complete') {
if(getCookie('ScrollCta1')) {
window._vis_opt_queue = window._vis_opt_queue || [];
window._vis_opt_queue.push(function() {
_vis_opt_goal_conversion(264);});
}
}
まとめ
コードを全てまとめると、下記のようになります：
▼POST-CAMPAIGN JS
// 要素までスクロールされたら、クッキーを設置する関数を実行させる
vwo_$.getScript( "https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.min.js" , function ( data, textStatus, jqxhr ) {
vwo_$.getScript( "https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/shortcuts/inview.min.js" , function ( data, textStatus, jqxhr ) {
var scroll1 = new Waypoint.Inview({
element: $('スクロール到達させたい要素のセレクタ名')[0],
enter: function(direction) {
if(direction === "down") {
setCookie('任意のクッキー名', 1, 1);
}
}
});
});
});
▼PRE-CAMPAIGN JS
// クッキーを付与するロジック
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires +
";path=/;domain=ドメイン名";
}
// クッキーを読み込むロジック
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
// CVページに到達した後、クッキーを確認してゴールを発火させるロジック
if(document.URL === '/* ゴールページのURL */') {
if(getCookie('設定したクッキー名')) {
window._vis_opt_queue = window._vis_opt_queue || [];
window._vis_opt_queue.push(function() {
_vis_opt_goal_conversion(発火させたいCVゴールの番号);});
}
}
これらはあくまでサンプルコードとなります。
ご利用の際は必ず社内で確認をいただき、ご自身の責任の下でご利用いただきますようお願い致します。