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:

Hinweise zu Angeboten
Produktkarussells
Vorschau einzelner Bilder

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

Deal-Vermerk erstellen

In Angebotsanmerkungen werden textbasierte Details zu einem Angebot angezeigt, z. B. ein Gutscheincode oder ein Ablaufdatum.

So erstellen Sie eine Angebotsanmerkung:

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 DiscountOffer 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>

Ersetzen Sie die folgenden Werte. Alle Attribute sind optional. Für jede Property können Sie entweder einen Wert angeben oder die Property aus Ihrem Code entfernen.

DESCRIPTION (optional): Der Text, der mit dem Angebotslogo angezeigt wird, z. B. 20% off oder Free shipping.
DISCOUNT_CODE (Optional): Der Rabatt- oder Gutscheincode für das Angebot, z. B. 20TODAY.
START_DATE_TIME (Optional): Das Datum und die Uhrzeit, zu der das Angebot beginnt, im ISO 8601-Format, z. B. 2023-09-25T18:44:37-07:00.
END_DATE_TIME (optional): Das Enddatum und die Endzeit des Angebots im ISO 8601-Format, z. B. 2023-10-25T18:44:37-07:00.

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

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, wird diese URL aufgerufen.
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 vom 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.

Einzelbildvorschau 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 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 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 vom 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.

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

Deal-Vermerk erstellen

JSON-LD

Mikrodaten

Produktkarussell erstellen

JSON-LD

Mikrodaten

Einzelbildvorschau erstellen

JSON-LD

Mikrodaten

Nächste Schritte

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