HTML5-Display-Assets für Campaign Manager 360 vorbereiten

Dieser Leitfaden hilft Ihnen bei der Vorbereitung von HTML5-Display-Assets, um sie in Campaign Manager 360 hochzuladen.

Creatives, für die HTML5 verwendet wird

HTML5-Creatives können entweder Display- oder Rich Media-Creatives sein. Weitere Informationen zu den einzelnen Typen finden Sie unten.

Display-Creatives

Display-Creatives sind Nicht-Rich Media-Creatives, für die Bilder oder HTML5-Elemente verwendet werden können. Display-Creatives haben folgende Vorteile:

• Berichterstellung zu Klick-Tags für einzelne Exits
• Polite Load
• Unterstützung für responsive HTML5-Assets

Rich Media-Creatives

Rich Media-Creatives sind HTML5-Creatives, die In-Banner-Videos oder interaktive Elemente wie Spiele enthalten können oder sich maximieren lassen. Rich Media-Creatives haben folgende Vorteile:

• Berichterstellung zu mehreren Exits, Zählern und Timern, um so Daten zu Interaktionen zu erhalten
• Maximierung in ein größeres Format oder in ein Vollbild
• Unterstützung für In-Banner-Video und -Audio
• Polite Load

Assets für HTML5-Display-Creatives vorbereiten und hochladen

Um Display-Creatives mit HTML5 einzurichten, laden Sie Ihr HTML5-Creative als ZIP-Datei in Campaign Manager 360 hoch. Die ZIP-Datei sollte eine HTML-Datei und alle weiteren Dateien enthalten, auf die die HTML-Datei verweist.

1. Erstellen Sie einen Ordner.

2. Fügen Sie die HTML-Datei sowie alle Assets hinzu, auf die die Datei verweist. Kopieren Sie keine anderen Dateien in den Ordner. Sie können Ihre Assets in Unterordnern organisieren, sollten diese Unterordner aber nicht komprimieren.

   Inhalt der ZIP-Datei

   Was die ZIP-Datei enthalten sollte

   • HTML-Datei: Das primäre Asset des HTML5-Display-Creatives ist die HTML-Datei. Sie ist der Einstiegspunkt für Ihr Creative. Die HTML-Datei muss ein vollständiges HTML-Dokument sein, das mindestens ein Klick-Tag enthält und in einen iFrame geladen werden kann. Über Campaign Manager 360 wird der iFrame zusammen mit Ihren Assets ausgeliefert. Zu Klick-Tags erfahren Sie weiter unten mehr.

   • Andere Dateien: Die ZIP-Datei muss auch alle anderen Dateien enthalten, auf die die HTML-Datei verweist. Fügen Sie keine nicht relevanten Dateien hinzu.

   Was die ZIP-Datei nicht enthalten soll

   • Die HTML5-ZIP-Datei darf keine ZIP-Dateien enthalten. Wenn Sie mehrere HTML5-Creatives und somit mehrere HTML5-ZIP-Dateien haben, können Sie diese für den Batch-Upload in Campaign Manager 360 zippen.

   • Sie sollten nur relevante Dateien einfügen, auf die die HTML-Datei verweist.

   • In Campaign Manager 360 werden keine HTML5-Assets unterstützt, die den lokalen Speicher oder Sitzungsspeicher verwenden.

   • Der Name der Assetdatei darf kein Prozentzeichen (%) enthalten.

   • Keine Reserve-Assets

     • Optional: Der Trafficker kann ein separates Reservebild in Campaign Manager 360 hochladen. Ein solches Bild wird verwendet, wenn die primären Assets nicht in Campaign Manager 360 genutzt werden können, weil sie nicht unterstützt werden. Fügen Sie Ihrer HTML5-ZIP-Datei kein Reservebild hinzu.

   Unterstützte Dateitypen und Grenzwerte für die ZIP-Datei

   • Unterstützte Dateitypen: HTML, HTM, JS, CSS, JPG, JPEG, GIF, PNG, JSON, XML, SVG, EOT, OTF, TTF, WOFF und WOFF2

   • Maximale Anzahl von Dateien pro ZIP-Datei: 100

   • Maximale Dateigröße: 100 MB

   Beispiel für eine HTML5-ZIP-Datei

   Beispiel-ZIP-Datei herunterladen

   Hilfe bei ADZ-Dateien

   In Campaign Manager 360 werden auch HTML5-Creatives im ADZ-Format unterstützt. Behandeln Sie die ADZ-Datei genau wie eine ZIP-Datei. Für Ihre Zwecke besteht kein Unterschied zwischen ADZ- und ZIP-Dateien.

3. Komprimieren Sie den Ordner in eine ZIP-Datei. Benötigen Sie Hilfe beim Komprimieren von Ordnern? Probieren Sie die Windows-Hilfe oder Apple Support aus.

4. Der Trafficker kann diese ZIP-Datei jetzt in Campaign Manager 360 hochladen.

   Weitere Informationen zum Trafficking:

   • Creatives in Campaign Manager 360 hinzufügen

   • Display-Creatives im Überblick

Probleme beim Upload

Prüfen Sie mit dem HTML5 Validator, ob Ihre ZIP-Dateien in Campaign Manager 360 akzeptiert werden.

Warum kann ich mein HTML5-Display-Creative nicht für den Upload in Campaign Manager 360 auswählen?

1. Ein möglicher Grund für dieses Problem ist, dass Ihre Datei nicht im ZIP- oder ADZ-Format vorliegt. Komprimieren Sie die HTML-Datei und alle anderen Dateien, auf die sie verweist, in eine einzelne ZIP-Datei und versuchen Sie es erneut.

2. Falls Sie glauben, eine ZIP-Datei zu haben, sehen Sie sich zur Sicherheit die Dateiendung an. Rufen Sie hierzu über das Kontextmenü die Eigenschaften der Datei auf und prüfen Sie, ob der Name auf .zip endet.

3. Falls Sie die Datei trotzdem nicht auswählen können, müssen Sie sich unter Umständen an den Support wenden.

Warum wurde mein Upload von Campaign Manager 360 abgelehnt?

Wenn Sie Probleme beim Hochladen der Datei haben, enthält sie möglicherweise keine gültigen HTML5-Assets oder mehr als 100 Dateien (Grenzwert). Eventuell werden im HTML5-Asset auch JavaScript APIs für lokalen Speicher oder Sitzungsspeicher verwendet. Aus Datenschutzgründen sind diese APIs in Campaign Manager 360 nicht zulässig.

Warum sind in Campaign Manager 360 keine JavaScript APIs für lokalen Speicher oder Sitzungsspeicher zulässig?

Aus Datenschutzgründen sind in Campaign Manager 360 keine HTML5-Assets zulässig, die den lokalen Speicher oder Sitzungsspeicher verwenden. Falls Ihre hochgeladenen Dateien aus diesem Grund abgelehnt werden, bitten Sie Ihren Entwickler, die unzulässigen APIs zu entfernen. Laden Sie das Asset anschließend wieder hoch. Genauer gesagt können Sie keine HTML5-Assets mit folgenden JavaScript APIs hochladen:

• indexedDB
• localStorage
• openDatabase
• sessionStorage

Falls Ihre Werbeziele von diesen APIs abhängen, verwenden Sie anstelle der APIs die Campaign Manager 360-Einstellungen. Einige Werbetreibende verwenden diese APIs beispielsweise für das Anzeigen-Targeting und Frequency Capping. Hierfür stehen aber auch in Campaign Manager 360 Optionen zur Verfügung. Wenden Sie sich zur Implementierung entsprechender Lösungen an den Support. Unabhängig davon, wie Sie Ihr Asset einrichten, dürfen Sie nur Daten erfassen, die den Datenschutzbestimmungen in Ihrem Vertrag mit der Google Marketing Platform entsprechen.

Was ist lokaler Speicher und Sitzungsspeicher? Es handelt sich um zwei Arten von HTML5-Webspeicher, bei denen Daten in einem Browser gespeichert werden. Bei einem lokalen Speicher wird eine Datei über verschiedene Browsersitzungen hinweg im Browser gespeichert. Diese Datei bleibt dauerhaft im Browser gespeichert, bis der Nutzer den Browsercache leert oder die Datei manuell löscht. Bei einem Sitzungsspeicher werden nur die Daten einer bestimmten Browsersitzung im Browser gespeichert. Sobald Sie den Browser schließen und wieder öffnen, werden alle sitzungsbasierten gespeicherten Daten gelöscht.

Warum sind diese Arten von Webspeicher nicht erlaubt? Die gespeicherte Datei kann Code enthalten, mit dem personenidentifizierbare Informationen und sitzungsübergreifende Browseraktivitäten erfasst oder andere Daten an Drittanbieter gesendet werden können, was den Bedingungen Ihres Google Marketing Platform-Vertrags widerspricht. Diese Art der Datenerfassung ist zwar nicht die einzige, aber eine der Verwendungsmöglichkeiten von lokalen Speichern und Sitzungsspeichern, da die Datei beliebige Arten von Code enthalten kann.

Richtlinien für Entwickler

Ressourcen

• HTML5-Richtlinien des IAB

Größe eines Creatives festlegen

Richtlinien für die Größe

Im Gegensatz zu Bildern oder Videos haben HTML-Dokumente keine eigene Größe. Aus diesem Grund wird mit dem Meta-Tag für die Größe die gewünschte Größe für das Creative angegeben. Dieses Meta-Tag ist ein optionaler Parameter, mit dem Sie sicherstellen können, dass das Creative mit den richtigen Abmessungen gerendert wird. So geben Sie die Größe an:

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

Klick-Tags

Richtlinien für Klick-Tags

Klick-Tags geben Landingpages für jeden Exit in Ihren Creatives mit HTML5-Assets an. Ein Exit ist ein Bereich, mit dem der Browser nach einem Klick auf eine bestimmte Zielseite weitergeleitet wird. Mit jedem Klick-Tag wird die Landingpage für einen anderen Exit festgelegt.

Wenn ein Nutzer auf einen Exit klickt, wird die Landingpage für den entsprechenden Exit aus Campaign Manager 360 abgerufen. Legen Sie diese Landingpage je nach Bedarf im Creative oder in der Anzeige fest.

In Campaign Manager 360 werden Klick-Tags erkannt, wenn Sie Ihre Assets hochladen. Sie können die vom Klick-Tag verwendete Landingpage jederzeit ändern, selbst wenn Sie bereits Tags exportiert haben. Der Grund ist, dass das Klick-Tag eine standardmäßige Variable ist, also ein Platzhalter für die URL und keine hartcodierte Zielseite.

Es gibt einige Best Practices für die Einrichtung von Klick-Tags, da die Einstellungen auf Creative-Ebene von denen auf Anzeigenebene überschrieben werden:

• Ihr Creative muss die Klick-Tag-Variable als Klickziel verwendet.
• Das Klick-Tag muss vom Ad-Server leicht gelesen werden können. Der Tag-Code darf weder komprimiert noch verschleiert werden. Für den restlichen Code sowie in anderen Dateien ist eine solche Komprimierung hingegen zulässig.
• URLs sollten im Asset nicht hartcodiert werden, weil dann in Campaign Manager 360 keine Klicks erfasst werden und Trafficker die URL nicht aktualisieren können. Nach dem Upload wird in Campaign Manager 360 eine Warnung angezeigt, falls das Asset hartcodierte URLs enthält.

Beispiel für das Einfügen von Klick-Tags

Hier sehen Sie ein Beispiel für ein Klick-Tag, das in ein HTML-Dokument eingefügt wurde:

<html>
<head>
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://www.google.com"; </script>
</head>
[The rest of your creative code goes here.] </html>

In Ihrem Creative muss die Klick-Tag-Variable als Landingpage-URL verwendet werden:

<a href="javascript:window.open(window.clickTag)">
<img src="images/dclk.png" border=0>
</a>

Google Web Designer für Exit-Ereignisse verwenden

Die Komponente der Interaktionsfläche von Google Web Designer ist vollständig mit Campaign Manager 360 kompatibel. Benutzerdefinierter Code ist nicht erforderlich.

So fügen Sie mit der Interaktionsfläche ein Klick-Tag hinzu:

1. Achten Sie darauf, dass Ihre Anzeige über eine Schaltfläche oder ein anderes erkennbares Call-to-Action-Element verfügt, das der Nutzer anklicken oder antippen kann.
2. Ziehen Sie die Komponente "Interaktionsfläche" aus dem Ordner "Interaktion" des Bereichs "Komponenten" in den Anzeigebereich und positionieren Sie sie über dem Call-to-Action.
3. Klicken Sie im Bereich "Ereignis" auf die Schaltfläche "Neues Ereignis" .
4. Wählen Sie im Dialogfeld "Ereignis" folgende Optionen aus:

   Ziel	Die Komponente "Interaktionsfläche" (gwd-taparea_1)
   Ereignis	Interaktionsfläche > Berühren/Klicken
   Aktion	Google Anzeige > Exit-Anzeige Hinweis: Die Aktion Exit-Anzeige (überschreibt die URL) ist ähnlich, ermöglicht jedoch keine Änderung der URL außerhalb des Creatives, z. B. in Studio oder Campaign Manager 360, und sollte nur für dynamische Anzeigen verwendet werden.
   Empfänger	gwd-ad
   Konfiguration	Messwerte-ID: Dies ist ein Label (z. B. "CTA"), durch das Berichte leichter verständlich sind. URL: Dies ist die Exit-URL. Beim Schließen der Anzeige minimieren: Klicken Sie dieses Kästchen an, damit die Expandable-Anzeige geschlossen wird, wenn der Nutzer auf die entsprechende Schaltfläche klickt. Medien beim Schließen der Anzeige pausieren: Wenn Sie dieses Kästchen anklicken, wird die Video- und Audiowiedergabe gestoppt, wenn der Nutzer die Anzeige schließt. Minimierte Ansicht nach Schließen der Anzeige: Bei Expandable-Anzeigen wird diese Seite angezeigt, wenn der Nutzer die Anzeige schließt.

   

Beispieldateien

Beispiel-HTML-Dokument

Hier ist ein Beispiel eines vollständigen HTML-Dokuments für ein HTML5-Creative. Das Klick-Tag und das Meta-Tag für die Größe sind fett dargestellt.

Dieses Creative ist relativ einfach und keine zusätzlichen Assets sind erforderlich. Wenn dies Ihr HTML5-Creative wäre, würden Sie es als ZIP- oder ADZ-Datei komprimieren und an den Campaign Manager 360-Trafficker senden.

Dokument

<html>
  <head>
    <title>sample html page</title>
    <meta name="ad.size" content="width=300,height=250">
    <style>
      html, body {background-color: blue;}
      p { color:white; }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
      var clickTag = "http://www.google.org";
      function resizeWindow()
      {
        $('p').css({ 'width':'100%', 'text-align':'center' });
        var h1 = $('h1').height();
        var h = h1/2;
        var WinHeight = $(window).height();
        var w = WinHeight/2;
        var m = w - h;
        var WinWidth=$(window).width();
        $('p').css("margin-top",m + "px");
        $("p").text("Size="+WinWidth+"x"+WinHeight);
      }
      $(document).ready(function () {
        resizeWindow();
      });
      $(window).resize(function () {
        resizeWindow();
      });
     </script>
  </head>
<body>
    <a href="javascript:window.open(window.clickTag)"><p>Page loading...</p></a> </body> </html>

HTML5-Dateien mit Klick-Tags

Diese HTML5-Dateien werden verwendet, um URLs dynamisch zu ändern und Klicks mit den Campaign Manager 360-Ad-Servern zu erfassen.

Einfach

Bei einem Klick wird ein Klick-Tag aufgerufen.

Einfache HTML5-Datei

Mit Parameter

Ruft clickTag auf, wenn auf die Schaltfläche geklickt wird. In diesem Beispiel wird die Übergabe eines Parameters (z. B. einer Postleitzahl) an die Ziel-URL veranschaulicht.

HTML5 file with parameter

Beispiel mit einem #-Zeichen

Wird codiert, um den Tracking-Aufruf von Campaign Manager 360 und die Landingpage-URL der Schaltfläche aufzuschlüsseln. Diese Aufschlüsselung ist für jedes Creative erforderlich, das zu einer Ziel-URL führt, die ein Rautezeichen (#) enthält.

HTML5 file with a number sign in a click tag URL

Mehrere Klick-Tags

Enthält mehrere Klick-Tags

HTML5 file with multiple click tags

Loader

ZIP-Datei, die zwei ZIP-Dateien enthält: die übergeordnete und die untergeordnete Datei. Die übergeordnete Datei lädt die untergeordnete Datei.

HTML5 parent and child files

HTML5-Dateien mit speziellem Tracking

Dies ist ein Beispiel für eine HTML5-Datei, die für das Erfassen von Nutzerinteraktionen in Nicht-Rich Media-Creatives verwendet wird.

1x1-Tracking-Pixel

Hiermit wird beim Laden ein Campaign Manager 360-1-x-1-Tracking-Pixel aufgerufen.

HTML5 file with special tracking