Zum Inhalt
Sizewright
Loslegen

HTML5-Banner: die Checkliste für einen sauberen Upload

Von Sizewright5 Min. Lesezeit

Ein HTML5-Banner scheitert selten an der Gestaltung, sondern an einer Datei zu viel, einem fehlenden Meta-Tag oder einem clickTag, das der Adserver nicht findet. Diese Checkliste führt Punkt für Punkt durch das, was Google Ads, Campaign Manager 360, Display & Video 360, Adform und Xandr auf ihren eigenen Hilfeseiten verlangen.

Die Grenzen je Plattform

Legen Sie vor dem Packen fest, wohin das Banner geht, denn die Plattformen messen unterschiedlich und lesen den Klick auf unterschiedliche Weise:

PlattformPaketDateienKlickadresse
Google AdsZIP bis 600 KBhöchstens 40Finale URL beim Hochladen; die Spezifikationsseite nennt keine clickTag-Pflicht[1][2]
Campaign Manager 360ZIP bis 9,5 MB (eine zweite Hilfeseite nennt 10 MB)höchstens 100Mindestens ein clickTag, nicht minifiziert[3][4]
Display & Video 360Keine Grenze beim Hochladen, höchstens 5 MB bei der Auslieferunghöchstens 100Mindestens ein Exit oder clickTag[5][6]
Adform300 KB entpackt auf dem Desktop, 200 KB mobilmanifest.json und HTML-Hauptdatei, mindestens zweiclickTAG über die DHTML-Bibliothek von Adform[7][8][9]
Xandr (Microsoft Invest)Keine veröffentlichte GrenzeKeine veröffentlichte GrenzeclickTag als Parameter in der Adresse der Anzeige[10]

Für Google Ads gilt eine Hürde vorab: HTML5 dürfen nur Konten hochladen, die seit mehr als 90 Tagen bestehen, insgesamt mehr als 9.000 US-Dollar ausgegeben haben und bei den Richtlinien eine gute Bilanz vorweisen; erfüllt Ihr Konto diese Bedingungen, können Sie die Freischaltung beantragen, garantiert ist sie damit nicht.[1] Klären Sie das, bevor Sie HTML5 für Google Ads einplanen. Sonst bleiben GIF, JPG und PNG bis 150 KB.[1]

Paket und Code

  1. index.html auf oberster Ebene. Xandr verlangt eine index.html im Stammverzeichnis des ZIPs, nicht in einem Unterordner.[10] Adform verlangt die HTML-Hauptdatei und manifest.json ebenfalls auf oberster Ebene.[8]
  2. Ein vollständiges HTML-Dokument. Google Ads verlangt ausdrücklich die DOCTYPE-Deklaration sowie html- und body-Tag, Xandr html-, head- und body-Tag.[1][10] Campaign Manager 360 verlangt ein vollständiges Dokument, das sich in einem iFrame laden lässt.[4]
  3. Das Meta-Tag ad.size im head. Es nennt Breite und Höhe, etwa width=300,height=250. Google Ads verlangt es in jeder HTML5-Anzeige, Campaign Manager 360 empfiehlt es, und Display & Video 360 sieht es in seinen Bauanleitungen vor.[1][4][5]
  4. Nur erlaubte Dateitypen. Google Ads nimmt HTML, CSS, JS, GIF, PNG, JPG, JPEG und SVG an.[1] Campaign Manager 360 erlaubt zusätzlich JSON, XML und Schriftdateien, lehnt aber verschachtelte ZIPs, ungenutzte Dateien und Prozentzeichen in Dateinamen ab.[4] Bei Display & Video 360 muss der Name des ZIPs kürzer als 50 Zeichen sein.[5]
  5. Keine externen Verweise. Google Ads verlangt relative Pfade zu Dateien im ZIP; Ausnahmen sind nur Google Fonts und von Google gehostete Bibliotheken wie CreateJS, GreenSock und jQuery.[1] Campaign Manager 360 lehnt unsichere HTTP-Adressen im Code ab.[11]
  6. Kein Local oder Session Storage. Campaign Manager 360 und Display & Video 360 nehmen Banner nicht an, die Local oder Session Storage nutzen, und Xandr schließt HTML5 Local Storage aus.[4][5][12]
  7. UTF-8 als Zeichensatz. Google verlangt UTF-8 für alle Zeichen außerhalb von ASCII, also für jedes ä, ö, ü und ß in Ihrem Text.[1]

Der Klick: clickTag je Adserver

  1. Die Landingpage gehört nicht in den Code. Der Adserver übergibt die Klickadresse erst bei der Auslieferung. So werden Klicks gezählt, und die Adresse lässt sich ändern, ohne ein neues Banner zu bauen.
  2. Den Mechanismus des Adservers verwenden. Jeder liest den Klick anders:
    • Campaign Manager 360 und Display & Video 360 verlangen mindestens ein clickTag und lehnen minifizierten oder verschleierten Klick-Code ab.[4][5][6] Display & Video 360 erwartet außerdem, dass der Klick einen neuen Tab oder ein neues Fenster öffnet.[6] Sizewright setzt dafür eine lesbare Variable clickTag, die beim Klick mit window.open geöffnet wird.
    • Adform verlangt seine DHTML-Bibliothek im head. Das Banner liest den Wert mit dhtml.getVar, und jedes clickTAG ist in manifest.json deklariert. Bei den Namen zählt die Groß- und Kleinschreibung.[8] In-App-Banner nutzen MRAID statt der DHTML-Bibliothek.[13]
    • Xandr übergibt das clickTag als Parameter in der Adresse der Anzeige; das Banner liest es aus dem Query-String.[10][14] Die Hilfsfunktion APPNEXUS.getClickTag ist optional.[14]
  3. Ein Paket pro Adserver. Weil die Mechanismen verschieden sind, bauen Sie für jeden Adserver ein eigenes Paket, statt eines für alle zu verschicken.

Ersatzbild, Animation und Gewicht

  1. Ersatzbild separat liefern. Campaign Manager 360 und Display & Video 360 nehmen das Ersatzbild als eigenen Upload neben dem ZIP an, nie darin, und in denselben Maßen wie das Banner.[4][3][5] Ohne Ersatzbild liefert Display & Video 360 ein leeres Bild aus;[5] Campaign Manager 360 liefert dort, wo HTML5 nicht läuft, gar nichts aus.[15]
  2. Animationslänge einhalten. Google Ads, Display & Video 360 und Adform erlauben höchstens 30 Sekunden; Loops müssen innerhalb dieser Zeit enden.[1][16][6][7] Das IAB setzt 15 Sekunden und keine Wiederholung darüber hinaus.[17] Läuft dasselbe Banner über mehrere Wege, erfüllen 15 Sekunden alle.
  3. Gewicht so messen wie die Plattform. Google Ads misst das ZIP, Adform die entpackten Dateien:[1][8] Ein ZIP unter 300 KB kann für Adform trotzdem zu schwer sein. Das IAB rechnet gzip-komprimiert und pro Format, etwa 150 kB für den ersten Ladevorgang von 300 × 250, 728 × 90 und 160 × 600, 50 kB für 320 × 50, jeweils mit doppeltem Spielraum für den Subload, und höchstens zehn Dateianfragen beim ersten Laden.[18]
  4. Schriften und Bilder schlank halten. Reduzieren Sie Schriften auf die Zeichen, die das Banner verwendet, und komprimieren Sie Bilder schrittweise. Ein starkes Foto braucht weniger Kilobyte als drei. Nutzen Sie in Campaign Manager 360 ein Polite-Load-Bild, muss es unter 40 KB bleiben.[3]

Vor dem Hochladen testen

  1. Offline öffnen. Entpacken Sie das ZIP und öffnen Sie die index.html ohne Internetverbindung. Was dann fehlt, wird von außen geladen und verstößt gegen Punkt 5.
  2. Exits prüfen. Display & Video 360 zeigt nach dem Hochladen im Bereich „Events“ die erkannten Exits.[5] Prüfen Sie dort und in der Vorschau jedes Adservers, ob der Klick die richtige Landingpage öffnet.
  3. Zeit stoppen. Lassen Sie die Animation vollständig ablaufen und messen Sie, wann sie stillsteht. Vergleichen Sie mit der strengsten Grenze aller Plattformen, auf denen das Banner läuft.
  4. Ersatzbild abgleichen. Maße, Botschaft und Button des Ersatzbilds sollten dem Schlussbild der Animation entsprechen.

Pakete aus Sizewright

Sizewright baut für jede dieser Plattformen ein eigenes Paket, insgesamt gibt es 13 Exportprofile, und prüft jede Datei, bevor Sie sie herunterladen: Größe, Dateizahl und Dateitypen, index.html, ad.size, clickTag, externe Verweise, Länge, Durchläufe und Bildrate, Ersatzbild und Manifest. Was eine Vorgabe verfehlt, nennt der Export mit Dateinamen. Schriften werden auf die verwendeten Zeichen reduziert, Bilder schrittweise komprimiert, bis das Paket seine Grenze einhält, und jedes Paket enthält eine README, auch auf Deutsch. Für Campaign Manager 360, Adform, Xandr und das IAB-Paket liegt ein Ersatzbild als JPG bis 150 KB bei. Wie das im Einzelnen aussieht, lesen Sie unter Export für Werbeplattformen und in den Spezifikationen für Google Ads, Campaign Manager 360 und DV360 und Adform.

Quellen

  1. Google Ads Help, „Uploaded display ads specifications“, support.google.com/google-ads/answer/1722096, abgerufen am 16. Oktober 2026. zurück zurück2 zurück3 zurück4 zurück5 zurück6 zurück7 zurück8 zurück9 zurück10

  2. Google Ads Help, „Upload your own display ads“, support.google.com/google-ads/answer/9050314, abgerufen am 16. Oktober 2026. zurück

  3. Campaign Manager 360 Help, „Asset options for display creatives“, support.google.com/campaignmanager/answer/4558694, abgerufen am 16. Oktober 2026. zurück zurück2 zurück3

  4. Campaign Manager 360 Help, „How to prepare HTML5 display assets for Campaign Manager 360“, support.google.com/campaignmanager/answer/3145300, abgerufen am 16. Oktober 2026. zurück zurück2 zurück3 zurück4 zurück5 zurück6 zurück7

  5. Display & Video 360 Help, „HTML5 creatives“, support.google.com/displayvideo/answer/7128959, abgerufen am 16. Oktober 2026. zurück zurück2 zurück3 zurück4 zurück5 zurück6 zurück7 zurück8

  6. Display & Video 360 Help, „Guidelines for HTML5 display creatives“, support.google.com/displayvideo/answer/10261241, abgerufen am 16. Oktober 2026. zurück zurück2 zurück3 zurück4

  7. Adform Help Center, „Guidelines for Display Ads“, adformhelp.com/hc/en-us/articles/9738579515025, abgerufen am 16. Oktober 2026. zurück zurück2

  8. Adform Help Center, „Requirements for HTML5 Banner Files“, adformhelp.com/hc/en-us/articles/9738596324881, abgerufen am 16. Oktober 2026. zurück zurück2 zurück3 zurück4

  9. Adform Help Center, „Code HTML5 Banners“, adformhelp.com/hc/en-us/articles/10893850708241, abgerufen am 16. Oktober 2026. zurück

  10. Microsoft Learn, „Microsoft Invest – HTML5 Creative Guidelines and Specifications“, learn.microsoft.com/…/html5-creative-guidelines-and-specifications, abgerufen am 16. Oktober 2026. zurück zurück2 zurück3 zurück4

  11. Campaign Manager 360 Help, „Manage SSL compliance in Campaign Manager 360“, support.google.com/campaignmanager/answer/6227189, abgerufen am 16. Oktober 2026. zurück

  12. Microsoft Learn, „Microsoft Invest – Creative Guidelines and Specifications“, learn.microsoft.com/…/creative-guidelines-and-specifications, abgerufen am 16. Oktober 2026. zurück

  13. Adform Help Center, „Guidelines for Mobile Ads“, adformhelp.com/hc/en-us/articles/9739157535121, abgerufen am 16. Oktober 2026. zurück

  14. Microsoft Learn, „Use IAB’s HTML5 clickTag Standard on Xandr“, learn.microsoft.com/…/use-iab-s-html5-clicktag-standard-on-xandr, abgerufen am 16. Oktober 2026. zurück zurück2

  15. Campaign Manager 360 Help, „Set up display creatives“, support.google.com/campaignmanager/answer/4483813, abgerufen am 16. Oktober 2026. zurück

  16. Google Advertising Policies Help, „Image ad requirements“, support.google.com/adspolicy/answer/176108, abgerufen am 16. Oktober 2026. zurück

  17. IAB Tech Lab, „IAB New Standard Ad Unit Portfolio“, iab.com/…/IABNewAdPortfolio_FINAL_0719.pdf, abgerufen am 16. Oktober 2026. zurück

  18. IAB Tech Lab, „Fixed Size Ad Specifications“, iab.com/…/IABNewAdPortfolio_LW_FixedSizeSpec.pdf, abgerufen am 16. Oktober 2026. zurück

Weitere Ratgeber

Setzen Sie den Ratgeber um.

Die Registrierung ist kostenlos. Bringen Sie Ihre Website und ein Briefing mit und erhalten Sie ein Set, das diese Regeln in jedem Format einhält.