HTML5-Creatives

HTML5-Creatives sind mit JavaScript, HTML und CSS erstellte Anzeigen, die auf Webseiten oder in mobilen Apps ausgeliefert werden. Sie können entweder Display- oder Rich Media-Creatives sein.

Display: Bildanzeigen, über die Sie zur Website eines Werbetreibenden gelangen
Rich Media: Anzeigen mit interaktiven Elementen wie Animationen, Bildergalerien, Spielen oder eingebetteten Videos

In Display & Video 360 können Display- und Rich Media-Banner direkt hochgeladen werden. Wenn Sie jedoch Creatives mit erweiterten Rich Media-Funktionen wie Expandable- oder Interstitial-Formaten präsentieren möchten, empfehlen wir, Studio zu verwenden. Studio-Creatives können über Campaign Manager 360 getraffickt und mit Ihrem Display & Video 360-Konto synchronisiert werden.

HTML5-Creatives lassen sich ausschließlich Displaywerbebuchungen zuweisen.

Unterstützte Typen von HTML5-Creatives

In Display & Video 360 werden die unten aufgeführten HTML5-Anzeigenformate unterstützt. Beispiele für die einzelnen Creative-Typen finden Sie in der Rich Media-Galerie.

Display

Ein HTML5-Creative mit einer oder mehreren festen Größen und einer festen Position auf einer Webseite oder in einer mobilen App.

Unterstützte Funktionen bei Display-Creatives:

Klick-Tags: Klick-Tags sind Code-Snippets, über die Klicks erfasst werden, mit denen die Landingpage eines Werbetreibenden aufgerufen wird.
Responsive Creatives: Sie können verschiedene Größen desselben Display-Banners in einem responsiven Creative zusammenfassen, um die Creative-Zuweisung zu vereinfachen.

Rich Media

Rich Media ist ein Begriff aus der Onlinewerbung und bezeichnet Anzeigen mit erweiterten Funktionen, wie etwa Video-, Audio- oder andere ansprechende Elemente. Für Rich Media-Anzeigen werden mehr Messwerte unterstützt, um komplexe Interaktionen zu erfassen. So erhalten Sie einen besseren Eindruck davon, wie Nutzer mit Ihrer Anzeige interagieren. Beispielsweise können Rich Media-Anzeigen Zähler und Timer enthalten, anhand derer Sie feststellen können, wie oft oder wie lange Nutzer ein Spiel in der Anzeige gespielt haben.

Unterstützte Funktionen und Formate bei Rich Media-Creatives:

Rich Media-Messwerte: Mit Rich Media-Messwerten können Sie beispielsweise Klicks, Exits, Interaktionen und Videowiedergaben zählen.
In-Banner-Video: Anzeigen mit integrierten Videoplayern. Videos lassen sich in alle Rich Media-Formate außer in datengetriebene Creatives einfügen.
Vollbild-Expandable: Anzeigen, die maximiert werden können, um den Bildschirm eines Mobilgeräts auszufüllen, z. B. Creatives vom Typ „3D-Animation“
Datengetriebene Creatives: Bei datengetriebenen Creatives kann die Botschaft an verschiedene Kundensegmente angepasst werden.
Parallaxen-Creatives: Eine Parallaxe ist ein Animationseffekt, über den Sie in Rich Media-Creatives mithilfe von Bildebenen einen Tiefeneffekt erzielen können. Wenn der Betrachter die Seite auf einem Mobilgerät nach oben oder unten scrollt, bewegen sich die Bilder im Vorder- und Hintergrund mit unterschiedlichen Geschwindigkeiten.

HTML5-Creative erstellen

HTML5-Creatives können mit einem beliebigen HTML5-Editor oder der kostenlosen Web-App Google Web Designer erstellt werden. Nachdem Sie das Creative eingerichtet haben, komprimieren Sie die Dateien in eine ZIP-Datei, um sie in Display & Video 360 hochzuladen.

HTML5-Display-Banner erstellen

Sie können ein HTML5-Display-Banner mit Google Web Designer oder einem beliebigen HTML5-Editor erstellen.

Beachten Sie bei der Erstellung des Creatives die Richtlinien für HTML5-Display-Banner, um Verzögerungen durch die Ablehnung von Creatives zu vermeiden.

Google Web Designer

Google Web Designer ist ein kostenloses Tool für HTML5-Design und -Entwicklung, mit dem sich jede Art von HTML5-Creative erstellen lässt. Richten Sie dazu in Google Web Designer eine neue Anzeige ohne Vorlage ein oder nutzen Sie eine integrierte Vorlage.

Banneranzeige in Google Web Designer erstellen

HTML5-Editor

Wenn Sie lieber eigenen Code schreiben möchten, können Sie ein Banner mit einem beliebigen HTML5-Editor einrichten.

Beispiel-ZIP-Datei herunterladen

(Für fortgeschrittene Nutzer) HTML5-Banner neu erstellen

Richten Sie eine gültige HTML-Datei mit den Tags <html>, <head>, <title> und <body> ein.
Fügen Sie das Tag <meta> ein, um die gewünschte Größe für das Creative anzugeben:
<meta name="ad.size" content="width=[x], height=[y]">.
Klick-Tag hinzufügen:
1. Fügen Sie das folgende Skript-Tag ein und ersetzen Sie https://www.google.com durch die Landingpage des Werbetreibenden:
  
  <script type="text/javascript"> var clickTag = "https://www.google.com"; </script>
2. Umschließen Sie das Tag <div> des primären Bild- oder Anzeigencontainers mit dem Tag <a>, damit es anklickbar ist:
  <a href="javascript:window.open(window.clickTag)"> <div id="container"> <img src="image.png" /> </div> </a>

Rich Media-Banner erstellen

Sie können Rich Media-Banner mit jedem HTML5-Editor oder mit Google Web Designer erstellen. Erstellen Sie zuerst eine Banneranzeige und fügen Sie dann Medienkomponenten wie Videos, YouTube-Videos oder Audioelemente hinzu.

Rich Media-Banner müssen den Enabler von Studio enthalten. Sie können damit:

Videos und Bilder mit Enabler.getUrl() sicher laden;
die Landingpage des Werbetreibenden mit Enabler.exit(). Verwenden Sie in Rich Media-Bannern Exits anstelle von Klick-Tags.

Um Verzögerungen durch die Ablehnung von Creatives zu vermeiden, sollten Sie bei der Erstellung des Creatives die Richtlinien für Rich Media einhalten.

Elemente einer HTML5-ZIP-Datei

HTML5-ZIP-Dateien können bis zu 100 Dateien enthalten und haben keine Größenbeschränkung. Damit die Publisher-Anforderungen erfüllt werden, sollte die ZIP-Datei jedoch so klein wie möglich sein.

Beispiel-ZIP-Datei herunterladen

ZIP-Datei benennen

Geben Sie Ihrer HTML5-ZIP-Datei einen Namen, der einschließlich Dateierweiterung „.zip“ weniger als 50 Zeichen umfasst. Wenn der Dateiname länger ist, können Sie die Datei nicht hochladen.

Unterstützte Dateitypen

HTML/Text: HTML, HTM, CSS und JS
Bilder: JPG, JPEG, GIF, PNG und SVG
Schriftarten: DFONT, EOT, OTF, TTE, TTF, WOFF und WOFF2

Was muss eine HTML5-ZIP-Datei enthalten?

HTML-Datei: Das primäre Asset des HTML5-Creatives ist die HTML-Datei. Die Datei muss mindestens einen Exit- oder ein Klick-Tag enthalten und in einen iFrame geladen werden können. Der iFrame wird von Display & Video 360 zusammen mit Ihren Assets ausgeliefert.
Andere Dateien: Bilder, CSS- und JavaScript-Dateien, die in Ihrer HTML-Datei verwendet werden. In Rich Media-Creatives werden außerdem die folgenden Dateitypen unterstützt. Die Videos müssen aber dennoch auf einem externen Server gehostet werden oder das Creative muss mit Studio erstellt werden:
AVI, MOV, MP4, M4V, MPEG, MPG, OGA, OGG, OVG, WEBM, WMV

Was gehört nicht in eine HTML5-ZIP-Datei?

Weitere ZIP-Dateien: Fügen Sie einer HTML5-ZIP-Datei keine weiteren ZIP-Dateien hinzu.
Nicht verwendete Dateien: Fügen Sie nur Dateien hinzu, die tatsächlich von der HTML-Datei verwendet werden. Fügen Sie keine Quell- oder Authoring-Dateien hinzu.
Lokaler Speicher oder Sitzungsspeicher: HTML5-Assets, die den lokalen Speicher oder Sitzungsspeicher verwenden, sind in Display & Video 360 nicht zulässig.
Reservebild: Fügen Sie Ihrer HTML5-ZIP-Datei keine Reservebilder hinzu. Laden Sie Reservebilder stattdessen separat im Bereich „Reservebilder“ hoch.
Dateien mit langen Namen: Die Namen von Video- und Audiodateien dürfen maximal 50 Einzelbyte-Zeichen lang sein. Bei anderen Dateinamen gilt eine maximale Länge von 200 Einzelbyte-Zeichen. Für Sprachen, in denen Doppelbyte-Zeichen verwendet werden (z. B. Japanisch, Chinesisch und Koreanisch), gilt ein Limit von 25 bzw. 100 Zeichen.

Optional: Reservebilder

Reservebilder sind optional. Sie werden nur ausgeliefert, wenn die Creative-Assets vom Browser oder der Plattform des Nutzers nicht unterstützt werden. Das ist beispielsweise der Fall, wenn ein Besucher Internet Explorer 8 verwendet und Ihr Creative CSS-Animationen enthält.

Laden Sie Reservebilder getrennt von Ihrer Creative-ZIP-Datei hoch. Wenn Sie kein Reservebild hochladen, wird stattdessen ein vom System generiertes leeres Bild ausgeliefert.

HTML5-Creative hochladen

Als Erstes müssen Sie Ihre Creative-Assets in eine ZIP-Datei komprimieren. Was muss eine HTML5-ZIP-Datei enthalten?

Öffnen Sie ein Werbetreibendenkonto und klicken Sie dann im Menü links auf Creatives.
Klicken Sie auf Neu, dann auf Hochladen und dann auf HTML5 oder Bild.
Geben Sie in Display & Video 360 einen Namen für das Creative ein.
Wenn Sie Creative-Dateien hinzufügen möchten, ziehen Sie eine ZIP-Datei von Ihrem Computer auf „Datei hier ablegen“. Oder klicken Sie auf Hochladen und wählen Sie dann eine ZIP-Datei aus.

Falls der HTML5-Upload abgelehnt wird, sehen Sie sich die Schritte zur Fehlerbehebung an.
Wählen Sie unter Abmessungen mindestens ein Wertepaar für die Auslieferung aus. In Display & Video 360 werden Creatives mit einer Größe und responsive HTML5-Creatives mit mehreren Größen unterstützt.
Prüfen und bearbeiten Sie im Bereich „Ereignisse“ die im Creative gefundenen Exits. Sie können bei jedem Exit und Klick-Tag die Landingpage-URL bearbeiten, die mit http:// oder https:// beginnt. Wenn Sie das Berichtslabel oder die URL ändern möchten, bewegen Sie den Mauszeiger auf die entsprechende Zeile und klicken Sie auf „Bearbeiten“ .
Hinweis: Wenn Sie das Creative gespeichert haben, kann es einige Minuten dauern, bis Sie die aktualisierte Landingpage in der Vorschau oder im synchronisierten Campaign Manager 360-Werbetreibenden sehen.
Speichern Sie das Creative.

Ihre Creatives werden in Display & Video 360 manuell und automatisch überprüft. Außerdem wird geprüft, ob die Creatives den Werberichtlinien von Google und den Richtlinien für Anzeigenplattformen entsprechen, auf denen sie ausgeliefert werden können. Sie können den Status Ihrer Creatives auf dem Tab Creative-Status prüfen.

Erweiterte Einstellungen

Die folgenden Einstellungen sind optional.

Wenn die Interstitial-Anzeige nicht auf Displays von Mobilgeräten passt, wird sie in Display & Video 360 skaliert. Aktivieren Sie „Keine Skalierung zur Anpassung an die Gerätebreite“, um das zu verhindern.
Fügen Sie ein Reservebild und ein Berichtslabel ein. Bei responsiven Creatives kann ein Reservebild pro Größe hochgeladen werden.
Laden Sie ein Polite Load-Bild hoch. Dieses Bild wird ausgeliefert, wenn es beim Laden Ihrer primären Creative-Dateien zu Verzögerungen kommt oder wenn die Netzwerkverbindung langsam ist.
Wenn der Display & Video 360-Werbetreibende mit einem Campaign Manager 360-Konto verknüpft ist, können Sie eine Tracking-Anzeige hinzufügen, um Berichte im verknüpften Campaign Manager 360-Werbetreibenden zu erhalten. Hinweis: Diese Option ist nur für Rich Media-, 3D-Animations- und benutzerdefinierte datengetriebene Creatives verfügbar.
1. Klicken Sie auf Auslieferungseigenschaften.
2. Suchen Sie nach einer vorhandenen Campaign Manager 360-Tracking-Anzeige. Erstellen Sie in Campaign Manager 360 eine Tracking-Anzeige, bevor Sie das Creative in Display & Video 360 einrichten, damit ausreichend Zeit für die Synchronisierung bleibt.
  
  Tipp: Damit Sie die richtige Tracking-Anzeige leichter finden können, empfehlen wir, in Campaign Manager 360 nur eine Tracking-Anzeige pro Anzeige und Placement zuzuweisen.
Klicken Sie auf Zusätzliche Informationen, um ein Tracking-Tag, einen Integrationscode oder Notizen hinzuzufügen.

Vorschau teilen

HTML5-Creatives lassen sicher über einen Vorschaulink teilen. So können andere Nutzer sie überprüfen oder freigeben. Jeder, an den Sie den Link senden, kann das Creative aufrufen. Hierzu ist keine Anmeldung erforderlich.

Häufig gestellte Fragen

Warum wird die Creative-Größe nach dem Hochladen der Datei nicht richtig angezeigt?

Die Creative-Größe richtet sich nach dem Creative oder dem Reservebild. Achten Sie deshalb darauf, dass das Reservebild mit der Größe des primären Creatives übereinstimmt. Sie können im Drop-down-Menü Abmessungen auch die richtigen Abmessungen auswählen.

Warum kann ich mein Creative nicht hochladen?

Häufig führen folgende Probleme dazu, dass ein Creative-Asset nicht hochgeladen werden kann:

Der Dateiname ist zu lang: Bei den meisten Dateitypen darf er aus maximal 200 Einzelbyte- oder 100 Doppelbyte-Zeichen bestehen. Bei Audio- und Videodateien beträgt die maximale Länge 50 Einzelbyte- oder 25 Doppelbyte-Zeichen.
ZIP-Dateien enthalten ZIP-Dateien: Eine ZIP-Datei innerhalb einer anderen ZIP-Datei ist nicht zulässig.
Das Creative hat keine Klick-URL: Alle Creatives müssen mindestens einen Exit enthalten, über den der Nutzer auf die Landingpage des Werbetreibenden gelangt.
Das Google Web Designer-Creative muss aktualisiert werden: Wenn Sie das Creative in Google Web Designer erstellt haben, sehen Sie möglicherweise die Fehlermeldung „Die Google Web Designer-HTML enthält ungültige Metadaten“. Das bedeutet, dass das Creative mit einer veralteten Version von Web Designer erstellt wurde und aktualisiert werden muss. Aktualisieren Sie Web Designer, öffnen Sie das Creative und veröffentlichen Sie es noch einmal.

Weitere Informationen

War das hilfreich?

Wie können wir die Seite verbessern?