Beiträge in diesem Abschnitt

Weitere anzeigen

HTML5 Werbemittel - Voraussetzungen

Support
  • Aktualisiert
Folgen

 

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:

  1. Pro Werbemittel muss es genau eine HTML-Datei mit dem Namen index.html geben.
  2. 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.)
  3. 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").
  4. 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:

  1. 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");}

  1. 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.
  2. Verpacken Sie den Kampagnen Ordner samt aller Unterordner in eine Zip-Datei.
  3. 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:

  1. 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.
  2. 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.
  3. 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

Verwandte Beiträge

Verwandte Beiträge