Technische HTML5 Spezifikationen WZ Westdeutsche Zeitung Media

Für jedes Kampagnenziel die richtige Werbeform: Unser breites Portfolio von mehr als 60 digitalen Werbeformen eröffnet zahlreiche Einsatzmöglichkeiten für kreative Branding- wie auch Performance-orientierte Kampagnen. Neben Display-Werbung vermarktet die Westdeutsche Zeitung auch kundenindividuelle Werbeintegrationen, Video Ads sowie mobile Werbeformen. Die technischen Spezifikationen der einzelnen Werbemittel finden Sie auf der Produktdetailseite der jeweiligen Werbeformen.

Die allgemeinen und übergreifenden Spezifikationen finden Sie hier.

Technische Spezifikationen für Redirect HTML5 Werbemittel

Es muss sichergestellt sein dass das Werbemittel keinen Einfluss auf die Webseite hat.

Dies gilt auch wenn diese keinen HTML5 Doctype hat.

Das Werbemittel sollte optimaler Weise in einem iframe gekapselt sein.

Sind aufgrund bestimmter genutzter Funktionen im Werbemittel Browserausschlüsse oder ähnliches nötig, so ist dies bei Anlieferung mitzuteilen.

HTML5-Werbemittel bestehen aus mehreren Elementen die nicht analog zu Flash in einem File zusammengeführt und komprimiert werden können.

Diese Elemente sind

• HTML-Files

• CSS

• Libraries (Javascript, JQuery,…)

• Bilder

• Videos

Damit der Aufbau der Medien-Website und des Werbemittels nicht unnötig verzögert wird, sind Kreative angehalten, die einzelnen Elemente des HTML5 Werbemittels sowohl hinsichtlich ihrer Anzahl als auch Dateigröße so klein wie möglich zu halten, aber unbedingt die folgenden Limits zu beachten.

HTML5 Werbemittel inkl. Code und Bilder :

• Desktop: 100 kB

• Tablet: 60 kB

• Phone: 40 kB

Maximale nachgelagerte Dateigröße (zusätzlich erlaubtes Ladevolumen, um eine Nutzer-Interaktion zuermöglichen):

• Desktop: 150 kB

• Tablet: 150 kB

• Phone: 100 kB

Maximale nutzerinitiierte Nachlade-Größe (Maximale Dateigröße für einen nachgelagerten Datei-Ladevorgang wie z.B. Video Stream):

• Desktop: 2,5 MB

• Tablet: 2 MB

• Phone: 2 MB

Dies ist durch Komprimierungsverfahren und Optimierungsverfahren als auch durch sparsame Anwendung von Animationen und Einbindung externer Elemente wie Fonts und Bibliotheken einzuhalten, welche auch bei der Dateigröße dazu zu rechnen sind.

Technische Spezifikationen für physische HTML5 Werbemittel

Auf einen 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.

• Alle Inhalte (Skripte, CSS, etc.) sollten soweit wie möglich in der index.html direkt eingebunden sein, und nicht in separate Dateien ausgelagert werden.

• Benutzen Sie auf keinen Fall Unterordner für weitere Dateien (Images, XMLs, etc.) oder relative Verlinkung auf diese Dateien. Legen Sie alle Dateien im gleichen Ordner wie die index.html ab.

• 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 Datenlastdes 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.

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 InteractiveMedia 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 Sieunterschiedliche 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:

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

Vorabtest:

Richtlinien für Animationen

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

• Videos dürfen nur nach expliziter Aktion des Benutzers gestartet werden (Klick auf einen "Play" Button, Klick zur Expansion).

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.