Gmail-Anzeigen mit benutzerdefiniertem HTML erstellen

Mit benutzerdefiniertem HTML haben fortgeschrittene Werbetreibende die Möglichkeit, Anzeigen zu erstellen, die sich von den vorhandenen Gmail-Anzeigenvorlagen unterscheiden. Die Anzeigen können Videos und mehrere Calls-to-Action enthalten. Wenn Sie Gmail-Anzeigen mit einem an Ihre Anforderungen angepassten Layout erstellen möchten, laden Sie Ihre benutzerdefinierten HTML-Dateien in Google Ads hoch. 

In diesem Artikel erfahren Sie, wie Sie benutzerdefinierte Gmail-Anzeigen konfigurieren und hochladen.

Hinweis

Wichtig: Bei Gmail-Anzeigen mit benutzerdefiniertem HTML bleibt das Format der Ziel-URLs erhalten. Die Anzeigen sind nicht mit den finalen URLs und Tracking-Vorlagen kompatibel. Weitere Informationen zur URL-Umstellung

Anleitung

Eine Gmail-Anzeige mit benutzerdefiniertem HTML ist ein ZIP-Ordner, der alle Dateien für die minimierte und maximierte Anzeige enthält. Beachten Sie die unten aufgeführten strengen Formatierungsspezifikationen, um Probleme zu vermeiden.

Für die Anzeige gelten folgende Limits im Hinblick auf die Gesamtgröße:

  • ZIP-Ordner: maximal 1,25 MB
  • Anzahl der Dateien: maximal 100
  • Dateigröße: maximal 500 KB

Minimierte Anzeige erstellen

Fügen Sie für die minimierte Anzeige zwei Dateien in den ZIP-Ordner ein:

  • Logobild mit dem Dateinamen "logo.png", "logo.jpg" oder "logo.gif"
  • Textdatei mit dem Dateinamen "teaser.txt"

Spezifikationen für das Logobild

Die Datei muss den Namen "logo.png", "logo.jpg" oder "logo.gif" haben und entsprechend im PNG-, JPG- oder GIF-Format vorliegen.

  • Größe des Logobilds: mindestens 144 x 144 Pixel mit einem Seitenverhältnis von 1:1
  • Maximale Dateigröße: 150 KB
  • Dateiformat: PNG, JPG oder GIF (nicht animiert)

Das Logobild ist ein kleines Symbol, eine Grafik oder ein Markenlogo.

Das Bild wird auf Geräten mit normaler Auflösung als Quadrat mit 50 x 50 Pixel dargestellt. Allerdings werden Größen bis zu 144 x 144 Pixel akzeptiert, da mit diesem Format auf einigen Bildschirmen eine bessere Darstellung möglich ist.

Spezifikationen für die Textdatei

Die Datei muss den Namen "teaser.txt" haben und im TXT-Format vorliegen. Unten sehen Sie ein Beispiel für eine korrekt formatierte Textdatei.

Advertiser: Ihr Unternehmen
Subject: 20 % Rabatt
Description: Neuware zum Tiefpreis!
Display URL: www.example.com
Landing Page: https://www.example.com/ausverkauf

Hinweis: Gehen Sie genau wie im Beispiel vor. Verwenden Sie also die unten aufgeführten englischen Überschriften. Sie müssen sowohl die Kategorie (wie "Advertiser") als auch Ihre spezifischen Informationen angeben. In der unten gezeigten Tabelle finden Sie Informationen zur maximalen Zeichenanzahl und zu den anzugebenden Inhalten.

Überschriften Maximale Zeichenanzahl Inhalte
Advertiser 20 Name oder Domain Ihres Unternehmens
Subject 25 Der Titel kann Angebote, Rabatte oder ansprechende Ankündigungen umfassen.
Description 90 Kurze Zusammenfassung oder Call-to-Action
Display URL 32 Ihre URL (wird in der Anzeige dargestellt)
Zielseite Keine Beschränkung Weiterleitungs-URL für den Teaser: wird als Ziel-URL für Klicks auf die angezeigte Kurz-URL des Absenders verwendet, wenn die Anzeige maximiert wird. Sie können in dieses Feld eine statische Klick-Tracking-URL einfügen. Dies ist die Seite, auf die Nutzer nach dem Klick auf Ihre angezeigte URL weitergeleitet werden.

 

Maximierte Anzeige erstellen

Fügen Sie für die maximierte Anzeige 1 HTML-Datei und 1 Bildordner in den ZIP-Ordner ein:

  • Bildordner mit dem Namen "Images", der die Bilddateien für die maximierte Anzeige enthält
  • HTML-Datei mit dem Namen "index.html"

Spezifikationen für den Bildordner

  • Die Anzeige muss mindestens 1 Bild enthalten. Der Bildordner kann bis zu 100 Bilder umfassen. Wenn Sie Videos in die maximierte Anzeige einbetten möchten, lesen Sie im entsprechenden Abschnitt unten weiter.
  • Maximale Breite von Bildern: 650 Pixel
  • Maximale Höhe von Bildern: 1.000 Pixel. Damit Ihre Anzeigen möglichst wirkungsvoll sind, empfehlen wir eine maximale Höhe von 650 Pixeln für die gesamte Anzeige (einschließlich des gesamten Texts und aller Bilder).

Spezifikationen für die HTML-Datei

Technische Details

  • URLs: Muss mindestens 1 absolute URL umfassen (bis zu 15 sind zulässig), in der alle Sonderzeichen (z. B. Leerzeichen oder das #-Zeichen) codiert sind.
  • Formatierung: Verwenden Sie für das Layout Standard-HTML-Tabellen, damit eine einheitliche Darstellung auf allen Geräten gewährleistet ist.
  • Tracking: Mit statischen Tracking-URLs werden externe Klicks erfasst. Tracking-Pixel für Impressionen sowie dynamische Tracking-URLs sind nicht zulässig. Wenn Sie die Vorlage "Benutzerdefinierte Gmail-HTML-Anzeige" verwenden, müssen Sie den Dateien "index.html" und "teaser.txt" die entsprechenden Tracking-URLs hinzufügen.
  • Markup: Unterstützt werden HTML (UTF-8-Codierung), einige HTML5-Tags ("ARTICLE", "ASIDE", "FIGCAPTION", "FIGURE", "FOOTER", "HEADER", "MARK", "SECTION", "TIME", "WBR") sowie in eingeschränktem Umfang CSS (nur im Stilattribut von Tags, zum Beispiel <div style="color: black">).

Unzulässiger Code

  • JavaScript: <script>-Tags werden automatisch aus Anzeigen entfernt.
  • Stylesheets: <link>-Tags werden automatisch aus der Anzeige entfernt.
  • Adobe Flash
  • HTML5: Unterstützt werden nur "ARTICLE", "ASIDE", "FIGCAPTION", "FIGURE", "FOOTER", "HEADER", "MARK", "SECTION", "TIME" und "WBR".
  • Audio-Datei
  • iFrames
  • Animierte Bilder: GIF-Dateien

Unterstütztes CSS

azimuth border-right-color font-size-adjust list-style padding-bottom text-decoration-style
background border-right-style font-stretch list-style-image padding-left text-emphasis
background-attachment border-right-width font-style list-style-position padding-right text-emphasis-color
background-blend-mode border-spacing font-synthesis list-style-type padding-top text-emphasis-style
background-clip border-style font-variant margin pause text-indent
background-color border-top font-variant-alternatives margin-bottom pause-after text-justify
background-image border-top-color font-variant-caps margin-left pause-before text-kashida-space
background-origin border-top-left-radius font-variant-east-asian margin-right pitch text-orientation
background-position border-top-right-radius font-variant-ligatures margin-top pitch-range text-overflow
background-repeat border-top-style font-variant-numeric marker-offset quotes text-transform
background-size border-top-width font-weight max-height richness text-underline-position
border border-width height max-width speak unicode-bidi
border-bottom box-sizing image-orientation min-height speak-header vertical-align
border-bottom-color caption-side image-resolution min-width speak-numeral voice-family
border-bottom-left-radius clear ime-mode mix-blend-mode speak-punctuation white-space
border-bottom-right-radius color isolation object-fit speech-rate width
border-bottom-style direction layout-flow object-position stress word-break
border-bottom-width display layout-grid opacity table-layout word-spacing
border-collapse elevation layout-grid-char outline text-align word-wrap
border-color empty-cells layout-grid-char-spacing outline-color text-align-last writing-mode
border-left float layout-grid-line outline-style text-autospace zoom
border-left-color font layout-grid-mode outline-width text-combine-upright  
border-left-style font-family layout-grid-type overflow text-decoration  
border-left-width font-feature-settings letter-spacing overflow-x text-decoration-color  
border-radius font-kerning line-break overflow-y text-decoration-line  
border-right font-size line-height padding text-decoration-skip  

Video in die HTML-Datei für die maximierte Anzeige einfügen

  1. Video hinzufügen

    Ein YouTube-Video kann über ein Vorschaufenster in eine Anzeige eingebettet werden. Klickt ein Nutzer auf einem Computer auf das Videobild, wird das Video in Gmail in einer Lightbox abgespielt. Nachdem der Nutzer das Video angesehen hat, wird wieder die maximierte Gmail-Anzeige dargestellt. Auf einem Smartphone wird das Video über den Videoplayer des Nutzers abgespielt, etwa in der YouTube-App oder in einem Browser. 

    Anleitung: Wenn Sie ein YouTube-Video einfügen möchten, muss der Code den YouTube-Link, die Bildquelle und den darzustellenden Text für die Anzeige enthalten. Beispiel:

    <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0"><img src="images/play.jpg" alt="Gmail-Video"></a>

    Hinweis: Bei der Anzeigenvorschau in Google Ads wird das YouTube-Video nicht in der Lightbox dargestellt oder abgespielt.

  2. Video in einem neuen Tab hinzufügen

    Wenn das Video nicht in einer Lightbox abgespielt werden soll, sondern in einem neuen Tab auf YouTube, legen Sie für "class" "nonplayable" fest.

    Beispiel:

    <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0" class="nonplayable"><img src="images/play.jpg" alt="Gmail-Video"></a>

  3. Wiedergabeschaltfläche in das Vorschaubild einbinden

    Das Vorschaubild sollte unbedingt eine Wiedergabeschaltfläche enthalten, damit der Nutzer weiß, dass bei einem Klick auf die Anzeige ein Video abgespielt wird. Von Google Ads werden keine Elemente zu Vorschaubildern hinzugefügt, die darauf hindeuten.