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

Mit E‑Mail-Anmerkungen können Sie E‑Mail-Nachrichten auf dem Tab „Werbung“ mit Funktionen wie Bildern, Angeboten und Ablaufdaten anreichern.

Wenn Sie E‑Mails mit Anmerkungen versehen, können Gmail-Nutzer Ihre Angebote direkt in ihrem Posteingang sehen und damit interagieren. Auf dem Tab „Werbung“ können Nutzer auf den mit Anmerkungen versehenen 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 mit Anmerkungen versehen. Weitere Informationen zum E‑Mail-Markup finden Sie im Startleitfaden. Eine Liste der Markup Felder, die Sie in E‑Mail-Anmerkungen 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 „Werbung“ anzuzeigen:

Produktkarussell erstellen
Einzelbildvorschau erstellen
Anmerkung für ein Angebot erstellen
Angebotskarte erstellen

In den folgenden Abschnitten wird erläutert, 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.

Sie können bis zu zehn Bildvorschauen in ein Karussell einfügen. 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 Produkt karussell 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 Properties können Sie entweder einen Wert angeben oder die Property 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. Für 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 „Werbung“ auf das Bild klicken, wird diese URL aufgerufen.
HEADLINE (optional): Eine ein- bis zweizeilige Beschreibung des Angebots, die unter dem Vorschaubild angezeigt wird.
PRICE (optional): Der Preis des Angebots.
PRICE_CURRENCY (Optional): Die Währung des Preises im 3-Buchstaben-Format nach ISO 4217, z. B. USD. Bestimmt das Währungssymbol, das mit dem price angezeigt wird.
DISCOUNT_VALUE (optional): Der Betrag, der vom price abgezogen wird, um einen angepassten Preis anzuzeigen. Der angepasste Preis wird neben dem Originalpreis angezeigt.

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

Verfassen Sie im body-Tag die Nachricht für Ihre E‑Mail.

Einzelbildvorschau erstellen

Anmerkungen mit Einzelbildvorschau zeigen ein Bild, um ein wichtiges Produkt auf dem Tab „Werbung“ in Gmail 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 unseren häufig gestellten Fragen Dokumentation.

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 hinzu, das den Datentyp PromotionCard enthält:

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 Properties können Sie entweder einen Wert angeben oder die Property aus Ihrem Code entfernen.

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 zum Angebot führt, wenn Nutzer auf das image klicken.
HEADLINE (optional): Eine ein- bis zweizeilige Beschreibung des Angebots, die unter dem Vorschaubild angezeigt wird.
PRICE (optional): Der Preis des Angebots.
PRICE_CURRENCY (Optional): Die Währung des Preises im 3-Buchstaben-Format nach ISO 4217, z. B. USD. Bestimmt das Währungssymbol, das mit dem price angezeigt wird.
DISCOUNT_VALUE (optional): Der Betrag, der vom price abgezogen wird, um einen angepassten Preis anzuzeigen. Der angepasste Preis wird neben dem Originalpreis angezeigt.

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

Verfassen Sie im body-Tag die Nachricht für Ihre E‑Mail.

Anmerkung für ein Angebot erstellen

Mit einer Anmerkung für ein Angebot können Sie Ihre E‑Mail hervorheben. Mit dieser Funktion wird Ihrer E‑Mail im Posteingang ein Werbebadge hinzugefügt, in dem wichtige Informationen wie ein Rabattcode oder Angebotsdetails direkt neben der Betreffzeile angezeigt werden.

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

So aktivieren Sie die Anmerkung für ein Angebot:

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

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>

Anmerkung für ein Angebot anpassen: Aktualisieren Sie die Werte im Skript, damit sie zu Ihrem jeweiligen Angebot passen.

Erforderliche Werte:Ersetzen Sie im Beispielcode mindestens eine der folgenden Variablen, um eine Anmerkung für ein Angebot zu erstellen.
- DESCRIPTION: Eine kurze, überzeugende Zusammenfassung Ihres Angebots.
  - Beispiel: „20% Rabatt auf alles“ 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.
Verfassen Sie Ihre E‑Mail-Nachricht: Verfassen Sie im <body>-Tag die Nachricht und gestalten Sie das Layout für Ihre E‑Mail wie gewohnt.
Karte validieren und Vorschau ansehen: Bevor Sie Ihre Kampagne senden, validieren Sie Ihren Code und sehen Sie sich eine Vorschau an, wie Ihre Anmerkung für ein Angebot aussehen wird.

Angebotskarte erstellen

Angebotskarten sind visuelle Zusammenfassungen Ihrer Angebote, die von Gmail generiert werden. Sie können auf dem Tab „Werbung“ und in der E‑Mail selbst angezeigt werden, sodass Ihre Angebote maximale Sichtbarkeit erhalten.

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>

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

Erforderliche Werte :
- DESCRIPTION: Eine kurze, überzeugende Zusammenfassung Ihres Angebots.
  - Beispiel: „20% Rabatt auf alles“ oder „Zwei Produkte zum Preis von einem“.
- Mindestens eine der folgenden URLs:Wir empfehlen, eine URL zur Angebotsseite anzugeben.
  - OFFER_PAGE_URL: Die URL für die Landingpage dieses spezifischen Angebots. Dadurch wird auf der Angebotskarte ein Button „Jetzt kaufen“ (oder ähnlich) erstellt. Wenn diese URL angegeben wird, wird sie bevorzugt verwendet.
  - MERCHANT_HOMEPAGE_URL: Verwenden Sie diese URL nur, wenn keine spezifische Angebotsseite verfügbar ist. Dadurch wird ein Link zu Ihrer Haupt-Homepage erstellt.
Dringend empfohlene Werte :
- 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.
Verfassen Sie Ihre E‑Mail-Nachricht: Verfassen Sie im <body>-Tag die Nachricht und gestalten Sie das Layout für Ihre E‑Mail wie gewohnt.
Karte validieren und Vorschau ansehen: Bevor Sie Ihre Kampagne senden, validieren Sie Ihren Code und sehen Sie sich eine Vorschau an, wie Ihre Anmerkung für ein Angebot aussehen wird.

Nächste Schritte

In der Referenzdokumentation finden Sie Informationen zu den verfügbaren Markup-Feldern für E‑Mails.
Informationen zu 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

Einzelbildvorschau erstellen

JSON-LD

Mikrodaten

Anmerkung für ein Angebot erstellen

JSON-LD

Mikrodaten

Angebotskarte erstellen

JSON-LD

Mikrodaten

Nächste Schritte

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