Archiv
Kategorie

Event-Tracking

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

Tracking von YouTube Videos schlägt bei Nutzung von iPhone, iPod Touch und iPad fehl.

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

Ein mit dem Initialbild des Videos übereinstimmendes Bitmap sollte unbedingt vorhanden sein

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.

Nach der Modifikation des YouTube Trackers werden auch Events von iPhone & Co. erfasst

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

Der Blog-Artikel von Justin Cutroni vom 29.07.2008 inspirierte uns, die Nutzung der Videos auf unserer Website ebenfalls mit Google Analytics und dem darin enthaltenen Event-Tracking auszuwerten. Also machte sich unsere Technik daran, die Idee für unsere Webseite umzusetzen. Der Vorsatz war, es für die Redakteure in unserem CMS möglichst einfach zu gestalten. Die Videos sollten ohne Programmier-Kenntnisse auf den Seiten integriert und die entsprechenden Variablen problemlos angepasst werden können.

Der erste Ansatz

Chromeless YouTube Player - erster Ansatz

Im ersten Ansatz gingen wir die Aufgabe recht pragmatisch an. Hauptsache das Video funktioniert und dessen Nutzung wird erfasst! Nach einigem Hin und Her stand das erste Ergebnis fest und sah wie nebenstehend aus.

Ziemlich unschön, nicht wahr? Aber – Hey! – es hat funktioniert: Alle Steuerungselemente wurden im Tracking erfasst. Allerdings wunderten wir uns primär über die hohe Rate an “Stop”-Befehlen. Nach kurzer Zeit und etwas Analyse des Zahlenmaterials, sowie des Hinweises eines guten Freundes (was wohl maßgeblich zur Erkenntnis und Lösung des Problems beitrug) wurde es klar: der Betrachter sieht ja nichts! Nur ein schwarzes Rechteck. Also: wenn überhaupt geklickt wurde, dann nur um zu sehen, welches Video sich dahinter verbirgt. Zudem wäre es viel schöner (und vom Wiedererkennungswert geschickter), wenn der Player so aussähe, wie der eigentliche Player bei YouTube. Und schon züngelte die Flamme der Motivation zur “Verbesserung”…

Der zweite “Wurf”

Chromeless YouTube Player - zweiter Ansatz

In der zweiten Version unserer Umsetzung (Codename: “Jetzt-machen-wir’s-richtig”) wollten wir neben dem schicken Design auch alle anderen Vorteile des Players umsetzen (Vollbild, HQ, etc.). Also wieder zurück an den Anfang und neu durchdenken. Das Ergebnis unserer Bemühungen kann sich wohl sehen lassen:

Damit waren wir erst einmal zufrieden. Bis zu dem Moment, als wir mehrere Player an verschiedenen Positionen der Webseite platzierten. Ein neues Problem tauchte auf: Es wurde – ganz gleich bei welchem Player wir auf “PLAY” drückten – immer nur der erste Player auf einer Seite angesteuert und das Video gestartet. Somit stand die Frage im Raum “Wie können wir auf einer Seite MEHRERE Videoplayer ansteuern und abspielen?”.

Nun, das hört sich zunächst trivial an, gestaltete sich in der Umsetzung jedoch hochgradig schwierig. Diverse Tests, Kapselungen von Code, etc. ermöglichten die Lösung dann dennoch und es war uns gelungen, mehrere Player unabhängig von einander anzusteuern.

Fazit

Mit den von Google bzw. YouTube zur Verfügung gestellten Mitteln und unserem Code-Snippet ist es möglich, YouTube Videos in die eigene Website zu integrieren. Zudem – und das ist die eigentliche Anforderung – kann deren Nutzung mit Google Analytics über das Event-Tracking ausgewertet werden; auch für mehrere Player auf einer Seite gleichzeitig.

Wer will den Code? Einfach Kommentar mit E-Mail-Adresse abgeben…