Tracking Youtube Popup Videos

[Keshav_mehra]

Does anyone knows how to track popup youtube videos through tealium ?
The video on the site is embedded with ?enablejsapi=1,but I am still unable to track it.
Does anyone has solution ?

[dragooon]

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