gtm4wp-youtube.js

let gtm4wp_youtube_percentage_tracking = 10;
let gtm4wp_youtube_percentage_tracking_timeouts = {};
let gtm4wp_youtube_percentage_tracking_marks = {};

if ( typeof onYouTubeIframeAPIReady === "undefined" ) {
	window.onYouTubeIframeAPIReady = function() {
		window[ gtm4wp_datalayer_name ].push({
			'event': 'gtm4wp.mediaApiReady',
			'mediaType': 'youtube'
		});

		const gtm4wp_youtube_frames = document.querySelectorAll( "iframe[src^='https://www.youtube.com/embed']" );
		if ( !gtm4wp_youtube_frames || gtm4wp_youtube_frames.length == 0 ) {
			return;
		}

		gtm4wp_youtube_frames.forEach( function( youtube_frame ) {
			let playerID = youtube_frame.getAttribute( "id" );

			if ( ( playerID === null ) || ( playerID === undefined ) || ( playerID === "" ) ) {
				const _gtm4wp_temp  = youtube_frame.getAttribute( "src" ).split( "?" );
				const _gtm4wp_temp2 = _gtm4wp_temp[ 0 ].split( "/" );

				playerID = "youtubeplayer_" + _gtm4wp_temp2[ _gtm4wp_temp2.length-1 ];
				youtube_frame.setAttribute( "id", playerID );
			}

			let gtm4wp_yturl = youtube_frame.getAttribute( "src" );
			if ( gtm4wp_yturl.indexOf( "enablejsapi=1" ) == -1 ) {
				if ( gtm4wp_yturl.indexOf( "?" ) == -1 ) {
					gtm4wp_yturl += "?";
				}

				gtm4wp_yturl += "&enablejsapi=1&origin=" + document.location.protocol + "//" + document.location.hostname;

				youtube_frame.setAttribute( "src", gtm4wp_yturl );
			}

			player = new YT.Player( playerID, {
				events: {
					'onReady': gtm4wp_onYouTubePlayerReady,
					'onStateChange': gtm4wp_onYouTubePlayerStateChange,
					'onPlaybackQualityChange': gtm4wp_onYouTubePlaybackQualityChange,
					'onPlaybackRateChange': gtm4wp_onYouTubePlaybackRateChange,
					'onError': gtm4wp_onYouTubeError,
					'onApiChange': gtm4wp_onYouTubeApiChange
				}
			});
		});
	};

	let tag = document.createElement( 'script' );
	tag.src = "//www.youtube.com/iframe_api";
	let firstScriptTag = document.getElementsByTagName( 'script' )[0];
	firstScriptTag.parentNode.insertBefore( tag, firstScriptTag );
} else {
	let gtm4wp_err = new Error( "Another code is already utilizing YouTube API, GTM4WP plugin can not load YouTube tracking!" );
	throw gtm4wp_err;
}

function gtm4wp_onYouTubePlayerReady( event ) {
	const videodata = event.target.getVideoData();

	window[ gtm4wp_datalayer_name ].push({
		'event': 'gtm4wp.mediaPlayerReady',
		'mediaType': 'youtube',
		'mediaData': {
			'id': videodata.video_id,
			'author': videodata.author,
			'title': videodata.title,
			'url': event.target.getVideoUrl(),
			'duration': event.target.getDuration()
		},
		'mediaCurrentTime': event.target.getCurrentTime()
	});
}

function gtm4wp_onYouTubePlayerStateChange( event ) {
	let playerState = "unknown";

	switch( event.data ) {
		case -1:                       playerState = "unstarted"; break;
		case YT.PlayerState.ENDED:     playerState = "ended"; break;
		case YT.PlayerState.PLAYING:   playerState = "play"; break;
		case YT.PlayerState.PAUSED:    playerState = "pause"; break;
		case YT.PlayerState.BUFFERING: playerState = "buffering"; break;
		case YT.PlayerState.CUED:      playerState = "cued"; break;
	}

	const videoId = event.target.getVideoData().video_id;

	if ( ( YT.PlayerState.PLAYING == event.data ) && ( gtm4wp_youtube_percentage_tracking > 0 ) ) {
		gtm4wp_youtube_percentage_tracking_timeouts[ videoId ] = setInterval(function() {
			gtm4wp_onYouTubePercentageChange( event );
		}, 1000);
	} else {
		if ( gtm4wp_youtube_percentage_tracking_timeouts[ videoId ] ) {
			clearInterval( gtm4wp_youtube_percentage_tracking_timeouts[ videoId ] );
		}
	}

	const videodata = event.target.getVideoData();

	window[ gtm4wp_datalayer_name ].push({
		'event': 'gtm4wp.mediaPlayerStateChange',
		'mediaType': 'youtube',
		'mediaData': {
			'id': videodata.video_id,
			'author': videodata.author,
			'title': videodata.title,
			'url': event.target.getVideoUrl(),
			'duration': event.target.getDuration()
		},
		'mediaPlayerState': playerState,
		'mediaCurrentTime': event.target.getCurrentTime()
	});
}

function gtm4wp_onYouTubePlaybackQualityChange( event ) {
	const videodata = event.target.getVideoData();

	window[ gtm4wp_datalayer_name ].push({
		'event': 'gtm4wp.mediaPlayerEvent',
		'mediaType': 'youtube',
		'mediaData': {
			'id': videodata.video_id,
			'author': videodata.author,
			'title': videodata.title,
			'url': event.target.getVideoUrl(),
			'duration': event.target.getDuration()
		},
		'mediaCurrentTime': event.target.getCurrentTime(),
		'mediaPlayerEvent': 'quality-change',
		'mediaPlayerEventParam': event.data
	});
}

function gtm4wp_onYouTubePlaybackRateChange( event ) {
	const videodata = event.target.getVideoData();

	window[ gtm4wp_datalayer_name ].push({
		'event': 'gtm4wp.mediaPlayerEvent',
		'mediaType': 'youtube',
		'mediaData': {
			'id': videodata.video_id,
			'author': videodata.author,
			'title': videodata.title,
			'url': event.target.getVideoUrl(),
			'duration': event.target.getDuration()
		},
		'mediaCurrentTime': event.target.getCurrentTime(),
		'mediaPlayerEvent': 'ratechange',
		'mediaPlayerEventParam': event.data
	});
}

function gtm4wp_onYouTubeError( event ) {
	const videodata = event.target.getVideoData();

	window[ gtm4wp_datalayer_name ].push({
		'event': 'gtm4wp.mediaPlayerEvent',
		'mediaType': 'youtube',
		'mediaData': {
			'id': videodata.video_id,
			'author': videodata.author,
			'title': videodata.title,
			'url': event.target.getVideoUrl(),
			'duration': event.target.getDuration()
		},
		'mediaCurrentTime': event.target.getCurrentTime(),
		'mediaPlayerEvent': 'error',
		'mediaPlayerEventParam': event.data
	});
}

function gtm4wp_onYouTubeApiChange( event ) {
	const videodata = event.target.getVideoData();

	window[ gtm4wp_datalayer_name ].push({
		'event': 'gtm4wp.mediaPlayerEvent',
		'mediaType': 'youtube',
		'mediaData': {
			'id': videodata.video_id,
			'author': videodata.author,
			'title': videodata.title,
			'url': event.target.getVideoUrl(),
			'duration': event.target.getDuration()
		},
		'mediaCurrentTime': event.target.getCurrentTime(),
		'mediaPlayerEvent': 'api-change',
		'mediaPlayerEventParam': event.data
	});
}

function gtm4wp_onYouTubePercentageChange( event ) {
	const videoId          = event.target.getVideoData().video_id;
	const videoCurrentTime = event.target.getCurrentTime();
	const videoDuration    = event.target.getDuration();
	const videoPercentage  = Math.floor( videoCurrentTime / videoDuration * 100 );

	if ( typeof gtm4wp_youtube_percentage_tracking_marks[ videoId ] == "undefined" ) {
		gtm4wp_youtube_percentage_tracking_marks[ videoId ] = [];
	}

	const videodata = event.target.getVideoData();

	for( let i=0; i<100; i+=gtm4wp_youtube_percentage_tracking ) {
		if ( ( videoPercentage > i ) && ( gtm4wp_youtube_percentage_tracking_marks[ videoId ].indexOf( i ) == -1 ) ) {
			gtm4wp_youtube_percentage_tracking_marks[ videoId ].push( i );

			window[ gtm4wp_datalayer_name ].push({
				'event': 'gtm4wp.mediaPlaybackPercentage',
				'mediaType': 'youtube',
				'mediaData': {
					'id': videodata.video_id,
					'author': videodata.author,
					'title': videodata.title,
					'url': event.target.getVideoUrl(),
					'duration': event.target.getDuration()
				},
				'mediaCurrentTime': event.target.getCurrentTime(),
				'mediaPercentage': i
			});
		}
	}
}