Diese Seite wurde von der Cloud Translation API übersetzt.

E-Mails auf dem Tab „Werbung“ mit Anmerkungen versehen

Mit E‑Mail-Annotationen werden E‑Mail-Nachrichten auf dem Tab „Werbung“ durch Funktionen wie Bilder, Angebote und Ablaufdaten ansprechender gestaltet.

Wenn Sie E‑Mails mit Anmerkungen versehen, können Gmail-Nutzer Ihre Angebote direkt in ihrem Posteingang sehen und mit ihnen interagieren. Auf dem Tab „Angebote“ können Nutzer auf den annotierten Text oder das Bild klicken, um mehr über das Angebot zu erfahren, ohne die E‑Mail öffnen zu müssen.

Auf dieser Seite wird erläutert, wie Sie E-Mails mit JSON-LD und Mikrodaten annotieren. Weitere Informationen zur E-Mail-Auszeichnung finden Sie im Startleitfaden. Eine Liste der Markupfelder, die Sie in E-Mail-Hinweisen verwenden können, finden Sie in der Referenzdokumentation.

E‑Mail-Anmerkungen erstellen

Sie können E-Mails mit Anmerkungen versehen, um die folgenden Funktionen auf dem Tab „Angebote“ anzuzeigen:

Produktkarussell erstellen
Einzelbildvorschau erstellen
Deal-Vermerk erstellen
Deal-Karte erstellen

In den folgenden Abschnitten wird beschrieben, wie Sie die einzelnen Arten von E-Mail-Anmerkungen erstellen.

Produktkarussell erstellen

In Produktkarussells werden mehrere Bildvorschauen für ein Angebot angezeigt, z. B.:

Eine Werbe-E‑Mail mit einem Karussell mit drei Bildvorschauen von Sockenangeboten.

Ein Karussell kann bis zu 10 Bildvorschauen enthalten. Jedes Bild muss eindeutig sein.

So erstellen Sie ein Produktkarussell:

Erstellen Sie in Ihrer Marketing-E‑Mail-Plattform eine E‑Mail und öffnen Sie den HTML-Editor der E‑Mail.

Fügen Sie im Abschnitt head ein script-Tag hinzu. Fügen Sie für jedes Bild in Ihrem Produktkarussell ein PromotionCard-Objekt hinzu:

JSON-LD

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <script type="application/ld+json">
      [
        // Build the first image preview in your product carousel:
        {
          "@context": "http://schema.org/",
          "@type": "PromotionCard",
          "image": "IMAGE_URL1",
          "url": "PROMO_URL1",

          // Optionally, include the following PromotionCard properties:
          "headline": "HEADLINE1",
          "price": PRICE1,
          "priceCurrency": "PRICE_CURRENCY1",
          "discountValue": DISCOUNT_VALUE1,
          "position": POSITION
        },

        // Build the second image preview in your product carousel:
        {
          "@context": "http://schema.org/",
          "@type": "PromotionCard",
          "image": "IMAGE_URL2",
          "url": "PROMO_URL2",

          // Optionally, include the following PromotionCard properties:
          "headline": "HEADLINE2",
          "price": PRICE2,
          "priceCurrency": "PRICE_CURRENCY2",
          "discountValue": DISCOUNT_VALUE2,
          "position": POSITION
        }

        // To include more image previews, add additional PromotionCard objects.
        // You can include up to 10 image previews in a product carousel.

      ]
    </script>
  </head>

  <body>
    // The message of your email
  </body>
</html>

Mikrodaten

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    // Build the first image preview in your product carousel:
    <div itemscope itemtype="http://schema.org/PromotionCard">
      <meta itemprop="image" content="IMAGE_URL1"/>
      <meta itemprop="url" content="PROMO_URL1"/>

      // Optionally, include the following PromotionCard properties:
      <meta itemprop="headline" content="HEADLINE1"/>
      <meta itemprop="price" content="PRICE1"/>
      <meta itemprop="priceCurrency" content="PRICE_CURRENCY1"/>
      <meta itemprop="discountValue" content="DISCOUNT_VALUE1"/>
      <meta itemprop="position" content="POSITION"/>
    </div>

    // Build the second image preview in your product carousel:
    <div itemscope itemtype="http://schema.org/PromotionCard">
      <meta itemprop="image" content="IMAGE_URL2"/>
      <meta itemprop="url" content="PROMO_URL2"/>

      // Optionally, include the following PromotionCard properties:
      <meta itemprop="headline" content="HEADLINE2"/>
      <meta itemprop="price" content="PRICE2"/>
      <meta itemprop="priceCurrency" content="PRICE_CURRENCY2"/>
      <meta itemprop="discountValue" content="DISCOUNT_VALUE2"/>
      <meta itemprop="position" content="POSITION"/>
    </div>

    // To include more image previews, add additional PromotionCard objects.
    // You can include up to 10 image previews in a product carousel.
  </head>

  <body>
    // The message of your email
  </body>
</html>

Ersetzen Sie für jedes PromotionCard-Objekt die folgenden Werte. Für die optionalen Attribute können Sie entweder einen Wert angeben oder das Attribut aus Ihrem Code entfernen.

IMAGE_URL: Die URL zu Ihrem Bild im PNG- oder JPEG-Format, z. B. https://www.example.com/image.png. Die unterstützten Seitenverhältnisse sind 4:5, 1:1 und 1, 91:1. Bei Produktkarussells muss jedes Bild eine eindeutige URL haben und dasselbe Seitenverhältnis verwenden.
PROMO_URL: Die URL für das Angebot. Wenn Nutzer auf dem Tab „Angebote“ auf das Bild klicken, rufen sie diese URL auf.
HEADLINE (optional): Eine ein- bis zweizeilige Beschreibung des Angebots, die unter dem Vorschaubild angezeigt wird.
PRICE (Optional): Der Preis der Werbeaktion.
PRICE_CURRENCY (optional): Die Währung des Preises im dreistelligen ISO 4217-Format, z. B. USD. Bestimmt das Währungssymbol, das mit dem price angezeigt wird.
DISCOUNT_VALUE (optional): Der Betrag, der von price abgezogen wird, um einen angepassten Preis anzuzeigen. Der angepasste Preis wird neben dem Originalpreis angezeigt.

Wenn beispielsweise discountValue 25, price 100 und priceCurrency USD ist, wird der angepasste Preis als $75 angezeigt.
POSITION (Optional): Die Position der Karte im Karussell.

Schreiben Sie die Nachricht für Ihre E‑Mail in das body-Tag.

Einzelne Bildvorschau erstellen

Bei Anmerkungen für die Vorschau mit nur einem Bild wird ein Bild angezeigt, um ein wichtiges Produkt auf dem Gmail-Tab „Werbung“ zu präsentieren, z. B.:

Eine Werbe-E-Mail mit einem Bild von Schuhen, einem Angebotslogo für 20 % und dem Gutscheincode 20TODAY

Sie können diese Funktion für ein einzelnes Bild verwenden. Alle Empfänger müssen dasselbe Bild und dieselbe Bild-URL erhalten. Weitere Informationen finden Sie in der Dokumentation zu häufig gestellten Fragen.

So erstellen Sie eine Einzelbildvorschau:

Erstellen Sie in Ihrer Marketing-E‑Mail-Plattform eine E‑Mail und öffnen Sie den HTML-Editor der E‑Mail.

Fügen Sie im Abschnitt head ein script-Tag mit dem Datentyp PromotionCard hinzu:

JSON-LD

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <script type="application/ld+json">
      [{
        "@context": "http://schema.org/",
        "@type": "PromotionCard",
        "image": "IMAGE_URL",
        "url": "PROMO_URL",

        // Optionally, include the following PromotionCard properties:
        "headline": "HEADLINE",
        "price": PRICE,
        "priceCurrency": "PRICE_CURRENCY",
        "discountValue": DISCOUNT_VALUE
      }]
    </script>
  </head>

  <body>
    // The message of your email
  </body>
</html>

Mikrodaten

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    // Build the first image preview in your product carousel:
    <div itemscope itemtype="http://schema.org/PromotionCard">
      <meta itemprop="image" content="IMAGE_URL"/>
      <meta itemprop="url" content="PROMO_URL"/>

      // Optionally, include the following PromotionCard properties:
      <meta itemprop="headline" content="HEADLINE"/>
      <meta itemprop="price" content="PRICE"/>
      <meta itemprop="priceCurrency" content="PRICE_CURRENCY"/>
      <meta itemprop="discountValue" content="DISCOUNT_VALUE"/>
    </div>

  </head>

  <body>
    // The message of your email
  </body>
</html>

Ersetzen Sie die folgenden Werte. Für die optionalen Attribute können Sie entweder einen Wert angeben oder das Attribut aus Ihrem Code weglassen.

IMAGE_URL: Die URL für das Vorschaubild im PNG- oder JPEG-Format, z. B. https://www.example.com/image.png. Das unterstützte Seitenverhältnis ist 1,91:1.
PROMO_URL: Die URL, die zur Werbeaktion führt, wenn Nutzer auf die image klicken.
HEADLINE (optional): Eine ein- bis zweizeilige Beschreibung des Angebots, die unter dem Vorschaubild angezeigt wird.
PRICE (Optional): Der Preis der Werbeaktion.
PRICE_CURRENCY (Optional): Die Währung des Preises im dreistelligen ISO 4217-Format, z. B. USD. Bestimmt das Währungssymbol, das mit dem price angezeigt wird.
DISCOUNT_VALUE (optional): Der Betrag, der von price abgezogen wird, um einen angepassten Preis anzuzeigen. Der angepasste Preis wird neben dem Originalpreis angezeigt.

Wenn beispielsweise discountValue 25, price 100 und priceCurrency USD ist, wird der angepasste Preis als $75 angezeigt.

Schreiben Sie die Nachricht für Ihre E‑Mail in das body-Tag.

Deal-Vermerk erstellen

Mit einer Deal-Anmerkung können Sie Ihre E‑Mail hervorheben. Mit dieser Funktion wird direkt in Ihrer E-Mail im Posteingang ein Werbebadge mit wichtigen Informationen wie einem Rabattcode oder Angebotsdetails neben der Betreffzeile angezeigt.

Eine Werbe-E-Mail mit einem Angebotslogo für 20% Rabatt und dem Gutscheincode 20TODAY.

So aktivieren Sie die Angebotsanmerkung:

Schema in den HTML-Code Ihrer E-Mail einfügen: Öffnen Sie in Ihrer Marketing-E-Mail-Plattform den HTML-Editor für Ihre Kampagne. Fügen Sie im Abschnitt head ein script-Tag mit dem Datentyp DiscountOffer mit der folgenden Struktur hinzu:

JSON-LD

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <script type="application/ld+json">
      [{
        "@context": "http://schema.org/",
        "@type": "DiscountOffer",
        "description": "DESCRIPTION",
        "discountCode": "DISCOUNT_CODE",
        "availabilityStarts": "START_DATE_TIME",
        "availabilityEnds": "END_DATE_TIME"
      }]
    </script>
  </head>

  <body>
    // The message of your email
  </body>
</html>

Mikrodaten

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <div itemscope itemtype="http://schema.org/DiscountOffer">
      <meta itemprop="description" content="DESCRIPTION"/>
      <meta itemprop="discountCode" content="DISCOUNT_CODE"/>
      <meta itemprop="availabilityStarts" content="START_DATE_TIME"/>
      <meta itemprop="availabilityEnds" content="END_DATE_TIME"/>
    </div>
  </head>

  <body>
    // The message of your email.
  </body>
</html>

Eigenschaften der Angebotsanmerkung anpassen: Aktualisieren Sie die Werte im Skript, damit sie zu Ihrem Angebot passen.

Erforderliche Properties:Sie müssen mindestens eine der folgenden Properties angeben, um eine Angebotsanmerkung zu generieren.
- DESCRIPTION: Eine kurze, überzeugende Zusammenfassung Ihres Angebots.
  - Beispiele: „20% Rabatt auf alle Artikel“ oder „Zwei Produkte zum Preis von einem“.
- DISCOUNT_CODE: Der Gutscheincode, den ein Nutzer beim Bezahlen eingeben muss.
  - Beispiel: 20TODAY.
- END_DATE_TIME: Das Enddatum und die Endzeit des Angebots im ISO 8601-Format.
  - Beispiel: 2025-09-23T18:44:37-07:00.
Dringend empfohlene Properties:
- START_DATE_TIME: Das Startdatum und die Startzeit des Angebots im ISO 8601-Format.
  - Beispiel: 2025-08-24T18:44:37-07:00.
E-Mail-Nachricht verfassen: Schreiben Sie die Nachricht im <body>-Tag und gestalten Sie das Layout Ihrer E-Mail wie gewohnt.
Karte validieren und in der Vorschau ansehen: Bevor Sie Ihre Kampagne senden, sollten Sie Ihren Code validieren und sich eine Vorschau der Angebotsanmerkung ansehen.

Deal-Karte erstellen

Angebotskarten sind visuelle Zusammenfassungen Ihrer Werbeaktionen, die von Gmail generiert werden. Sie können auf dem Tab „Angebote“ und in der E-Mail selbst erscheinen und so die Sichtbarkeit Ihrer Angebote maximieren.

Eine Werbe-E-Mail, in der ein Angebot für ein Auto mit 25% Rabatt und der Gutscheincode MAY2024 vorgestellt werden.

So aktivieren Sie Angebotskarten:

JSON-LD

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <script type="application/ld+json">
      [{
        "@context": "http://schema.org/",
        "@type": "DiscountOffer",
        "description": "DESCRIPTION",
        "discountCode": "DISCOUNT_CODE",
        "availabilityStarts": "START_DATE_TIME",
        "availabilityEnds": "END_DATE_TIME"
        "offerPageUrl": "OFFER_PAGE_URL"
        "merchantHomepageUrl": "MERCHANT_HOMEPAGE_URL"
      }]
    </script>
  </head>

  <body>
    // The message of your email
  </body>
</html>

Mikrodaten

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <div itemscope itemtype="http://schema.org/DiscountOffer">
      <meta itemprop="description" content="DESCRIPTION"/>
      <meta itemprop="discountCode" content="DISCOUNT_CODE"/>
      <meta itemprop="availabilityStarts" content="START_DATE_TIME"/>
      <meta itemprop="availabilityEnds" content="END_DATE_TIME"/>
      <meta itemprop="offerpageurl" content="OFFER_PAGE_URL"/>
      <meta itemprop="merchantHomepageUrl" content="MERCHANT_HOMEPAGE_URL"/>
    </div>
  </head>

  <body>
    // The message of your email.
  </body>
</html>

Eigenschaften der Angebotskarte anpassen: Aktualisieren Sie die Werte im Skript, damit sie zu Ihrem Angebot passen.

Erforderliche Attribute:
- DESCRIPTION: Eine kurze, überzeugende Zusammenfassung Ihres Angebots.
  - Beispiele: „20% Rabatt auf alle Artikel“ oder „Zwei Produkte zum Preis von einem“.
- Mindestens eine der folgenden URLs:Wir empfehlen, eine Angebotsseite anzugeben.
  - OFFER_PAGE_URL: Die URL der Landingpage für dieses spezielle Angebot. Dadurch wird auf der Angebotskarte die Schaltfläche „Jetzt kaufen“ (oder eine ähnliche Schaltfläche) erstellt. Wenn diese URL angegeben wird, bevorzugen wir sie.
  - MERCHANT_HOMEPAGE_URL: Verwenden Sie diese Option nur, wenn keine bestimmte Angebotsseite verfügbar ist. Dadurch wird ein Link zu Ihrer Hauptstartseite erstellt.
Dringend empfohlene Properties:
- DISCOUNT_CODE: Der Gutscheincode, den ein Nutzer beim Bezahlen eingeben muss.
  - Beispiel: 20TODAY.
- START_DATE_TIME: Das Startdatum und die Startzeit des Angebots im ISO 8601-Format.
  - Beispiel: 2025-08-24T18:44:37-07:00.
- END_DATE_TIME: Das Enddatum und die Endzeit des Angebots im ISO 8601-Format.
  - Beispiel: 2025-09-23T18:44:37-07:00.
E-Mail-Nachricht verfassen: Schreiben Sie die Nachricht im <body>-Tag und gestalten Sie das Layout Ihrer E-Mail wie gewohnt.
Karte validieren und in der Vorschau ansehen: Bevor Sie Ihre Kampagne senden, sollten Sie Ihren Code validieren und sich eine Vorschau der Angebotsanmerkung ansehen.

Nächste Schritte

In der Referenzdokumentation finden Sie Informationen zu den verfügbaren E-Mail-Markierungsfeldern.
Best Practices für E-Mail-Anmerkungen

E-Mails auf dem Tab „Werbung“ mit Anmerkungen versehen Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

E‑Mail-Anmerkungen erstellen

Produktkarussell erstellen

JSON-LD

Mikrodaten

Einzelne Bildvorschau erstellen

JSON-LD

Mikrodaten

Deal-Vermerk erstellen

JSON-LD

Mikrodaten

Deal-Karte erstellen

JSON-LD

Mikrodaten

Nächste Schritte

E-Mails auf dem Tab „Werbung“ mit Anmerkungen versehen