HI @Keshav_mehra, Youtube popup videos can be tracked. A difference between embedded video and pop-up video is that the embedded video will be loaded while the page is loading so that objects required to track a video will be available when our code loads, in the case of pop-up video object required to track a video, will be available only when someone interacts. So we need to delay the loading of our tracking code. Please refer to the below code and modify it according to your requirements. Note: I used this code long back jQuery(document.body).on('click', Use your selector here, function()
{
// Tealium Tracking Code for YouTube iframe embeds
//
// Read the identifiers on the YouTube iframes. If not present, then add ids
setTimeout(function(){
if (jQuery('iframe[src*="youtube.com"]').length > 0) {
var i = 0;
window.iframe_id = [];
jQuery('iframe[src*="youtube.com"]').each(function() {
if (jQuery(this).attr('id')) {
var id = jQuery(this).attr('id');
window.iframe_id.push(id)
} else {
var id = 'tealium_youtube' + i;
jQuery(this).attr('id', id)
window.iframe_id.push(id)
i++;
}
})
}
// Configure Milestones
//
function setMileStones(i) {
// Set the intervals here as you want them reported, in % viewed, each number separated by a comma
// If you do not want mileStones set mileStones[i] = [] ;
mileStones[i] = [10, 25, 50, 75, 90];
}
var mileStones = [];
for (i = 0; i < window.iframe_id.length; i++) {
setMileStones(i)
};
// Load the YouTube iframe library
//
var ytapi = document.createElement('script');
ytapi.src="https://ww" + "w.youtube" + ".com/iframe_api";
var scriptref = document.getElementsByTagName('script')[0];
scriptref.parentNode.insertBefore(ytapi, scriptref);
window.players = [];
window.onYouTubeIframeAPIReady = function() {
// Confirm existing ID or set ID in the iframe for each video on the page
jQuery('iframe[src*="youtube.com"]').each(function() {
var id = jQuery(this).attr('id');
window.players[id] = new YT.Player(id, {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
});
};
window.start = [];
window.onPlayerReady = function(event) {
//Log that the video is ready/open
var idx;
for (i = 0; i < window.iframe_id.length; i++) {
if (window.iframe_id[i] === event.target.a.id) {
idx = i;
};
window.start.push(true);
}
if (event.target.getPlayerState() === YT.PlayerState.CUED) {
var player = event.target;
utag.link({
tealium_event: 'video_load',
video_id: player.j.videoData.video_id,
video_length: player.getDuration(),
video_name: player.j.videoData.title,
video_platform: 'YouTube'
});
}
};
var playerCheckInterval, event;
window.onPlayerStateChange = function(event) {
player = event.target;
var playhead, idx;
for (i = 0; i < window.iframe_id.length; i++) {
if (window.iframe_id[i] === event.target.a.id) {
idx = i;
};
}
tealium_event = "";
if (event.data == YT.PlayerState.PLAYING) {
if (start[idx]) {
if (mileStones[idx].length > 0) {
playerCheckInterval = setInterval(mileStoneCheck, 50);
}
tealium_event = "video_start";
playhead = "0" ;
} else {
//This will catch when the video playback is changed from not playing to playing
tealium_event = "video_play";
playhead = player.getCurrentTime().toString();
}
start[idx] = false;
} else if (event.data == YT.PlayerState.PAUSED) {
tealium_event = "video_pause";
playhead = player.getCurrentTime().toString();
} else if (event.data == YT.PlayerState.ENDED) {
if (mileStones[idx].length > 0) {
clearInterval(playerCheckInterval);
// reset in case visitor replays the video
playerCheckInterval = 0;
setMileStones(idx);
}
tealium_event = "video_complete"; // utag
}
if (tealium_event) {
utag.DB("Video event: " + tealium_event + ", video ID: " + window.iframe_id[idx]);
utag.link({
tealium_event: tealium_event,
video_playhead: playhead,
video_id: player.j.videoData.video_id,
video_length: player.getDuration().toString(),
video_name: player.j.videoData.title,
video_platform: 'YouTube'
});
}
function mileStoneCheck() {
var idx;
for (i = 0; i < window.iframe_id.length; i++) {
if (window.iframe_id[i] === player.a.id) {
idx = i;
};
}
var duration = player.getDuration();
var playhead = player.getCurrentTime();
var percComplete = (playhead / duration) * 100;
var ms_len = mileStones[idx].length;
if (ms_len > 0) {
var next_ms = mileStones[idx][0];
if (next_ms <= percComplete) {
mileStones[idx].shift();
utag.DB("Video event: video_milestone, video ID: " + window.iframe_id[idx] + ", Milestone=" + percComplete.toFixed());
utag.link({
tealium_event: 'video_milestone',
video_playhead: parseInt(playhead).toString(),
video_id: player.j.videoData.video_id,
video_length: parseInt(duration).toString(),
video_milestone: next_ms.toString(),
video_name: player.j.videoData.title,
video_platform: 'YouTube'
});
}
}
}
}
}, 500);
}); Thanks, VJ
... View more
Expand/CollapseMenu
