Wie bereits im Teil 1 geschildert, können YouTube Videos hervorragend mit Google Analytics getracked werden und dient zur Auswertung des Nutzerinteresses an den dargebotenen Videos Ihrer Webseiten. Wozu dann noch dieser zweite Post? Nun, unlängst ist mir eine unschöne „Nebenwirkung“ aufgefallen, die im Zusammenhang mit Apple’s Safari Browser auf iPhone, iPod Touch und dem iPad entsteht.
Denn solange auf Ihrem System (Windows, Linux, Mac OS, etc.) ein installierter Flashplayer seinen Dienst verrichtet, stellt die Wiedergabe eines Videos kein Problem dar. Aber gerade die Nutzer mit mobilen Endgeräten (iPhone & Co.), die auf Ihre Website zugreifen, erleben beim Aufruf der entsprechenden Seite eine böse Überraschung: Das YouTube Video kann nicht abgespielt werden; es wird noch nicht einmal angezeigt! Leider kein angenehmer Zustand, sondern viel eher eine „bad user experience“.
Nachdem ich mich mit dem Problem etwas näher beschäftigt habe, ist mir die nachstehende Lösung eingefallen: Hier wird in einer (zugegebenermaßen etwas aufwändigen) Routine geprüft, ob ein Flashplayer installiert ist. Wenn nicht, wird ein entsprechendes Bild eingefügt und bei Klick darauf eine Umleitung zu YouTube eingerichtet.
Um das zu bewerkstelligen, muss lediglich der unten aufgeführte Quellcodes in unseren YouTube Tracker integriert werden: kopieren Sie einfach den Quellcode zwischen den beiden <!– snip no flash –> Tags in den Abschnitt „Player“ Ihres vorhandenen YouTube Trackers. Sie haben doch schon unseren YouTube Tracker? Nicht? Dann einfach Kommentar mit E-Mail-Adresse hinterlassen, dann schicke ich Ihnen den kostenfreien Code zu…
Allerdigns sind im Quellcode dieser BETA-Version sind noch ein paar Anpassungen nötig:
Diese muss mit der des im YouTube Tracker eingegebenen identisch sein.
document.write(‚<A HREF=“http://www.youtube.com/watch?v=LvutIWu4dvU&hl/„><img src=“pic1.JPG“ title=“Sie haben kein Flash installiert. Sie werden zu YouTube weitergeleitet.“ ></A>‘);
Ein Bild, das anstelle des YouTube Videos angezeigt werden soll, muss angegeben werden und natürlich auch vorhanden sein. Idealerweise ist dieses mit Ausschnitt des anzuzeigenden Videos identisch.
document.write(‚<A HREF=“http://www.youtube.com/watch?v=LvutIWu4dvU&hl/“><img src=“pic1.JPG“ title=“Sie haben kein Flash installiert. Sie werden zu YouTube weitergeleitet.“ ></A>‘);
Erläutern Sie, was warum passiert. Nutzen Sie die Tool Tip Text Funktion, um den Betrachter zu informieren.
document.write(‚<A HREF=“http://www.youtube.com/watch?v=LvutIWu4dvU&hl/“><img src=“pic1.JPG“ title=“Sie haben kein Flash installiert. Sie werden zu YouTube weitergeleitet.“ ></A>‘);
Hier das Ergebnis. Die Weiterleitungen werden in Google Analytics in den Berichten des Ereignistracking angezeigt. Hier im zweiten Unterpunkt.
Hier nun die Modifikation im Überblick:
<!---------------------------------------------------------------------- snip Player1 ----------------------------------------------------------->
<table align="center">
<tr>
<td><div id="videoDiv">
<!---------------------------------------------------------------------- snip no flash ---------------------------------------------------------->
<script language="javascript">
var flashinstalled = 0;
var flashversion = 0;
MSDetect = "false";
if (navigator.plugins && navigator.plugins.length) {
x = navigator.plugins["Shockwave Flash"];
if (x) {
flashinstalled = 2;
if (x.description) {
y = x.description;
flashversion = y.charAt(y.indexOf('.')-1);
}
}
else
flashinstalled = 1;
if (navigator.plugins["Shockwave Flash 2.0"]){
flashinstalled = 2;
flashversion = 2;
}
}
else if (navigator.mimeTypes && navigator.mimeTypes.length) {
x = navigator.mimeTypes['application/x-shockwave-flash'];
if (x && x.enabledPlugin)
flashinstalled = 2;
else
flashinstalled = 1;
}
else
MSDetect = "true";
</script>
<script language="vbscript">
on error resume next
If MSDetect = "true" Then
For i = 2 to 6
If Not(IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash." & i))) Then
Else
flashinstalled = 2
flashversion = i
End If
Next
If flashinstalled = 0 Then
flashinstalled = 1
End If
End If
</script>
<script language="javascript">
if (flashinstalled == 2) {
if (flashversion)
//document.write("You have Flash version " + flashversion + " installed.");
else
document.write("You have Flash installed, but I can't detect the version.");
}
else if (flashinstalled == 1) {
ytpEventTracker._trackEvent("No Flash, load source from YouTube - " + kategory + " - " + videoName,videoName);
document.write('<A HREF="http://www.youtube.com/watch?v=LvutIWu4dvU&hl/"><img src="pic1.JPG" title="Sie haben kein Flash installiert. Sie werden zu YouTube weitergeleitet." ></A>');
}
else document.write("I can't find out if you have Flash installed.");
</script> -->
<!---------------------------------------------------------------------- snip no flash ---------------------------------------------------------->
</div></td>
</tr>
</table>
<!---------------------------------------------------------------------- snip Player1 ----------------------------------------------------------->
Hi, ich finde eure Arbeit Klasse!!! Genau nach dem hab ich schon länger gesucht! Wäre es möglich den gesamten Quellcode zu bekommen? Am liebsten mit einer kleinen Demo-Seite, da ich nicht gerade der Herr von JavaScript & Co bin 😉
Cheers
Alexander (kontakt [at] alexanderholzer.com
Hey,
wirklich sehr interessanter Artikel!
Ich bräuchte auch den Code um zu tracken, wie oft ein Yiutube video, das auf unserer Seite eingebunden ist, abgesoielt wird und natürlich das, was notwendig ist, um die Videos auch auf mobilen Endgeräten darzustellen.
Vielen Dank und Grüß!
Großartiger blog. Könntest du mir bitte den Youtube Tracker zuschicken? Besten Dank und viele Grüße!
Vinzent
Hallo,
toller Artikel – genau eine solche Lösung zur Analyse meiner Youtube-Videos innerhalb von Analytics habe ich gesucht. Könntest Du mir den YouTube Tracker zuschicken? Besten Dank und viele Grüße
Hallo Robert,
danke für diesen Beitrag! Genau mit diesem Problem habe ich nun auch zu tun…
Bitte sende mir doch den nötigen Code incl. YouTube Tracker
Super!
Vielen Dank
René
Hallo,
ein wirklich toller Beitrag. Nach solch einer Lösung suche ich bereits die ganze Zeit. Könntet Ihr mir den gesamten Quellcode + den YouTube Tracker zukommen lassen? Das wäre super.
Vielen Dank und viele Grüße
Ronny
Code kommt per E-Mail… 🙂