YouTube動画のクリック計測方法について
ページ内にあるYouTubeの動画がクリックされたかどうか計測するゴールは、通常の要素クリックでは計測されないため、下記手順が必要です。
①動画クリック計測のために、カスタムコンバージョンゴールを設定する
②コードエディタを開き、プレキャンペーンJSに計測用コードを書く
①動画クリック計測のために、カスタムコンバージョンゴールを設定する
該当キャンペーン内の設定 ＞ ゴールをクリックし、ゴールを作成
ゴール名：任意です。今回は「youtubeクリック計測」としています。
ゴールの種類：カスタムコンバージョンを計測
URL：ここにYouTubeの動画が存在しているページを指定します。
必要に応じてURLのパターンを変更をしてください。
VWOで設定できるURLパターンについてはこちら
②コードエディタを開き、プレキャンペーンJSに計測用コードを書く
該当キャンペーン内の設定 ＞ URL（群）をクリックし、「コード専用モードを開く」にチェックを付ける
画面右上にある縦の3点リーダーをクリックし、「Modify in Editor」をクリック。
「キャンペーンJS/CSS」→「JAVASCRIPT」のタブ右横の歯車マーク→「プレキャンペーンJS」の順にクリックをする。
プレキャンペーンJSに計測用のコードを書きます。コードは下記を入れてください。
※一部、URLとゴール番号をご自身で入れていただく必要がございます。
async function initYTAPI() {
await YTurlCheck("ここにyoutubeのURLを入れます");
if (typeof (window.YT) == "undefined") {
vwo_$.getScript("https://www.youtube.com/iframe_api", function (data, textStatus, jqxhr) {
if (window.timerX) clearInterval(window.timerX);
window.timerX = setInterval(function () {
if (typeof (window.YT.Player) != "undefined") {
console.log("Insider undefined");
console.log(vwo_$("#vwo_YT"));
window.vwo_player = new YT.Player('vwo_YT', {
events: {
'onStateChange': onPlayerStateChange
}
});
clearInterval(window.timerX);
}
}, 100);
});
} else {
window.vwo_player = new YT.Player('vwo_YT', {
events: {
'onStateChange': onPlayerStateChange
}
});
}
}
function YTurlCheck(videoURL) {
var yTCSS = "iframe[src='" + videoURL + "']";
return new Promise(resolve => {
var waitForVideoToLoad = setInterval(function () {
if (vwo_$(yTCSS).length > 0) {
clearInterval(waitForVideoToLoad);
var vidSrc = vwo_$(yTCSS).attr('src');
console.log("vidSrc is....");
console.log(vidSrc);
if (vidSrc.indexOf('enablejsapi=1') == -1) {
vwo_$(yTCSS).attr({
'id': 'vwo_YT'
});
if (vidSrc.indexOf('?') > -1) {
vwo_$(yTCSS).attr({
'src': vwo_$(yTCSS).attr('src') + "&enablejsapi=1"
});
} else {
vwo_$(yTCSS).attr({
'src': vwo_$(yTCSS).attr('src') + "?enablejsapi=1"
});
}
} else if (vidSrc.indexOf('enablejsapi=1') > -1) {
vwo_$(yTCSS).attr({
'id': 'vwo_YT'
});
}
resolve();
}
}, 1000);
})
}
function onPlayerStateChange(event) {
console.log('change');
if (event.data == YT.PlayerState.PLAYING) {
console.log('Video Played');
/* Place your custom conversion goal code here. You can get this code from the summary page of the A/B test inside VWO dashboard */
window._vis_opt_queue = window._vis_opt_queue || [];
window._vis_opt_queue.push(function() {_vis_opt_goal_conversion(ここにゴールの番号を入れます);});
};
};
try {
vwo_$(function () {
console.log("before YTurlCheck func");
initYTAPI();
});
} catch (e) {
console.log('Reach out to us:support@vwo.com');
}
※iframeタグのゴール計測は不安定なため、上記の設定を行っていただいてもゴール計測が出来ない場合が稀にございます。その際は、サポートまでお問い合わせください。