HTML5 Werbemittel
Keywords:
html5, adobe edge
Deutsch Datum:
15.12.2017
verfügbare Sprachen:
English

Wichtiger Hinweis: Leider hat sich bei HTML5 Werbemittel noch kein richtiger Standard durchgesetzt wie diese Werbemittel zu erstellen sind. Die folgenden Beschreibungen spiegeln deshalb das wieder, wie AdSpirit am besten mit derartigen Werbemitteln umgehen kann.
Beachten Sie ferner, dass sich die Empfehlungen jederzeit ändern können wenn sich der Markt in einer bestimmten Weise anpasst.

Mit einigen Softwaretools wie Adobe Edge können Werbemittel erstellt werden die aus mehreren Dateien bestehen. Allgemein werden diese als "HTML5-Werbemittel" bezeichnet, auch wenn das nicht ganz richtig ist, da prinzipiell jedes von uns ausgelieferte HTML-Werbemittel ein HTML5-Werbemittel ist .

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.

Upload von HTML5-Werbemitteln

Um ein HTML5-Werbemittel hoch zu laden, packen Sie bitte das Werbemittel in ein Verzeichnis und verpacken dieses Verzeichnis in eine ZIP-Datei. Laden Sie diese Zip-Datei auf den AdServer hoch.

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>

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

Beispiel: Klicktracking überschreiben

In manchen Fällen lässt sich das Klicktracking des Werbemittels leider nicht mehr anpassen. In diesen Fällen kann versucht werden das Klicktracking manuell zu überschreiben. Dies geschieht indem ein transparentes GIF über das Werbemittel gelegt wird und dieses klickbar gemacht wird. Klickt der User auf das Werbemittel, löst er damit nicht mehr das eigentliche Klick-Ereignis des Werbemittels sondern das Klick-Ereignis des GIF aus. Eine Beispielumsetzung kann in AdSpirit wie folgt aussehen:

<div style="position:relative;">
<iframe width="300" height="250" noresize="noresize" scrolling="no"
        frameborder="0" marginheight="0" marginwidth="0"
        src="..."
        ALLOWTRANSPARENCY="true"></iframe>

<div style="position:absolute; top:0px; left:0px;"><a href="%urlredirect%" target="_blank"><img src="http://%imgsvr%/1x1.gif" width="%width%" height="%height%" border="0" alt=""></a></div>
</div>

Im Beispiel grün markiert ist der Teil des Kundenwerbemittels, während der rot markierte Teil den neu hinzugefügten Code darstellt, der dazu dient das Werbemittel-Klicktracking zu überschreiben.

Beispiel: Google Swiffy

Flash-Dateien die mit Google Swiffy in HTML5 convertiert wurden bestehen in der Regel aus nur einer einzigen HTML-Datei. Diese kann so wie sie ist zu AdSpirit hochgeladen werden. AdSpirit erkennt die Datei und setzt selbstständig die Parameter für den Flash clickTag (exakte Schreibweise beachten!).

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. Laden Sie die Zip-Datei über den allgemeinen Werbemittelupload auf den AdServer hoch
  4. Der AdServer entpackt das Zip und wird Grafiken und HTML-Dateien automatisch erkennen. Sofern Grafiken erkannt wurden, entfernen Sie diese aus der "Grafiken" Liste im Upload-Fenster (aber belassen Sie alle Dateien in der "Dateien"-Liste des Upload-Fensters). In der "Codes"-Liste sollte die HTML-Datei angezeigt werden. Der AdServer hat hier bereits Änderungen vorgenommen.
  5. Sofern zwei Code-Varianten für die HTML-Datei erkannt wurden, verwenden Sie bitte die IFrame-Variante.
  1. Schließen Sie den Upload ab.