Solved
YouTubeの動画再生率を用いたスマートリストを作成する方法
現在YouTube動画を用いたナーチャリング施策を検討しています。
具体的には、YouTube動画の再生率が高い顧客をスマートリストで一覧表示し、インサイドセールスの架電につなげるというものです。
以下のディスカッションを拝見し、Marketoのアクティビティログへ再生率を反映させるところまでは成功しましたが、
「参照元 URL」「クエリのパラメータ」「ウェブページ URL」といった詳細アクティビティログへ再生率を反映できているわけではないため、スマートリストの条件として活用できる状態にありません。
以下のJavascriptに何らかの記述を追加する必要がありそうなのですが、見当がつかず、お分かりになられるかたおりましたら教えてください。
<script>
'use strict';
(function () {
$(function () {
var idx = '';
var $target = $('[id *= "player_"]');
// idを取得
$target.each(
function(i){
var tempId = $(this).attr('id').replace('player_', '');
if( i >= 1){
idx += ',';
}
idx += tempId;
}
)
// youtube API
var tag = document.createElement('script');
tag.src="http://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
window.onYouTubeIframeAPIReady = function() {
addYoutubePlayer( idx );
}
var playerArr = {}; // player obj
// playerを生成
function addYoutubePlayer( videoIDs ) {
if( videoIDs === undefined ){
throw new Error('videoIDs is not defined!');
}
var tmpIdArr = videoIDs.split(",");
for(var i in tmpIdArr){
var videoID = tmpIdArr[i];
var playerID = 'player_' + videoID;
var player = new YT.Player(
playerID, {
videoId: videoID,
events: {
onReady : onPlayerReady,
onStateChange : onPlayerStateChange
},
playerVars: {
rel :0,
showinfo :0,
controls :1
}
}
);
//
var tempObj = {
player : player,
startFlg : false,
send25per : 0,
send50per : 0,
send75per : 0,
totalSeconds : 0,
second30Flg : false,
intervalId : 0,
oldTime : 0,
currentTime : 0,
send25Flg : false,
send50Flg : false,
send75Flg : false,
send100Flg : false
}
playerArr[videoID] = tempObj;
}
}
function onPlayerReady( event ) {
var id = event.target.getVideoUrl().replace(/https?:\/\/www\.youtube\.com\/watch\?v=/, '');
var totalSeconds = event.target.getDuration() - 1;
playerArr[id].totalSeconds = totalSeconds;
playerArr[id].send25per = totalSeconds * 0.25;
playerArr[id].send50per = totalSeconds * 0.50;
playerArr[id].send75per = totalSeconds * 0.75;
}
function onPlayerStateChange(event) {
var eventNum = event.data;
var id = event.target.getVideoUrl().replace(/https?:\/\/www\.youtube\.com\/watch\?v=/, '');
switch ( eventNum ) {
case YT.PlayerState.ENDED: // 0 (再生終了（＝最後まで再生した）)
playerArr[id].startFlg = false;
playerArr[id].second30Flg = false;
clearInterval( playerArr[id].intervalId );
break;
case YT.PlayerState.PLAYING: // 1 (再生中)
if( !playerArr[id].startFlg ){
playerArr[id].startFlg = true;
// playを飛ばす
sendGA( id, 'play', '', '0%');
}
//
playerArr[id].intervalId = setInterval(function(){
playerArr[id].oldTime = playerArr[id].currentTime;
playerArr[id].currentTime = event.target.getCurrentTime();
var range = Math.abs( playerArr[id].currentTime - playerArr[id].oldTime );
// seekの判断
if( Math.floor(range) >= 2 ){
// seek後も同じ計測エリアの場合はフラグを戻さない
// 25per
if( playerArr[id].oldTime >= ( playerArr[id].send25per ) &&
playerArr[id].oldTime <= ( playerArr[id].send50per ) &&
playerArr[id].currentTime >= ( playerArr[id].send25per ) &&
playerArr[id].currentTime <= ( playerArr[id].send50per )
){
playerArr[id].send25Flg = true;
} else {
playerArr[id].send25Flg = false;
}
// 50per
if( playerArr[id].oldTime >= ( playerArr[id].send50per ) &&
playerArr[id].oldTime <= ( playerArr[id].send75per ) &&
playerArr[id].currentTime >= ( playerArr[id].send50per ) &&
playerArr[id].currentTime <= ( playerArr[id].send75per )
){
playerArr[id].send50Flg = true;
} else {
playerArr[id].send50Flg = false;
}
// 75per
if( playerArr[id].oldTime >= ( playerArr[id].send75per ) &&
playerArr[id].oldTime <= ( playerArr[id].totalSeconds ) &&
playerArr[id].currentTime >= ( playerArr[id].send75per ) &&
playerArr[id].currentTime <= ( playerArr[id].totalSeconds )
){
playerArr[id].send75Flg = true;
} else {
playerArr[id].send75Flg = false;
}
playerArr[id].send100Flg = false;
}
// 30秒のフラグ
if( playerArr[id].currentTime >= ( 30 ) &&
playerArr[id].currentTime <= ( 30 + 1 ) &&
!playerArr[id].second30Flg
){
sendGA( id, '', '30秒突破', '');
playerArr[id].second30Flg = true;
}
// 25%のフラグ
if( playerArr[id].currentTime >= ( playerArr[id].send25per ) &&
playerArr[id].currentTime <= ( playerArr[id].send50per ) &&
!playerArr[id].send25Flg
){
sendGA( id, '', '', '25%');
playerArr[id].send25Flg = true;
}
// 50%のフラグ
if( playerArr[id].currentTime >= ( playerArr[id].send50per ) &&
playerArr[id].currentTime <= ( playerArr[id].send75per ) &&
!playerArr[id].send50Flg
){
sendGA( id, '', '', '50%');
playerArr[id].send50Flg = true;
}
// 75%のフラグ
if( playerArr[id].currentTime >= ( playerArr[id].send75per ) &&
playerArr[id].currentTime <= ( playerArr[id].totalSeconds ) &&
!playerArr[id].send75Flg
){
sendGA( id, '', '', '75%');
playerArr[id].send75Flg = true;
}
// 100%のフラグ
if( playerArr[id].currentTime >= ( playerArr[id].totalSeconds ) &&
!playerArr[id].send100Flg ) {
sendGA( id, 'finish', 'complete', '100%');
playerArr[id].send100Flg = true;
}
// loopFunc( event.target );
}, 250);
break;
case YT.PlayerState.PAUSED: // 2 (一時停止された)
clearInterval( playerArr[id].intervalId );
if(playerArr[id].currentTime >= playerArr[id].totalSeconds ) {
return;
}
sendGA( id, 'stop', '', '' );
break;
case YT.PlayerState.BUFFERING: // 3 (バッファリング中)
if( !playerArr[id].startFlg ){
playerArr[id].startFlg = true;
sendGA( id, 'play', '', '0%');
}
break;
case YT.PlayerState.CUED: // 5 (頭出しされた)
break;
case -1: // 動画未再生
break;
}
}
function sendGA( id, label, time1, time2 ) {
// console.log( 'id : ' + id, ' / label : ' + label, ' / time-1 : ' + time1, ' / time-2 : ' + time2 );
var url = 'id:'+ id + '_label :' + label + '_time-1:' + time1 + '_%_:' + time2
/*
dataLayer.push({
'event' : 'Click',
'category' : 'YouTube',
'action' : id,
'label' : label, // 'play' / 'finish'
'time-1' : time1, // 30秒 / complete
'time-2' : time2 // percent
});
*/
Munchkin.munchkinFunction('clickLink', {
'href': url
}
);
}
});
}());
</script>