Voraussetzungen für die Verwendung von HTML5-Werbemitteln
- Das Werbemittel muss als ZIP-gepackte Datei angeliefert werden.
- Es können beliebig viele Grafiken, CSS, JavaScript- und andere Dateien verwendet werden
- Pro Werbemittel müssen alle Dateien in einem gemeinsamen Verzeichnispfad innerhalb einer Zip-Datei liegen. Z.B. werbung.zip entpackt nach werbung/Skyscraper/*. Die Dateien dürfen nicht direkt in der ZIP enthalten sein sondern in einem Unterordner liegen (alle Dateien gemeinsam oder auf verschiedene Unterordner verteil).
- Pro Werbemittel darf es nur eine HTML-Datei geben. Diese muss index.html heissen und als eigentliches Werbemittel fungieren. Diese Datei muss im Verzeichnispfad auf gleicher ebene oder oberhalb der Ressourcendateien (Bilder, JS, CSS) liegen (z.B. werbung/Skyscraper/index.html)
- Alle Dateien müssen relativ miteinander verknüpft sein (z.B. src="css/meinedatei.css" nicht src="/css/meinedatei.css")
Best practices
Um HTML5 Werbemittel möglichst einfach und kompatibel zu gestalten empfehlen wir Ihnen die folgenden Umsetzungsempfehlungen einzuhalten:
- Pro Werbemittel muss es genau eine HTML-Datei mit dem Namen index.html geben.
- Pro Werbemittel müssen alle Dateien in einem gemeinsamen Pfad liegen. CSS, Bilder, JavaScript und sonstige Dateien sollten in einem Pfad unterhalb der index.html liegen (z.B. banner/index.html, banner/css/styles.css, banner/js/scripts.js usw.)
- Alle Dateien müssen relativ eingebunden sein (z.B. src="js/scripts.js"). Einzige Ausnahme sind externe Ressourcen wie Frameworks und so weiter; diese müssen absolut mit vollständiger Domain eingebunden sein (z.B. src="http://mycdn.myadserver.com/frameworkxyz/script.js").
- Die HTML-Datei wird als IFrame eingefunden. Die HTML-Datei muss daher zwecks Klicktracking den Parameter &clickTag=... abfragen.
Voraussetzungen für das Klicktracking
Um hier Klicktracking zu ermöglichen muss innerhalb des Codes der URL-Parameter clickTag abgefragt werden. An diesen übergibt AdSpirit die beim Klick aufzurufende URL. Folgender Beispielcode kann dazu verwendet werden um den Parameter abzufragen:
function getParameter(name)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++)
{
var itm = vars[i].split("=");
if(itm[0] == name){return decodeURIComponent(itm[1]);}
}
return '';
}
//Beispielaufruf:
<a href="#" onclick="window.open(getParameter('clickTag'), '_blank'); return false">Klick hier!</a>
//oder:
<a href="http://www.zielseite.de" onclick="window.open(getParameter('clickTag')+encodeURIComponent(this.href), '_blank'); return false">Klick hier!</a>
Beispiel: DoubleClick Studio
Um in DoubleClick Studio erzeugte HTML5 Dateien klickbar zu machen muss ein Exit angelegt werden. Näheres dazu siehe hier: https://support.google.com/richmedia/answer/2672517?hl=de
Um ein Exit anzulegen braucht lediglich ein <div> hinzugefügt werden welches die ID bg-exit trägt:
<div id="bg-exit"></div>
Diesem sollte per CSS folgende Eigenschaften gegeben werden:
#bg-exit {
background-color: rgba(255,255,255,0);
cursor: pointer;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
}
Dem Exit wird dann per JavaScript mitgeteilt was zu tun ist:
function bgExitHandler(e) {
Enabler.exitOverride('Background Exit', dhtml.getVar("clicktag","http://www.adspirit.de"));
}
document.getElementById('bg-exit').addEventListener('click', bgExitHandler, false);
Beispiel: Adobe Edge Werbemittel
Um diese zu verwenden zu können sind mehrere Dinge nötig:
- In Adobe Edge muss das Werbemittel soweit vorbereitet werden, dass es Klicktracking unterstützt. Dies geschieht durch die Verknüpfung des Click-Event des Banners mit der Funktion clickTag(). Beispiel:
window.open(clickTag(),"_blank");}
- Erstellen Sie einen Ordner z.B. "MeineKampagneXYZ" und erstellen Sie darin pro Werbemittel einen weiteren Ordner z.B. "Werbemittel_1", "Werbemittel_2" usw. Exportieren Sie die Werbemittel aus Adobe Edge heraus inkl. aller dafür notwendigen Dateien in die Werbemittel-Ordner.
- Verpacken Sie den Kampagnen Ordner samt aller Unterordner in eine Zip-Datei.
- jetzt kann der Ordner über den Datei Upload im AdServer geladen werden. (Siehe Punkt: Upload von HTML5 Werbemitteln)
Voraussetzungen für Expandables
Um Expandables auszuliefern die via IFrame-Code eingebunden sind sind drei Dinge nötig:
- Der IFrame wird mit einer ID versehen, die von AdSpirit vergeben wird (<iframe id="%creativeid%" ...>). Mittels dieser ID kann AdSpirit den IFrame ansprechen und seine Größe anpassen.
- Das Werbemittel informiert per PostMessage AdSpirit darüber, dass es sich öffnen bzw. schließen will. Hierzu sollte das Werbemittel parent.postMessage(dhtml.getVar("expand"),"*") und parent.postMessage(dhtml.getVar("collapse"),"*") benutzen um aus der IFrame-URL übergebenen Parameterliste den richtigen Bezeichner für die Expand- bzw. Collapse Funktion zu erfahren. Sollte dies nicht möglich sein, kann alternativ parent.postMessage("expand","*") und parent.postMessage("collapse","*") verwendet werden.
- Das Werbemittel muss selbständig erkennen, dass seine Größe geändert wird und es muss sich entsprechend im Design anpassen.
Voraussetzungen für Sidebar-Ads
Um Sidebar-Ads via IFrame-Code umzusetzen müssen wie bei Expandables eine ID vergeben werden und der Content muss sich dem Design anpassen (siehe Punkte 1 und 3 oben). Auf das Senden von postMessage kann verzichtet werden.
Nächster Artikel: HTML5 Werbemittel - Upload
Keywords: html5, adobe edge