Videostatus Auswertung in Piwik von Borewa, 13.01.2014 18:40

Videostatus Auswertung in Piwik

Borewa 13.01.2014 18:40

javascript

Hallo Zusammen,

ich versuche gerade ein kleines Script zu schreiben, das mir die Statusdaten in Piwik übermittelt, damit ich diese Auswerten kann, ob ein Video zu endet geguckt wurde, wie lange es geguckt wurde usw.

Ich habe folgenes Script gefunden, welche immer den Status den Video ausliegt.
Da ich diese Daten aber erstmal in globalen Variablen habe möchte, damit ich am ende später die Daten übertragen kann, bzw noch ggf die Aktuellezeit des Videos mit übertrage.

var youTubePlayerLoggers = {};  
var totalvideos = 0;  
var videoid = new Array();  
var videoplayed = new Array();  
  
function onYouTubePlayerReady(id, log)  
{  
	var video = document.getElementById(id);  
  
	//State constants  
	var unstarted = -1;  
	var ended 	  = 0;  
	var playing   = 1;  
	var paused    = 2;  
	var buffering = 3;  
	var cued      = 5; //Page loaded, video has not been played yet  
  
	//Video array default values being set for first time  
	videoid[totalvideos] = id;  
	videoplayed[totalvideos] = false;  
  
	totalvideos = totalvideos + 1;  
	  
	youTubePlayerLoggers[id] = function(state)  
	{  
		log = true;  
		document.getElementById("state").innerHTML="youTubePlayerLoggers[id]"; //FOR TESTING  
  
		var el = document.getElementById(id);  
		var url = "http://www.youtube.com/watch?v=" + getYoutubeVideoID(el.getVideoUrl());  
		var arrayindex = arraySearch(id);  
		var currenttime = Math.ceil(el.getCurrentTime());  
  
		if (state == playing)  
		{  
			if (videoplayed[arrayindex] == false)  
			{  
				if( log === true) {  
					_paq.push(['setCustomVariable',  1, "Video-Status", "abgespielt (einmal)", "page"]);  
					_paq.push(['setCustomVariable',  2, "Videoabspielzeit", currenttime, "page"]);  
					_paq.push(['setCustomVariable',  5, "Abgespielt-einmal", currenttime, "page"]);  
				}  
				document.getElementById("state").innerHTML = "URL = "+url+"<br />State = "+state+"<br />Value = unique_play_per_page"; //FOR TESTING  
			}  
			else {			  
				if( log === true) {  
					_paq.push(['setCustomVariable',  1, "Video-Status", "abgespielt (mehrfach)", "page"]);  
					_paq.push(['setCustomVariable',  2, "Videoabspielzeit", currenttime, "page"]);  
					_paq.push(['setCustomVariable',  4, "Abgespielt-mehrfach", currenttime, "page"]);  
				}  
				document.getElementById("state").innerHTML = "URL = "+url+"<br />State = "+state+"<br />Value = play"; //FOR TESTING  
			}  
			//Flag video as having been played once  
			videoplayed[arrayindex] = true;  
		}  
		else if (state == ended) {  
			if( log === true) {  
				_paq.push(['setCustomVariable',  1, "Video-Status", "Video zu Ende geguckt", "page"]);  
			}  
			document.getElementById("duration").innerHTML = "Duration = "+currenttime; //FOR TESTING  
			document.getElementById("state").innerHTML = "URL = "+url+"<br />State = "+state+"<br />Value = ended"; //FOR TESTING  
		}  
		else if (state == paused) {  
			if( log === true) {  
				_paq.push(['setCustomVariable',  1, "Video-Status", "Pause", "page"]);  
				_paq.push(['setCustomVariable',  2, "Videoabspielzeit", currenttime, "page"]);  
				_paq.push(['setCustomVariable',  3, "Pause", currenttime, "page"]);  
			}  
  
			document.getElementById("duration").innerHTML = "Duration = "+currenttime; //FOR TESTING  
			document.getElementById("state").innerHTML = "URL = "+url+"<br />State = "+state+"<br />Value = paused"; //FOR TESTING  
		}  
		else {  
			if( log === true)  
				_paq.push(['setCustomVariable',  1, "Video-Status", "nicht abgespielt", "page"]);		  
		}  
		  
		return "test";  
	};  
  
	video.addEventListener("onStateChange", "youTubePlayerLoggers."+id);  
	video.addEventListener('onError', 'onPlayerError');  
}  
  
function onPlayerError(errorCode)  
{  
	alert(errorCode);  
}  
  
function getYoutubeVideoID(url)  
{  
	var urlArr = url.split("v=");  
	var urlArr2 = urlArr[1].split("&");  
	return urlArr2[0];  
}  
  
function arraySearch(what)  
{  
	for (var i=0, len=totalvideos; i<len; ++i)  
	{  
		if(videoid.indexOf(what) >= 0) return i;  
	}  
}

Es ist schon leicht modifiziert und um die Piwik Benutzerdefinierten Variablen erweitert, zudem ist es für N-Videos gedacht. Da ich aber nicht genügend Piwik Variablen habe und ich auf meiner Seite nur 1 Video pro Seite einbinde, habe ich es leicht modifiziert, nur leider greift das onStateChange nicht mehr und ich weiß nicht wieso.

$(document).ready(function() {  
  
var youTubePlayerLoggers = {};  
var unique_play = true;  
var video_state = -1;  
var video = $(".video");  
var id = $(video).attr('id');  
	  
//function onYouTubePlayerReady(id) {  
	//var video = document.getElementById(id);  
  
	//State constants  
	var unstarted = -1;  
	var ended 	  = 0;  
	var playing   = 1;  
	var paused    = 2;  
	var buffering = 3;  
	var cued      = 5; //Page loaded, video has not been played yet  
	  
	youTubePlayerLoggers = function(state) {  
		  
		if (state == playing)  
		{  
			if (unique_play == true) {  
				video_state = 1;  
				unique_play = false;  
			}  
			else {  
				video_state = 2;  
			}  
			  
		}  
		else if (state == ended) {  
			video_state = 3;  
		}  
		else if (state == paused) {  
			video_state = 4;  
		}  
	};  
  
	$("#"+id).bind("onStateChange", "youTubePlayerLoggers");  
//}  
  
//onYouTubePlayerReady("iZQ0aBOv78I");  
  
window.onbeforeunload = verlassen;  
  
function verlassen () {  
	//var a = $(document).trigger("youTubePlayerLoggers.iZQ0aBOv78I");  
	  
	if(video_state == -1) {  
		_paq.push(['setCustomVariable',  1, "Video-Status", "nicht abgespielt", "page"]);  
	}  
	else if(video_state == 1) {  
		_paq.push(['setCustomVariable',  1, "Video-Status", "abgespielt (einmal)", "page"]);  
		  
		var currenttime = Math.ceil(video.getCurrentTime());	  
		_paq.push(['setCustomVariable',  2, "Videoabspielzeit", currenttime, "page"]);  
		_paq.push(['setCustomVariable',  5, "Abgespielt-einmal", currenttime, "page"]);		  
	}  
	else if(video_state == 2) {  
		_paq.push(['setCustomVariable',  1, "Video-Status", "abgespielt (mehrfach)", "page"]);  
		  
		var currenttime = Math.ceil(video.getCurrentTime());	  
		_paq.push(['setCustomVariable',  2, "Videoabspielzeit", currenttime, "page"]);  
		_paq.push(['setCustomVariable',  4, "Abgespielt-mehrfach", currenttime, "page"]);	  
	}  
	else if(video_state == 3) {  
		_paq.push(['setCustomVariable',  1, "Video-Status", "Video zu Ende geguckt", "page"]);  
	}  
	else if(video_state == 4) {  
		_paq.push(['setCustomVariable',  1, "Video-Status", "Pause", "page"]);  
		  
		var currenttime = Math.ceil(video.getCurrentTime());	  
		_paq.push(['setCustomVariable',  2, "Videoabspielzeit", currenttime, "page"]);  
		_paq.push(['setCustomVariable',  3, "Pause", currenttime, "page"]);	  
	}  
	  
	//_paq.push(['trackPageView']);  
	  
	return currenttime + "<-->" + video_state + "<-->" + id;  
  
}  
  
});

Das Video (im moment nur Youtube Videos) ist folgt eingebunden:

<object data="http://www.youtube.com/v/iZQ0aBOv78I&enablejsapi=1&playerapiid=iZQ0aBOv78I" id="iZQ0aBOv78I" class="video" type="application/x-shockwave-flash" height="344" width="425">  
<param value="http://www.youtube.com/v/iZQ0aBOv78I&enablejsapi=1&playerapöiid=iZQ0aBOv78I" name="movie"></param>  
<param value="always" name="allowscriptaccess"></param>  
</object>

Ich hänge fest und komme leider nicht mehr weiter, über einen Tipp würde ich mich sehr freuen.
Wenn jemand sogar einen Vorschlag hat, wie ich anders/besser das Problem lösen könnte, würde ich mich sogar noch mehr freuen.

MfG

BOREWA

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Borewa: Videostatus Auswertung in Piwik

Beitrag lesen

Videostatus Auswertung in Piwik

Videostatus Auswertung in Piwik