You tube tracking through Iframe not firing on second time (when we close and open the video on same

[Jayakrishnaa]

Team,

We have been trying to implement the you tube video which is appended in iframe and there are two videos on the same page. Also, we have two different video ID's for each video on the page.

The tracking and events are firing fine. Howevere, it is not tracking when we close and open the video again on the same session. We understand that we need some code modification on the "window.onYouTubeIframeAPIReady" fucntion. I have attached/inserted the code and link for the reference. This implemenetation was done from the Tealium IQ guide. Slightly we have done some modification for our project. Please let me know for any other information.

https://community.tealiumiq.com/t5/iQ-Tag-Management/YouTube-Video-Tracking-Setup-Guide-for-Tealium-...
https://community.tealiumiq.com/t5/Data-Layer/Data-Layer-Definition-Basic-Video-Tracking/ta-p/19681

jQuery(document.body).on('click','.click-play-block', 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] = [] ;
    console.log("test1");
	mileStones[i] = [25, 50, 75, 99];
}
var mileStones = [];
console.log("SetMilestone");
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
	console.log("test2");
    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;
			console.log("test3");
        };
        window.start.push(true);      
    }
    if (event.target.getPlayerState() === YT.PlayerState.CUED) {
        var player = event.target;
					console.log("test22");

        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;
	console.log("test5");
    var playhead, idx;
    for (i = 0; i < window.iframe_id.length; i++) {
        if (window.iframe_id[i] === event.target.a.id) {
            console.log("test6");
			idx = i;
        };
    }

    tealium_event = "";

    if (event.data == YT.PlayerState.PLAYING) {
		            console.log("test20");

        if (start[idx]) {
					            console.log("test21");

            if (mileStones[idx].length > 0) {
				console.log("test7");
                playerCheckInterval = setInterval(mileStoneCheck, 50);
            }
			console.log("test8");
            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();
			console.log("test9");
        }
        start[idx] = false;

    } else if (event.data == YT.PlayerState.PAUSED) {
        tealium_event = "video_pause";
        playhead = player.getCurrentTime().toString();
					console.log("test10");


    } else if (event.data == YT.PlayerState.ENDED) {
			console.log("test");
        
            clearInterval(playerCheckInterval);
            // reset in case visitor replays the video
            playerCheckInterval = 0;
			start[idx] = true;
			setMileStones(idx);
        
        //tealium_event = "video_complete"; // utag
    }

    if (tealium_event) {
		console.log("event check");
		if(playhead == 0)
		{
			//utag.link({'event_type' : 'video', 'event_name': 'play', 'video_position': current_time});
			//var ct= document.getElementsByTagName("video").currentTime;
			//current_time = ct;
			//console.log("play clicked, duration:"+ct);
			var s = window.s;
			s = s_gi(s_account);
			var tempPlugins = s.doPlugins;
			s.doPlugins = function() {};
			s.linkTrackVars = 'events,eVar30';
			s.linkTrackEvents = 'event30';
			s.events='event30';
			s.eVar30 ='Video_1'; 
			s.tl(this, 'o', 'Video_1');
			s.doPlugins = tempPlugins;
			s.linkTrackVars = 'None';
			s.linkTrackEvents = 'None';
		}
		
        /*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();
		//console.log("Current Time-->"+playhead);
		
        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();
				console.log("mileStone_Check");
				
		if ((percComplete.toFixed() == 25)) 
		{
			console.log("watched 25%")
			var s = window.s;
			s = s_gi(s_account);
			var tempPlugins = s.doPlugins;
			s.doPlugins = function() {};
			s.linkTrackVars = 'events,eVar30';
			s.linkTrackEvents = 'event35';
			s.events='event35';
			s.eVar30 = 'Video_1';
			s.tl(this, 'o', 'Video_1');
			s.doPlugins = tempPlugins;
			s.linkTrackVars = 'None';
			s.linkTrackEvents = 'None';
			//utag.link({'event_type' : 'video', 'event_action': '25% watched', 'video_milestone': '25%'});
			not_watched_25 = false;
		}
		else if ((percComplete.toFixed() == 50)) 
		{
			console.log("watched 50%")
			var s = window.s;
			s = s_gi(s_account);
			var tempPlugins = s.doPlugins;
			s.doPlugins = function() {};
			s.linkTrackVars = 'events,eVar30';
			s.linkTrackEvents = 'event36';
			s.events='event36';
			s.eVar30 = 'Video_1';
			s.tl(this, 'o', 'Video_1');
			s.doPlugins = tempPlugins;
			s.linkTrackVars = 'None';
			s.linkTrackEvents = 'None';
			//utag.link({'event_type' : 'video', 'event_action': '50% watched', 'video_milestone': '50%'});
			not_watched_50 = false;
		} 
		else if ((percComplete.toFixed() == 75)) 
		{
			console.log("watched 75%")
			var s = window.s;
			s = s_gi(s_account);
			var tempPlugins = s.doPlugins;
			s.doPlugins = function() {};
			s.linkTrackVars = 'events,eVar30';
			s.linkTrackEvents = 'event37';
			s.events='event37';
			s.eVar30 = 'Video_1';
			s.tl(this, 'o', 'Video_1');
			s.doPlugins = tempPlugins;
			s.linkTrackVars = 'None';
			s.linkTrackEvents = 'None';
			//utag.link({'event_type' : 'video', 'event_action': '75% watched', 'video_milestone': '75%'});
			not_watched_75 = false;
		} 		
		else if ((percComplete.toFixed() == 99)) 
		{
			//utag.link({'event_type' : 'video', 'event_name': 'video_complete'});
			console.log("watcehd 100%");
			var s = window.s;
			s = s_gi(s_account);
			var tempPlugins = s.doPlugins;
			s.doPlugins = function() {};
			s.linkTrackVars = 'events,eVar30';
			s.linkTrackEvents = 'event38';
			s.events='event38';
			s.eVar30 = 'Video_1';
			s.tl(this, 'o', 'Video_1');
			s.doPlugins = tempPlugins;
			s.linkTrackVars = 'None';
			s.linkTrackEvents = 'None';
			//reset values
			not_watched_100 = false;
		}
                /*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'
                });*/
            }
        }
    }
}
}, 1000);
});

[steve_lake]

Hi @Jayakrishnaa 

If you haven't already, I think it's worth raising a support ticket for this so that the team can look at it directly. 
I suspect it may be a very specific problem relating to the iFrame. 

Many thanks

Steve Lake

[Jayakrishnaa]

Sure, I will do that now. Thanks

[PavelKrejci]

Hi @Jayakrishnaa , have you been able to solve this issue? We have the same problem now. Thanks, Pavel