Technische Spezifikationen für (physische) HTML5 Werbemittel

Auf einem Blick

Anlieferungsformat	Einzelne HTML Datei + zusätzliche Bilder/Videos
3rd-Party-Tracking	erlaubt
Videoformate	H264/mp4 und VP8/WebM
Video Dateigröße	max. 5 MB
Video,- und Audiostart	nur nach expliziter Benutzeraktion
Vorlaufzeit	5 Werktage bzw. 10 Werktage bei mobilen HTML5-Formaten

Allgemeine Richtlinien

Liefern Sie das HTML5-Werbemittel als index.html, mit vollständigem HTML-Syntax (Doctype Definitionen, <head>, <body>, etc.) an.
Es sollten so viele Inhalte (Skripte, CSS, etc.) wie möglich in der index.html direkt eingebunden sein, anstatt in separaten Dateien ausgelagert zu werden.
Beim Nachladen von externen Ressourcen stellen Sie sicher, dass diese serverseitig für Cross-Domain-Zugriffe freigeben sind (CORS).
Benutzen Sie eine alternative Grafik als Ersatz des Werbemitttels, für Browser die HTML5 nicht vollständig unterstützen.
Die Orientierung des anzeigenden Gerätes sollte berücksichtigt werden und das Werbemittel für Darstellungen in "Landscape" und "Portrait" optimiert sein.
Das Tracking/Zählen von Benutzeraktionen (außer Klicks) durch einen separaten Server muss durch den Werbemittelersteller erfolgen.

JavaScript Richtlinien

Verwenden Sie kleine, kompakte JS-Frameworks. Größere Bibliotheken wie jQuery sind in der Regel unnötig und erhöhen die Datenlast des Werbemittels exponentiell.
Verkleinern Sie ihren finalen JS-Code so weit wie möglich. Benutzen Sie Minifier oder ähnliche Tools, so dass Ihr Werbemittel so schnell wie möglich zum Betrachter übertragen werden kann.
Vermeiden Sie Logs (z.B. console.log oder etc.) und eventuelle Fehler, um die Performance ihres Werbemittels zu optimieren und die Browserkonsole nicht zu überladen.

Klickmessung

Sie haben die Möglichkeit, Klicks auf Verlinkung zu externen Seiten durch den Ströer Digital AdServer messen zu lassen. Dafür muss in dem HTML5-Werbemittel eine dynamische Zuweisung der Link-URLs ermöglicht werden.
Bei Ausspielung des Werbemittels werden die vollständigen URLs von Ströer in das Werbemittel eingefügt und bei Klick des Benutzers gemessen.
Während der Entwicklung des Werbemittels lassen sich die Verlinkungen URL-encoded (encodeURIComponent() ) per GET-Parameter an das Werbemittel übergeben.

ihrWerbemittel.html?clicktag1=http%3A%2F%2Fwww.ihreUrl.de&clicktag2=http%3A%2F%2Fwww.ihreAndereUrl.de

Füllen Sie alle zu messende Links mit dem Namen "#clicktag" als Platzhalter und einem gleichlautendem ID-Attribut. Wünschen Sie unterschiedliche Links mit verschiedenen Zielen zu benutzen, müssen Sie die Platzhalter fortlaufend nummerieren ("#clicktag", "#clicktag2", usw.)
```
<a href="#clicktag" id="clicktag" target="_blank">Linktext 1</a>
<a href="#clicktag2" id="clicktag2" target="_blank">Linktext 2</a>
```

Fügen Sie im <head> Ihres Werbemittels folgendes Script ein:

<script type="text/javascript">
var getUriParams = function ()
{
    var query_string = {};
    var query = window.location.search.substring(1);
    var parmsArray = query.split('&');
    if (parmsArray.length <= 0) return query_string;
    for (var i = 0; i < parmsArray.length; i++)
    {
        var pair = parmsArray[i].split('=');
        var val = decodeURIComponent(pair[1]);
        if (val != '' && pair[0] != '') query_string[pair[0]] = val;
    }
    return query_string;
}();
</script>

Entweder am Ende der HTML-Datei oder beim Initiieren des Werbemittels muss die dynamische Zuweisung der URLs mit folgendem Code ausgelöst werden:

<script type="text/javascript">
    document.getElementById('clicktag').setAttribute('href', getUriParams.clicktag);
    document.getElementById('clicktag2').setAttribute('href', getUriParams.clicktag2);
</script>

Vorabtest Klickmessung

Die Werbemittel sollen von der Kreativagentur auf funktionierende clicktag-Übergabe getestet werden, damit unnötige Feedbackschleifen ausgeschlossen werden können.
Test: html5werbemittel.html?clicktag=%LANDINGPAGE%

*%LANDINGPAGE% ist mit einer Testzielseite zu ersetzen und muss URL - encoded übergeben werden (entweder per encodeURIComponent - Funktion oder z.B. mit HIlfe dieser Seite: https://meyerweb.com/eric/tools/dencoder/).

Richtlinien für Animationen

Animationen sollten so ressourcensparend wie möglich erstellt werden. Vermeiden Sie den übermäßigen Gebrauch von Transparenzeffekten (opacity) oder das Auslösen von "repaints" eines Browsers. Weitere Information zum Paint/Repaint finden Sie hier.

Entfernen Sie nicht mehr benötigte GIFs (z.B. eine Ladeanimation) komplett aus dem HTML-Baum, anstatt das Bild nur zu verstecken. Versteckte GIF-Animationen belasten weiterhin den Browser.
Benutzen Sie die Animationsmöglichkeiten von CSS3 (Animation, Keyframe, Translate, etc.).
Verwenden Sie auf keinen Fall Animationen durch JavaScript' s setInterval() oder setTimeout().
JavaScript-Animationen sollten grundsätzlich die requestAnimationFrame-API des Browsers benutzen. Weitere Informationen zu requestAnimationFrame() finden Sie hier.

Richtlinien für Bilder & Videos

Für eine optimale Bildanzeige auf allen Geräten, sollten alle Bilder, soweit sinnvoll, für HDPI angepasst sein.
Um trotz HDPI die Datenlast des Werbemittels gering zu halten, eignen sich die Formate Progressive JPEG / Progressive PNG, SVG oder WebP (eingeschränkter Browsersupport). Die Formatwahl ist jedoch nicht eingeschränkt und dem Entwickler freigestellt.
Um einzelne Bilderversionen an das jeweils richtige Device bzw. zur jeweils passenden Pixeldichte zu liefern, empfiehlt sich die Verwendung von CSS3 image-set() oder <img>'s srcset Element (Browsersupport beachten).
Gehen Sie sparsam mit dem Auslösen von Serveranfragen (requests) für kleinere Bilder um. Falls Sie viele kleinere Bilddateien verwenden wollen (Icons, Logos), sollten diese entweder als CSS-Sprites oder direkt im HTML als DataURI geladen werden.
Videos müssen als H264/mp4, sowie als VP8/WebM zur Verfügung gestellt werden und darf 5 MB nicht überschreiten. Benutzen Sie bei der Integration von Videos die Video-API des Browsers.
Bei Videos im Werbemittel darf der Sound nur nach expliziter Aktion des Benutzers gestartet werden (Klick auf einen "Sound an" Button, etc.)

HTML5 auf mobilen Geräten

Für In-App Werbeformen unterstützen wir die standardisierte API MRAID (Mobile Rich Media Ad Interface Definitions) des Interactive Advertising Bureau (IAB). Für den Zugriff auf Gerätefunktionen, wie Erstellung eines Kalendereintrages, muss das Werbemittel MRAID-kompatibel sein.
Daten aus Bewegungs- und Ausrichtungssensoren des mobilen Gerätes dürfen ausgelesen und für die Interaktion des Werbemittels genutzt, jedoch nicht blockierend verwendet werden. Funktionen wie das Schließen oder Verkleinern von Werbemitteln dürfen nicht exklusiv von der Bewegung des Gerätes abhängig sein.