Tracking von YouTube Videos mit Google Analytics – Teil 2

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“.

Und es funktioniert doch…

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:

1. Die YouTube Video ID muss eingefügt werden.

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>’);

2. Ein Bild muss angegeben werden.

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>’);

3. Sie haben die Möglichkeit, einen Tool Tip Text einzufügen.

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>’);

Das Ergebnis kann sich sehen lassen…

Hier das Ergebnis. Die Weiterleitungen werden in Google Analytics in den Berichten des Ereignistracking angezeigt. Hier im zweiten Unterpunkt.

Die Modifikation des Quellcodes…

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 ----------------------------------------------------------->