07.05.2012
HTML5 Banner
Die letzten Tage habe ich mich an ein Experiment gewagt, nämlich einen HTML5-Banner zu bauen – ein Kunde war gezwungen das von uns zu verlangen, da auf dem Banner ein populärer Tablet-Computer einer Amerikanischen Firma abgebildet wird 
Die Ausgangssituation: Eine fertig produzierte Online-Kampagne, wie üblich in Flash mit GIF-Fallback, nach einigen Runden durch die Marketing- und Rechts-Abteilung letztendlich auch freigegeben. Dann aber die Botschaft: Es muss in HTML5 produziert werden, ohne aber dass es einen optischen Unterschied gibt. Und wie kann man das erreichen? Hier mein Lösungs-Ansatz:
- Das bestehende SWF mittels Swiffy exportieren. Aber Vorsicht, das unterstützt im wesentlichen nur Flash 8 und AS2 – in meinem Fall jedoch nicht so schlimm weil es sich ohnehin nur um eine Timeline-Animation handelte und die wenigen Dinge, die im Code umgesetzt waren, habe ich kurzerhand in eine Timeline-Animation umgewandelt mit kaum merkbaren Unterschieden zur Original-Fassung. Ich habe übrigens nicht den Online-Konverter sondern das Plug-In für die Flash IDE verwendet, so habe ich die Fehler- und Warn-Meldungen direkt im Output-Panel von Flash gesehen.
- Einen Anbieter finden, bei dem man so einen HTML-Banner auch ausliefern kann.
- Flashtalking: Ging recht simpel. Einfach das vom Swiffy-Plug-In generierte HTML-File nehmen, ein paar Zeilen Template-Code drunter schreiben und fertig. Das Ad war dank Flashtalking-Template auch klickbar, keine weiteren Anpassungen nötig.
- DoubleClick Studio: Habe ich dann letztendlich verwendet, da alle Kampagnen unseres Kunden darüber ausgeliefert werden. Hier bin ich dann etwas mehr in die Tiefe gegangen und habe ein Polite-Loading HTML5-Ad mit Flash- und GIF-Fallback angelegt. Dabei sind einige Dinge zu beachten gewesen, die ich nun zusammenfassen möchte.
Zunächst muss man verstehen, dass der Swiffy-Export und die dazugehörige swiffy.js insgesamt ca. 200KB groß ist, also etwa 5x so groß, wie das original SWF. Zwar wird die swiffy.js Google gehostet, muss aber ja doch zur Gesamt-Datenmenge des Ads dazu gezählt werden. Ich habe mich daher entschieden diese Library mit bei DoubleClick als Asset des Ads zu hosten. Bei dieser Datenmenge musste ich nun aber auf jeden Fall das Polite-Loading verwenden, um die initiale Datenmenge klein zu halten. Nach dem Page-Loaded-Event lade ich dann nach und nach alle Assets nach. Erst das CSS, dann die swiffy.js und zuletzt eine JS-Datei mit ein paar DoubleClick-spezifischen Dingen (z.B. ClickThrough) und letztlich dem Swiffy-Object, das ich mir aus dem Export hier her kopiert habe. Der Kern der initialen HTML-Datei sieht also so aus:
if (Enabler.isInitialized()) {
init();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
}
function init() {
if (Enabler.isPageLoaded()){
politeInit();
} else {
Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit());
}
}
function politeInit() {
var extCSS=document.createElement('link');
extCSS.setAttribute("rel", "stylesheet");
extCSS.setAttribute("type", "text/css");
extCSS.setAttribute("href", Enabler.getFilename("DCRM_HTML5_inPage_Polite_300x250.css"));
document.getElementsByTagName("head")[0].appendChild(extCSS);
var extJavascript = document.createElement('script');
extJavascript.setAttribute('type', 'text/javascript');
extJavascript.setAttribute('src', Enabler.getFilename('swiffyRuntime.js'));
document.getElementsByTagName('head')[0].appendChild(extJavascript);
var extJavascript = document.createElement('script');
extJavascript.setAttribute('type', 'text/javascript');
extJavascript.setAttribute('src', Enabler.getFilename('DCRM_HTML5_inPage_Polite_300x250.js'));
document.getElementsByTagName('head')[0].appendChild(extJavascript);
document.getElementById("container_dc").style.opacity=1;
document.getElementById("container_dc").style.display = "block";
}
Neben diesem JS-Code befinden sich noch folgende HTML-Elemente in der Datei:
<div id="container_dc"> <button id="background_exit_dc"/> <div id="content_dc"> <div id="swiffycontainer"/> </div> </div>
Ausrichtung und Größe der Elemente geschieht in einer ähnlich spektakulären CSS-Datei, auf die ich glaube ich nicht weiter eingehen muss.
In dem ‘DCRM_HTML5_inPage_Polite_300x250.js’ befindet sich dann der eigentliche Content, dieses File sieht im wesentlichen so aus:
var container;
var content;
var bgExit;
var swiffyobject = {[hier befindet sich das swiffyobject aus dem export]};
delayed_init = function() {
container = document.getElementById('container_dc');
content = document.getElementById('content_dc');
bgExit = document.getElementById('background_exit_dc');
addListeners();
container.style.display = "block";
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject);
stage.start();
}
addListeners = function() {
bgExit.addEventListener('click', bgExitHandler, false);
}
bgExitHandler = function(e) {
Enabler.exit('HTML5_Background_Clickthrough');
}
setTimeout (delayed_init, 500);
Das Timeout am Ende musste ich noch mit aufnehmen, weil andernfalls Swiffy offenbar noch nicht ordentlich initialisiert war und der Banner somit einfach leer geblieben ist. Außerdem muss in der initialen Datei auf jeden Fall der Hinweis auf die Codierung enthalten sein, ansonsten gehen bei DoubleClick während des Uploads und Parsings nämlich die Sonderzeichen verloren. Das Einfügen dieses Meta-Tags hat aber die gewünschte Wirkung gehabt:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Ganz am Schluss muss man dann nur noch beachten, in welcher Reihenfolge die Ads in DoubleClick Studio hoch geladen werden:
- Erst das Flash-Ad (ggf. ebenfalls mit Polite-Loading-Komponente)
- Dann Das HTML5-Ad samt seiner Assets
- Dann noch das GIF oder JPG fürs Fallback
Das ganze läuft dann als ganz gewöhnliches InPage Ad und wir über einen einzigen Tag ausgeliefert, der Mediamanager kann dann später entscheiden, welche Browser (-Versionen) welches Ad zu sehen bekommen.
Bei Flashtalking war der ganze Prozess etwas einfacher. Dort habe ich in der von Swiffy exportierten HTML-Datei nur folgendes ergänzt:
<script src="http://cdn.flashtalking.com/frameworks/js/api/2/html5API.js"></script>
<script>
var myFT = new FT,
container = FT.query("#swiffycontainer");
myFT.applyClickTag(container);
</script>
Und dann zusammen mit einer “manifest.js” mit folgendem Inhalt als ZIP-Datei hoch geladen:
FT.manifest({
"filename":"300x250.html",
"width":320,
"height":250,
"clickTagCount":1
});
Hier hat man dann auch selber noch die Kontrolle über die Browser, auf denen das Ad angezeigt werden soll, so z.B. können alle Opera-Browser und alle Internet-Explorer Version 8 oder kleiner ausgeschlossen werden:
"hideBrowsers":["ie8", "opera"]
Einziger Wermutstropfen bei Flashtalking: Noch ist für HTML5-Ads noch kein polite loading möglich, nach kurzer Rückfrage beim Support ist das aber bereits in Arbeit und sollte mit dem nächsten Release der API zur Verfügung stehen.
Hier findet sich übrigens eine schöne Auflistung, welche Browser in welcher Version den von Swiffy generierten Code unterstützen:
http://www.google.com/doubleclick/studio/swiffy/gettingstarted.html#support
Wer zu faul zum klicken und lesen ist merkt sich das hier:
- Chrome 18
- Safari 5.1
- Mobile Safari 5
- Android Browser ab 4.0.3
- Firefox 11
- InternetExplorer 9
- Opera 11.60
Wobei man vor allem beim Einsatz von Filtern beachten muss, dass die nur in Chrome, Firefox und Opera angezeigt werden. Alle anderen Einschränkungen beziehen sich auf Sound und dynamischen Text, beides hat aber in gewöhnlichen Banner-Kampagnen keine Relevanz.
Zusammenfassung:
Sofern es das Media-Budget hergibt eine Rich-Media statt eine gewöhnlichen Kampage auszuliefern, und sofern man sich auf Timeline-Animationen mit wenig Code und das dann auch noch in AS2 beschränkt, ist Swiffy eine gute Alternative zur kompletten Neu-Erstellung in anderen Tools wie Edge oder Hype, zumal auch diese Tools mit ihren eignen JS-Bibliotheken daher kommen die ebenfalls eine Auslieferung als Rich-Media erfordern würden. Das gleiche gilt für Wallaby, das darüber hinaus zu keinem befriedigenden Ergebnis geführt hat. Auch Online-Tools zur Erstellung von HTML-Ads wie der “HTML5 Banner Maker” erzeugen bei mäßiger Optik riesige Files die ebenfalls nicht als Standard-Ad laufen könnten. Das einzige also, was Swiffy für diesen Einsatz das Wasser reichen könnte bleibt echte Handarbeit. Dann allerdings wird das Ergebnis mit Sicherheit optisch nicht mehr mit einem SWF vergleichbar sein, über den zusätzlichen Produktionsaufwand möchte ich ja gar nicht nachdenken, schließlich wird man für eine Vielzahl der Browser nach wie vor Flash-Banner benötigen und wird somit um die Erstellung von SWFs so wie so nicht drumherum kommen.
Danke an die Flex User Group München für die 20% Nachlass!