HTML5 Banner Vorschau & Test Tool Anleitung (2026)

Um ein HTML5 Banner vor der Auslieferung zu testen, brauchst du zwei Dinge: eine Prüfung des ZIP gegen die Regeln der Plattform und eine Live Vorschau, die sich wie ein Ad Server verhält, also ein abgeschottetes iframe, in dem sich Klicks nachverfolgen lassen. AdCheckLab erledigt beides im Browser. Ziehe das ZIP in den Validator, wähle Google Ads, CM360 oder DV360 und lies die Ergebnisse direkt neben dem laufenden Werbemittel. Nichts wird hochgeladen.

1. Warum Vorabtests Notwendig Sind

Plattformen lehnen fehlerhafte ZIPs beim Upload ab, und selbst ein akzeptiertes Werbemittel kann leer bleiben oder Klicks ins Nichts schicken. Wenn eine Kampagne dreißig Formate umfasst, verzögert ein fehlender clickTag oder ein zu schweres Bild den Start aller Formate.

Die Vorschau im Browser erlaubt Design, Entwicklung und QA, Animation, Klick und Gewicht zu prüfen, bevor die Dateien beim Media Team landen. Da das ZIP den Rechner nie verlässt, eignet sich das auch für unveröffentlichte Kampagnen unter NDA.

2. Technische Richtlinien im Überblick

Die drei Google Plattformen setzen unterschiedliche Grenzen, deshalb hat der Validator für jede einen eigenen Modus:

Die Details zu CM360, einschließlich Dateitypen und Storage Verbot, findest du in der Anleitung CM360 Spezifikationen.

3. So Funktioniert die Abgeschottete Vorschau

Ad Server liefern HTML5 Banner in isolierten iframes aus, um die Publisher Seite zu schützen. Die AdCheckLab Vorschau macht es genauso: Das Werbemittel läuft in einem iframe, das Skripte erlaubt und sonst nichts. Es kann weder die umgebende Seite noch andere geladene ZIPs oder den Speicher lesen. Damit alles ohne Server lädt, wird jede referenzierte Datei durch eine eingebettete Kopie ersetzt, auch Bildpfade in Adobe Animate und CreateJS Skripten.

Ein Banner, das auf localStorage oder Cookies angewiesen ist, kann in der Vorschau genauso scheitern wie in einem strengen Werbeplatz. Und ein Verweis auf eine Datei, die im ZIP fehlt, bleibt kaputt, genau wie nach dem Upload.

4. Überprüfung der clickTag Funktion

So überprüfst du die Weiterleitung in AdCheckLab:

1. Ziehe das HTML5 ZIP Archiv in den HTML5 Banner Validator und wähle die Plattform.
2. Prüfe das clickTag Ergebnis: clickTag Variable gilt als bestanden, wenn eine korrekte Deklaration gefunden wurde, und nennt die Datei.
3. Klicke in die Live Vorschau. Der Klick wird abgefangen, statt einen Tab zu öffnen, und im Bericht des Banners erscheint Click Intercepted.
4. Lies den Hinweis: Er zeigt den clickTag Wert, den das Banner gelesen hat, und die URL, die der Klick öffnen wollte. Steht dort, dass der clickTag nicht definiert ist, prüfe die Klickbindung in index.html.

Fehlt die Deklaration, fügt der clickTag Editor sie direkt ins ZIP ein.

5. Häufige Fehler Beheben

index.html fehlt: Die Hauptdatei muss index.html heißen und im Stammverzeichnis des ZIP liegen, nicht in einem Unterordner. Bleibt die Vorschau trotzdem leer, hilft Abschnitt 6.

Dateigröße zu hoch: Komprimiere PNG und JPEG Dateien mit dem Banner Compressor, der alle Dateinamen beibehält, und entferne ungenutzte Frames, Symbole und eingebettete Sounds aus Adobe Animate Projekten.

Schreibweise des clickTag: JavaScript unterscheidet Großbuchstaben von Kleinbuchstaben. Deklaration und jede Verwendung müssen exakt clickTag lauten, mit großem T.

GIF läuft zu lange: Der Validator liest jede Bildverzögerung und die Anzahl der Wiederholungen und zeigt die Gesamtdauer im Vergleich zur 30 Sekunden Grenze.

6. Wenn die Vorschau Leer Bleibt

Ein weißes Feld statt des Banners hat fast immer einen von zwei Gründen: Der Browser hat eine Datei nicht gefunden, die das Banner braucht, oder ein Skript ist abgebrochen, bevor die Animation startet. Gehe die Ursachen der Reihe nach durch. Die meisten lassen sich in einer Minute ausschließen, und der Validator meldet mehrere davon direkt neben der Vorschau.

index.html liegt nicht dort, wo die Vorschau sie erwartet

Enthält das ZIP einen Ordner mit dem Banner darin, liegt die Hauptdatei eine Ebene tiefer, und relative Pfade lösen sich womöglich nicht auf. Der Validator meldet index.html Nested in Subfolder. Zippe die Dateien, nicht den Ordner.

Ein Pfad zeigt ins Leere

• Absolute Pfade: Ein Verweis wie /Users/name/project/img/hero.jpg oder C:\banner\img\hero.jpg funktioniert nur auf dem Rechner des Designers. Nutze relative Pfade wie img/hero.jpg.
• Falsche Schreibweise: Pfade im ZIP unterscheiden Großbuchstaben von Kleinbuchstaben. Logo.png im Code und logo.png im Ordner funktioniert auf dem Mac und scheitert auf dem Server.
• Datei fehlt im ZIP: Der Verweis stimmt, aber das Bild oder Skript wurde nie mit verpackt.

Ein Skript bricht ab, bevor die Animation startet

Im abgeschotteten iframe kann Code, der auf localStorage, sessionStorage oder document.cookie zugreift, einen Fehler auslösen. Fängt der Startcode ihn nicht ab, wird nichts gezeichnet. Öffne die Browserkonsole, um den Fehler zu sehen. CM360 und DV360 lehnen Speicherzugriffe ohnehin ab.

Eine externe Bibliothek wurde nicht geladen

Lädt das Banner GSAP, CreateJS oder eine Schrift von einem anderen Server und scheitert diese Anfrage, scheitert jede Animation, die davon abhängt. Bei Google Ads wird ein Host außerhalb der Google Freigabeliste schon beim Upload abgelehnt, und der Validator meldet Disallowed External References. Packe die Datei ins ZIP oder nutze die von Google gehostete Kopie aus der Google Ads Freigabeliste (Englisch).

Ein unsicherer http Link wurde blockiert

Auf einer https Seite blockieren Browser Skripte und Stylesheets über http:// als gemischte Inhalte. Der Validator meldet sie als Insecure HTTP Connections. Ersetze jeden solchen Link durch https://.

Das Werbemittel wartet auf etwas, das die Vorschau nicht sendet

• Studio Werbemittel warten oft, bis der Enabler initialisiert ist. Fehlt das Enabler Skript im Head, warten sie für immer.
• Polite Load Code, der auf ein Ereignis der Publisher Seite wartet, kann in einer eigenständigen Vorschau auf dem ersten Frame stehen bleiben.
• Eine Animation, die außerhalb des Bildes oder mit Deckkraft null beginnt, wirkt leer, wenn ihr erster Tween scheitert. Suche in der Konsole nach dem ersten Fehler.

Eine schnelle Reihenfolge zur Diagnose

1. Ziehe das ZIP in den Validator und behebe zuerst jeden gemeldeten Fehler, vor allem Hauptdatei, externe Verweise und unsichere Links.
2. Öffne die Browserkonsole, während die Vorschau sichtbar ist, und lies den ersten roten Fehler.
3. Entpacke das Paket und öffne index.html direkt im Browser. Funktioniert es dort, aber nicht in der Vorschau, liegt es an einer Einschränkung des iframes, etwa am Speicherzugriff.