Bevorzugte Anlieferung als 3rd Party Tag.

Wir stellen folgende Anforderungen an HTML5 Werbemittel.

Technischer Aufbau:

  • Die Werbung muss eine Klick-URL haben (Sobald der Cursor das Werbemittel erreicht, muss eine Klick-Interaktion möglich sein.)
  • Der Klicktag (Sprung zur Zielseite) muss leicht im Code zu finden sein. *
  • Klicktags müssen sich immer in einem neuen Fenster öffnen (target=_blank)
  • Werbemittel-Tests müssen auch lokal im Browser möglich sein. Das Werbemittel darf nicht davon abhängig sein, ob es lokal auf einem Rechner aufgerufen wird oder aus einer Serverumgebung heraus.
  • Das Gewicht der Werbemittel darf maximal 150 KB für Desktop und maximal 100 KB für Mobile betragen
  • Das Werbemittel muss in latin-1 kodiert sein, nicht UTF8
    • ä anstelle von ä
  • Referenzen im Werbemittel auf externe Ressourcen (JS-Libraries, Videos, Fonts) sollten alle via SSL (https://) ausgeliefert werden
  • Die Werbemittel müssen sich in ein Iframe rendern*

 

Anlieferung:

  • Jedes Werbemittel muss in ein einzelnes Zip-File
    • “halfpage_de.zip” enthält nur den Code und die Dateien die das deutschsprachige HalfpageAd benötigt
    • “wideboard_fr.zip” enthält ausschließlich Code und Dateien des französischen Wideboardwerbemittels
    • etc

*Best Practice Aufbau eines HTML5 Rectangle Ads:

index.html: ruft das eigentliche Werbemittel in einem iFrame auf. Enthält optional Zählpixel und Trackingcodes

rectangle.html: beispielhaft ein Rectangle-Werbemittel mit den Maßen 300×250

rectangle.js: Animation des Werbemittels

rectangle1.jpg, rectangle2.jpg: Grafiken für das Werbemittel

 

index.html:

/* optional trackingcodes, zählpixel, moat, etc */

<iframe src=“rectangle.html“ width=“300″ height=“250″ scrolling=“no“ frameborder=“0″></iframe>

 

rectangle.html

// Um Klicks messen zu können, müssen wir der Zielurl unsere Klickmessung voranstellen.
// Am besten speichert man Anfangs die Zielurl in eine Javascript-Variable und benutzt im
// späteren Verlauf nur diese Variable.

 

<script>

var zielseite = „http://rivella.ch“;

</script>

 

/* später kann man dann die Zielseite aufrufen mit z.B.: */

window.open(zielseite);

/* oder */

document.write(„<a href=’“ + zielseite + „‚>…</a>);

iApp

Das HTML bzw. Redirecting-Werbemittel muss per HTML/CSS auf 320 Pixel Breite erstellt werden. Dahinter müssen jedoch Grafiken mit 640 Pixel Breite integriert sein.

Beispiel für iApp Banner: <div style=“width:320px; height:64px;“><img width=“100%“ height=“100%“ src=“creative640x128.jpg“/></div>
Beispiel für iApp Pre-/Interstitial: <div style=“width:320px; height:416px;“><img width=“100%“ height=“100%“ src=“creative640x832.jpg“/></div>

Nur so wird sichergestellt, dass der Banner in der WebView richtig dargestellt wird und die Grafiken trotzdem für Retina Displays optimiert sind.

Android

Das HTML bzw. Redirect-Werbemittel muss per HTML/CSS auf 360 Pixel Breite erstellt werden. Dahinter müssen jedoch Grafiken mit 720 Pixel Breite integriert sein.

Beispiel für Android Banner: <div style=“width:360px; height:72px;“><img width=“100%“ height=“100%“ src=“creative720x144.jpg“/></div>
Beispiel für Android Pre-/Interstitial: <div style=“width:360px; height:595px;“><img width=“100%“ height=“100%“ src=“creative720x1190.jpg“/></
div>

Nur so wird sichergestellt, dass der Banner in der WebView richtig dargestellt wird und die Grafiken trotzdem für hochauflösende Displays optimiert sind.