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-iQ/ta-p/14673 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);
});
... View more
Expand/CollapseMenu
