HTML5-Creatives
HTML5-Creatives sind mit JavaScript, HTML und CSS erstellte Anzeigen, die auf Webseiten oder in mobilen Apps geschaltet werden. Sie können sein:
- Display – Bildanzeigen, auf die Sie klicken können, um zur Website eines Werbetreibenden zu gelangen
- Rich Media – Anzeigen mit interaktiven Elementen wie Animationen, Bildergalerien, Spielen oder eingebetteten Videos
- AMPHTML – Schnell ladende, sichere Anzeigen, die für Mobilgeräte optimiert sind
Display & Video 360 unterstützt den direkten Upload von Display-, Rich Media- und AMPHTML-Bannern. Wenn Sie jedoch Creatives mit erweiterten Rich Media-Funktionen verwenden möchten, einschließlich Expandable- oder Interstitial-Formaten, verwenden Sie Studio . Studio-Creatives können über Campaign Manager 360 getraffickt und mit Ihrem Display & Video 360-Konto synchronisiert werden.
HTML5-Creatives können Display-Werbebuchungen zugewiesen werden.
Unterstützte HTML5-Creative-Typen
Display & Video 360 unterstützt die folgenden HTML5-Anzeigenformate. Um zu sehen, wie Creatives der einzelnen Typen aussehen, besuchen Sie die Rich Media-Galerie .
Anzeige
Ein HTML5-Creative mit einer oder mehreren festen Größen und einer festen Position auf einer Webseite oder in einer mobilen App.
Unterstützte Anzeigefunktionen:
- Klick-Tags – Klick-Tags sind ein kleiner Code, der verwendet wird, um Klicks zu verfolgen, die die Zielseite Ihres Werbetreibenden öffnen.
- Responsive Creatives – Sie können mehrere unterschiedliche Größen desselben Display-Banners als ein responsives Creative verpacken, um die Creative-Zuweisung zu vereinfachen.
Reiche Medien
Was sind Rich-Media-Inhalte?
Rich Media ist ein digitaler Werbebegriff für eine Anzeige, die erweiterte Funktionen wie Video, Audio oder andere Elemente enthält, die die Zuschauer dazu anregen, mit dem Inhalt zu interagieren und sich mit ihm zu beschäftigen. Rich Media-Anzeigen enthalten zusätzliche Tracking-Metriken, um Rich-Interaktionen aufzuzeichnen, sodass Sie ein klareres Bild davon erhalten, wie Verbraucher mit Ihrer Anzeige interagieren.
Rich Media-Banner-Creatives können Videos und detaillierte Interaktionsmesswerte (einschließlich Zähler und Timer) enthalten, während ein HTML5-Display-Creative dies nicht kann.
Unterstützte Rich Media-Funktionen und -Formate:
- Rich Media-Metriken – Verwenden Sie Rich Media-Metriken, um Klicks, Exits, Interaktionen, Video-Wiedergabezeit und mehr zu verfolgen.
- In-Banner-Video – In-Banner-Video-Creatives sind Banner mit eingebetteten Videoplayern. Videos können in alle Rich Media-Formate eingefügt werden, mit Ausnahme von datengetriebenen Creatives .
- Vollbild erweiterbar – Ein Creative, das erweitert werden kann, um den Bildschirm eines Mobilgeräts auszufüllen. Beispielsweise können 3D-Strudel-Creatives auf den Vollbildmodus maximiert werden.
- Datengetriebene Creatives – Datengetriebene Creatives können ihr Look & Feel für verschiedene Kundensegmente personalisieren.
- Parallax-Creatives – Parallaxe ist ein Animationseffekt, den Sie in Rich Media-Creatives verwenden können, um mit Bildebenen die Illusion von Tiefe zu erzeugen. Wenn der Betrachter auf einem mobilen Gerät die Seite nach oben oder unten scrollt, bewegen sich Vorder- und Hintergrundbild mit unterschiedlichen Geschwindigkeiten.
AMPHTML
Erstellen Sie ein HTML5-Creative
Erstellen Sie ein HTML5-Display-Banner
Google Webdesigner
HTML5-Editor
Wenn Sie es vorziehen, Ihren eigenen Code zu schreiben, können Sie ein Banner mit einem beliebigen HTML5-Editor erstellen.
Laden Sie eine Beispiel-ZIP-Datei herunter
(Fortgeschrittene) Erstellen Sie ein HTML5-Banner von Grund auf neu
- Erstellen Sie eine gültige HTML-Datei, einschließlich der Tags
<html>
,<head>
,<title>
und<body>
. - Fügen Sie ein
<meta>
-Tag hinzu, um die beabsichtigte Größe für Ihr Creative anzugeben:
<meta name="ad.size" content="width=[x],height=[y]">
- Klick-Tag hinzufügen:
Fügen Sie dieses Skript-Tag hinzu und ersetzen Sie "
https://www.google.com
" durch die Zielseite Ihres Werbetreibenden:<script type="text/javascript">
var clickTag = "https://www.google.com";
</script>- Umschließen Sie das
<div>
-Tag Ihres primären Bildes oder Anzeigencontainers mit einem<a>
-Tag, um es anklickbar zu machen:<a href="javascript:window.open(window.clickTag)">
<div id="container">
<img src="image.png" />
</div>
</a><a href="javascript:window.open(window.clickTag)">
<div id="container">
<img src="image.png" />
</div>
</a><a href="javascript:window.open(window.clickTag)">
<div id="container">
<img src="image.png" />
</div>
</a>
Erstellen Sie ein Rich Media-Banner
Rich Media-Banner müssen den Enabler von Studio enthalten und Exit-Ereignisse verwenden, keine Klick-Tags. Video und Audio müssen mit der Enabler.getUrl()
-Methode des Enablers geladen werden, damit sie ordnungsgemäß funktionieren.
Erstellen Sie ein AMPHTML-Banner
Was muss in eine HTML5-ZIP-Datei eingefügt werden?
HTML5-ZIP-Dateien können bis zu 100 Dateien enthalten und haben keine Größenbeschränkung. Unabhängig davon sollten Sie Ihre .zip-Datei so leicht wie möglich halten. Die einzigen Dateien in Ihrer ZIP-Datei sollten die Assets sein, die Sie für Ihr endgültiges HTML5-Creative benötigen. Hilfe finden Sie unter Reduzieren der HTML5-Dateigröße .
Benennen Sie Ihre .zip-Datei
Geben Sie Ihrer HTML5-ZIP-Datei einen Dateinamen mit weniger als 50 Zeichen (einschließlich „.zip"). Wenn Ihr Dateiname länger ist, schlägt der Creative-Upload fehl.
Unterstützte Dateitypen
- HTML/Text: HTML, HTM, CSS, JS
- Bilder: JPG, JPEG, GIF, PNG, SVG
- Schriftarten: DFONT, EOT, OTF, TTE, TTF, WOFF, WOFF2
Was in HTML5-ZIP-Dateien enthalten sein soll
HTML-Datei | Das primäre Asset Ihres HTML5-Creatives ist die HTML-Datei. Dies ist der Einstiegspunkt für Ihr Creative. Die Datei muss mindestens einen Exit enthalten und in einen Iframe geladen werden können. Display & Video 360 stellt den Iframe zusammen mit Ihren Assets bereit. | |
Andere Dateien | Schließen Sie andere Dateien (z. B. Bild-, CSS- und JavaScript-Dateien) ein, die von der HTML-Datei geladen werden. |
Was nicht in HTML5-ZIP-Dateien enthalten sein sollte
Andere .zip-Dateien | Schließen Sie keine ZIP-Dateien in Ihre HTML5-ZIP-Datei ein. | |
Nicht referenzierte Dateien | Schließen Sie nur Dateien ein, auf die von der HTML-Datei verwiesen wird. Schließen Sie beispielsweise keine Quell- oder Authoring-Dateien ein, die nicht vom endgültigen Motiv geladen werden. | |
Lokaler oder Sitzungsspeicher | Display & Video 360 akzeptiert keine HTML5-Assets, die lokalen Speicher oder Sitzungsspeicher verwenden. | |
Backup-Image | Schließen Sie keine Backup-Bilder in Ihre HTML5-ZIP-Datei ein, es sei denn, die HTML-Datei verweist darauf. Zum Beispiel, wenn Sie dasselbe Bild sowohl als Hintergrundbild als auch als Backup-Bild verwenden. Sie müssen Backup-Images separat im Abschnitt Backup-Images hochladen. | |
Dateien mit langen Namen |
|
(Optional) Backup-Images
Reservebilder sind optional und werden nur geschaltet, wenn Ihre Creative-Assets nicht vom Browser oder der Plattform des Betrachters unterstützt werden. Zum Beispiel, wenn jemand mit Internet Explorer 8 surft und Ihr Creative CSS-Animationen verwendet.
Backup-Images müssen separat von Ihrer Creative-ZIP-Datei hochgeladen werden. Wenn Sie kein Backup-Image hochladen, wird stattdessen ein vom System generiertes leeres Image bereitgestellt.
Laden Sie ein HTML5-Creative hoch
Öffnen Sie einen Werbetreibenden und klicken Sie dann im linken Menü auf Creatives .
Klicken Sie auf Neu Hochladen HTML5 oder Bild .
Geben Sie in Display & Video 360 einen Namen für das Creative ein.
Um Ihre Creative-Dateien hinzuzufügen, ziehen Sie eine ZIP-Datei von Ihrem Computer und legen Sie sie über "Datei hierher ziehen" ab. Oder klicken Sie auf Hochladen und wählen Sie dann die ZIP-Datei von Ihrem Computer aus. Erfahren Sie, was in HTML5-ZIP-Dateien enthalten sein sollte
Wenn Ihr HTML5-Upload abgelehnt wird, befolgen Sie diese Schritte zur Fehlerbehebung .Wählen Sie eine oder mehrere Auslieferungsdimensionen für Ihr Creative aus. Display & Video 360 unterstützt Creatives mit einer einzigen Größe oder responsive HTML5-Creatives , die mehrere Größen unterstützen.
Überprüfen und bearbeiten Sie im Abschnitt "Ereignisse" die im Creative erkannten Exits. Für jeden Exit (oder Klick-Tag) können Sie die Zielseiten-URL bearbeiten, beginnend mit
http://
oderhttps://
. Um das Berichtslabel oder die URL zu bearbeiten, bewegen Sie den Mauszeiger über die Zeile und klicken Sie dann auf Bearbeiten .
Hinweis: Nachdem Sie das Creative gespeichert haben, kann es einige Minuten dauern, bis eine aktualisierte Zielseite in der Vorschau oder in Ihrem synchronisierten Campaign Manager 360-Werbetreibenden angezeigt wird.Speichern Sie Ihr Motiv.
Sobald ein Creative zu Display & Video 360 hinzugefügt wurde, wird es manuell und automatisch überprüft, um sicherzustellen, dass das Creative ordnungsgemäß funktioniert und den Creative-Richtlinien von Display & Video 360 und allen Inventarquellen mit expliziten Creative-Anforderungen entspricht. Informationen zum Überprüfungsstatus des Creatives werden auf der Registerkarte Creative-Status des Creatives angezeigt. Erfahren Sie mehr über den Creative-Überprüfungsprozess .
Erweiterte Einstellungen
Die folgenden Einstellungen sind optional.
Wenn Ihr Creative als Interstitial in einer mobilen App geschaltet wird und es nicht so breit wie der Bildschirm des Geräts ist, skaliert Display & Video 360 das Creative standardmäßig automatisch so, dass es passt, wobei dasselbe Seitenverhältnis beibehalten wird. Wenn Sie die Skalierung deaktivieren möchten, aktivieren Sie Nicht an Gerätebreite anpassen . Um die Skalierung zuzulassen, lassen Sie das Kontrollkästchen deaktiviert.
Fügen Sie ein Backup-Image und ein Berichtslabel hinzu. Wenn Sie ein responsives Creative hochladen, können Sie ein Reservebild pro Größe hochladen.
Laden Sie ein Polite Load-Bild hoch . Dieses Bild wird angezeigt, wenn es zu Verzögerungen beim Laden Ihrer primären Creative-Dateien oder bei langsameren Netzwerkverbindungen kommt.
- Wenn Ihr Display & Video 360-Werbetreibender mit einem Campaign Manager 360-Konto verknüpft ist, fügen Sie eine Tracking-Anzeige hinzu, um Berichte für den verknüpften Campaign Manager 360-Werbetreibenden zu erhalten. Hinweis: Diese Option ist nur für Rich Media-, Swirl- und benutzerdefinierte datengesteuerte Creatives verfügbar.
- Klicken Sie auf Serving-Eigenschaften .
- Suchen Sie nach einer vorhandenen Campaign Manager 360-Tracking-Anzeige. Um Zeit für die Synchronisierung zu haben, sollten Sie eine Tracking-Anzeige in Campaign Manager 360 erstellen, bevor Sie Ihr Creative in Display & Video 360 erstellen.
Tipp: Damit Sie die richtige Tracking-Anzeige leichter finden, weisen Sie in Campaign Manager 360 nur 1 Tracking-Anzeige pro Anzeige und Platzierung zu.
Klicken Sie auf Zusätzliche Details , um ein Tracking-Tag an das Creative anzuhängen, einen Integrationscode oder Anmerkungen hinzuzufügen.
Teilen Sie eine Vorschau
Über einen Vorschaulink können Sie HTML5-Creatives zur Überprüfung oder Freigabe für andere freigeben. Jeder, mit dem Sie diesen Link teilen, kann ihn sehen. Es ist keine Anmeldung erforderlich.
Sie können eine Vorschau von der Liste der Motive oder von der Detailseite des Motivs aus anzeigen:
- Klicken Sie auf der Seite „Creatives" in der Listenansicht oder Galerieansicht auf Vorschau .
Klicken Sie auf der Detailseite des Creatives unter dem Creative-Namen auf Vorschau .
Die Vorschau wird in einem neuen Browser-Tab geöffnet.
- Kopieren Sie den Link in die Adressleiste des Browsers.
- Fügen Sie diesen kopierten Link ein und senden Sie ihn an die Person, die Ihr Creative überprüfen soll.
Freigegebene Vorschauen sind ganzseitige Vorschauen, mit denen Sie testen können, wie das Creative in verschiedenen Umgebungen aussieht und ob Ereignisse zum richtigen Zeitpunkt aufgezeichnet werden. Erfahren Sie mehr über Vorschauoptionen
Häufig gestellte Fragen
Sie haben möglicherweise Schwierigkeiten bei der Vorschau Ihrer Creatives in Display & Video 360, wenn Ihre Creatives nicht mit SSL geladen werden. (Diese werden auch als nicht sichere Creatives bezeichnet.)
Klicken Sie auf das Schildsymbol, um eine Vorschau von nicht sicheren Creatives anzuzeigen in der Adressleiste Ihres Browsers und klicken Sie dann auf Unsichere Skripts laden (wenn Sie Chrome verwenden) oder Schutz auf dieser Seite deaktivieren (wenn Sie Firefox verwenden). Nachdem die Seite neu geladen wurde, sollten Sie Ihr nicht sicheres Creative sehen können.
Häufige Probleme, die Sie am Hochladen eines Creative-Assets hindern, sind:
- Dateiname ist zu lang: Für die meisten Dateitypen beträgt die maximale Länge 200 Zeichen. Bei Audio- und Videodateien beträgt die maximale Länge 50 Zeichen. (Kürzen Sie diese Höchstwerte für Sprachen mit breiten Zeichen um die Hälfte.)
- ZIPs innerhalb von ZIPs: Das Einfügen einer komprimierten ZIP-Datei in eine andere ZIP-Datei ist nicht zulässig.
- Creative hat keinen Click-through: Alle Creatives müssen mindestens einen Exit enthalten, der zu einer Zielseite des Werbetreibenden führt.
- Google Web Designer-Creative muss aktualisiert werden: Wenn Ihr Creative mit Google Web Designer erstellt wurde, wird möglicherweise der Fehler „Metadaten im Google Web Designer-HTML sind ungültig" angezeigt. Das bedeutet, dass das Creative mit einer veralteten Version von Web Designer erstellt wurde und aktualisiert werden muss. Führen Sie ein Upgrade auf die neueste Version von Web Designer durch, öffnen Sie das Motiv und veröffentlichen Sie es erneut.
Weitere Hilfe finden Sie unter Fehlerbehebung bei Creative-Uploads .
No comments:
Post a Comment