Diese Seite wurde von der Cloud Translation API übersetzt.

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

Mit E-Mail-Hinweisen können Sie E-Mails auf dem Tab "Werbung" mit Bildern, Angeboten und Ablaufdaten noch lebendiger gestalten.

Wenn Sie E-Mails mit Anmerkungen versehen, sehen Gmail-Nutzer Ihre Werbung direkt in ihrem Posteingang und können mit ihnen interagieren. Auf dem Tab „Werbung“ können Nutzer auf den mit Anmerkungen versehenen Text oder ein 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 mithilfe von 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-Annotationen verwenden können, finden Sie in der Referenzdokumentation.

E-Mail-Anmerkungen erstellen

Sie können E-Mails auf dem Tab „Werbung“ so kennzeichnen, dass die folgenden Funktionen angezeigt werden:

Hinweise zu Deals
Produktkarussells

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

Anmerkung für Deals erstellen

Anmerkungen zu Angeboten enthalten textbasierte Details zu einem Angebot, z. B. einen Gutscheincode oder ein Ablaufdatum.

So erstellen Sie eine Anmerkung für einen Deal:

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 Eigenschaften sind optional. Sie können für jedes Attribut entweder einen Wert angeben oder das Attribut aus dem Code weglassen.

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 des Angebotsbeginns im ISO 8601-Format, z. B. 2023-09-25T18:44:37-07:00.
END_DATE_TIME (optional): Enddatum und -zeit der Werbeaktion im ISO 8601-Format, z. B. 2023-10-25T18:44:37-07:00.

Geben Sie im Tag body die Nachricht für Ihre E-Mail ein.

Produktkarussell erstellen

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

Eine Werbe-E-Mail, in der ein Karussell mit drei Vorschaubildern von Sockenangebote angezeigt wird.

Ein Karussell kann bis zu zehn Bildvorschauen enthalten, wobei jedes Bild eindeutig sein muss.

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 im Code weglassen.

IMAGE_URL: Die URL zu Ihrem Bild im PNG- oder JPEG-Format, z. B. https://www.example.com/image.png. Unterstützte Seitenverhältnisse sind 4:5, 1:1 und 1, 91:1. Bei Produktkarussells muss jedes Bild eine eindeutige URL und dasselbe Seitenverhältnis haben.
PROMO_URL: Die URL für das Angebot. Wenn Nutzer auf dem Tab „Werbung“ auf das Bild klicken, gelangen sie zu dieser URL.
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 aus drei Buchstaben bestehenden ISO 4217-Format, z. B. USD. Legt das mit price angezeigte Währungssymbol fest.
DISCOUNT_VALUE (optional): Der Betrag, der von price abgezogen wird, um einen angepassten Preis anzuzeigen. Der angepasste Preis wird neben dem Originalpreis angezeigt.

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

Geben Sie im Tag body die Nachricht für Ihre E-Mail ein.

Nächste Schritte

Informationen zu den verfügbaren Feldern für das E-Mail-Markup finden Sie in der Referenzdokumentation.
Best Practices für E-Mail-Anmerkungen