So bereitest du einen HTML5-Banner für den Ad Server vor

Ein Banner kann auf deinem Bildschirm perfekt aussehen und trotzdem vom Ad Server abgelehnt werden. Meist liegt es am selben Grund: an einem technischen Detail, das niemand geprüft hat. Dieser Leitfaden geht der Reihe nach durch, was du prüfen solltest, bevor du einen HTML5-Banner hochlädst.

Bevor du anfängst

Frag die Person, die veröffentlicht (oder lies die Dokumentation der Zielplattform), nach drei Dingen: welche Größen akzeptiert werden, wie viel jedes Stück wiegen darf und ob externe Ressourcen erlaubt sind. Diese drei Angaben bestimmen alles Weitere, und jede Plattform hat ihre eigenen.

Das Paket: eine .zip-Datei mit einer index.html im Stammverzeichnis

Der Banner wird als .zip-Datei geliefert. Darin muss die index.html im Stammverzeichnis liegen (nicht in einem Ordner), und die Ressourcen wie Bilder oder Schriften liegen neben ihr oder in Unterordnern. Ein sehr häufiger Fehler ist, den ganzen Ordner statt seines Inhalts zu komprimieren: Der Ad Server öffnet die .zip-Datei, findet die index.html nicht im Stammverzeichnis und lehnt sie ab.

Wenn du mehrere Größen oder Sprachen hast, ist jede Kombination ein eigenes Stück mit einer eigenen .zip-Datei. BannerMotion packt sie standardmäßig so („Eine .zip pro Stück“) und kann die Sprachen auch in Ordnern bündeln („Eine .zip pro Größe“).

Die angegebene Größe

Der Banner gibt seine Größe mit einem meta-Tag im <head> an. Die Plattform liest es, um zu wissen, wie sie ihn anzeigt, und um zu prüfen, ob er zum gekauften Werbeplatz passt.

<meta name="ad.size" content="width=300,height=250">

Die Größe im Tag, die des Banner-Containers und die des gekauften Werbeplatzes müssen auf den Pixel genau übereinstimmen. Ein 300×250-Banner in einem 300×600-Platz ist ein Fehler in der Produktion, kein Fehler der Plattform.

Der clickTag: der Ziellink

Der Ziellink wird nicht fest in den Banner geschrieben. Der Banner liest eine Variable namens clickTag, die die Plattform festlegt, und verwendet sie beim Klick. So kann der Ad Server jeden Klick zählen, bevor er zu deiner Seite weiterleitet.

<script>
  var clickTag = "https://tu-sitio.com";
</script>

<div id="hit" role="link" tabindex="0"></div>
<script>
  document.getElementById("hit").onclick = function () {
    window.open(window.clickTag, "_blank");
  };
</script>

Drei Details werden oft übersehen: Die Variable wird genau als clickTag geschrieben (Groß- und Kleinschreibung zählt); die Adresse, die du in der Datei hinterlässt, ist nur ein Testwert, denn viele Plattformen ersetzen sie beim Ausliefern der Anzeige; und der Banner darf nur eine Klickaktion haben, die das ganze Stück abdeckt. Manche Plattformen verwenden eine eigene Bibliothek oder einen anderen Namen: Schau in deren Anleitung nach.

Das maximale Gewicht der .zip-Datei

Jede Plattform legt eine Obergrenze für die .zip-Datei fest. Miss immer die fertige .zip-Datei, nicht den unkomprimierten Ordner, und lass einen Puffer: Es ist einfacher, vor dem Hochladen zu verkleinern, als eine Ablehnung zu korrigieren. Manche Plattformen unterscheiden außerdem zwischen dem Erstladen und der Gesamtladung (die sogenannte polite load).

BannerMotion misst das Gewicht jedes Stücks beim Exportieren und vergleicht es mit einem einstellbaren Grenzwert; dieser Grenzwert ersetzt nicht den echten Wert deiner Plattform. Die Banner enthalten keine Bibliotheken von Drittanbietern, was hilft, das Gewicht niedrig zu halten. [PLATZHALTER: typisches gemessenes Gewicht eines Stücks, sobald eine veröffentlichbare Messung vorliegt.]

Was das Gewicht am meisten erhöht, von groß nach klein: Videos, Bilder (vor allem in doppelter Auflösung für Retina-Bildschirme), Schriften mit vielen Schnitten und Bibliotheken. Zum Verringern: Verwende nach Möglichkeit Text und Vektorformen (SVG) statt Bildern, fasse kleine Symbole in einem Sprite zusammen, komprimiere Fotos und lade nur die Schriftschnitte, die du brauchst.

Keine externen Ressourcen

Alles, was der Banner braucht, muss in der .zip-Datei liegen: Bilder, Schriften und Bibliotheken. Viele Plattformen blockieren oder bestrafen Dateien, die von einem anderen Server angefordert werden (eine Schrift aus einem CDN, eine Bibliothek von außerhalb), weil sie nicht garantieren können, dass sie verfügbar und sicher sind. Bei BannerMotion ist das Paket in sich geschlossen: Es sendet keine Anfragen an andere Domains.

Animation, Dauer und Wiederholungen

Plattformen begrenzen oft, wie lange die Animation dauert und wie oft sie sich wiederholt (häufig etwa 30 Sekunden maximal und eine begrenzte Zahl von Durchläufen). Der genaue Wert hängt von der jeweiligen Plattform ab. Der Exporter von BannerMotion geht in seiner generischen Voreinstellung von höchstens 30 Sekunden Dauer aus.

Zwei bewährte Praktiken, die von niemandem abhängen: Die Botschaft und der Button sollen auf dem letzten Bild vollständig sein (denn dieses Bild bleibt stehen), und Bewegungen sollen sanfte Kurven (Easing) über wenige, gut gewählte Keyframes nutzen statt vieler hektischer Bewegungen.

Ersatzbild

Manche Plattformen verlangen ein Ersatzbild (JPG, PNG oder GIF) in derselben Größe, das angezeigt wird, wenn der Browser das HTML5 nicht ausführt. Üblich ist, das letzte Bild der Animation zu verwenden. Bestätige, ob deine Plattform es verlangt, ob es im Paket oder separat liegen muss und mit welchem Höchstgewicht. Bei BannerMotion erscheint das statische Ersatzbild auf dem Exportbildschirm als „Demnächst verfügbar“.

Vor dem Hochladen testen

Entpacke deine .zip-Datei in einen neuen Ordner und öffne die index.html im Browser. Prüfe, ob die Animation vollständig abläuft, ob der Text nicht abgeschnitten wird, ob der Klick die erwartete Adresse öffnet und ob in der Browser-Konsole kein Fehler erscheint. Wiederhole den Test in der kleinsten und in der größten Größe der Kampagne.

Ein Banner, den man nicht testen kann, ist nicht fertig.

Checkliste

• Die .zip-Datei hat die index.html im Stammverzeichnis.
• Das Tag ad.size stimmt mit der Größe des Banners und des gekauften Werbeplatzes überein.
• Der Klick verwendet clickTag, und es gibt nur eine Klickaktion.
• Die .zip-Datei wiegt weniger als das Limit der Plattform (BannerMotion warnt dich mit dem Grenzwert, den du einstellst).
• Keine externen Ressourcen: Nichts wird von einer anderen Domain angefordert.
• Dauer und Wiederholungen liegen innerhalb dessen, was die Plattform erlaubt.
• Das letzte Bild enthält die vollständige Botschaft und den Button.
• Im Browser getestet, in der kleinsten und in der größten Größe.

Beim Hochladen: was Trafficking ist

Den Banner hochzuladen und ihn seiner Kampagne, seinen Terminen und seinen Werbeplätzen zuzuweisen ist die Aufgabe des Trafficking. Ist das Paket gut vorbereitet, beschränkt sich dieser Schritt auf Hochladen, Test in der Vorschau der Plattform und Zuweisung. Bestätige nach der Veröffentlichung in den Berichten des Ad Servers, dass die Klicks gezählt werden.

BannerMotion exportiert jedes Stück mit der angegebenen Größe, dem enthaltenen clickTag und dem geprüften Gewicht und warnt, wenn etwas fehlt. Der direkte Versand an Ad Server ist in der Produktplanung vorgesehen: Derzeit lädst du das Paket herunter und lädst es selbst hoch.