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

Mit E-Mail-Hinweisen erwecken Sie die E-Mail-Nachrichten auf dem Tab „Werbung“ zum Leben. Sie enthalten Funktionen wie Bilder, Angebote und Ablaufdatum.

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

Auf dieser Seite wird erläutert, wie E-Mails mithilfe von JSON-LD und Mikrodaten mit Anmerkungen versehen werden. 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 mit Anmerkungen versehen, um die folgenden Funktionen auf dem Tab „Werbung“ anzuzeigen:

In den folgenden Abschnitten wird erläutert, wie die verschiedenen Arten von E-Mail-Anmerkungen erstellt werden.

Dealanmerkung erstellen

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

So erstellen Sie eine Dealanmerkung:

  1. Erstellen Sie auf Ihrer Marketing-E-Mail-Plattform eine E-Mail und öffnen Sie den HTML-Editor der E-Mail.
  2. Fügen Sie im Abschnitt head ein script-Tag hinzu, das den Datentyp DiscountOffer 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>
    

    Ersetzen Sie die folgenden Werte. Alle Attribute sind optional. Sie können für jedes Attribut entweder einen Wert angeben oder das Attribut im 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): Datum und 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.
  3. Geben Sie im Tag body die Nachricht für Ihre E-Mail ein.

In Produktkarussells werden mehrere Bildvorschauen für eine Werbeaktion angezeigt. Hier einige Beispiele:

Eine Werbe-E-Mail mit einem Karussell mit drei Vorschaubildern von Sockendeals.

Sie können bis zu zehn Bildvorschauen in ein Karussell einfügen, wobei jedes Bild eindeutig sein muss.

So erstellen Sie ein Produktkarussell:

  1. Erstellen Sie auf Ihrer Marketing-E-Mail-Plattform eine E-Mail und öffnen Sie den HTML-Editor der E-Mail.
  2. 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. Als optionale Attribute können Sie entweder einen Wert angeben oder die Eigenschaft in Ihrem Code weglassen.

    • 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 und dasselbe Seitenverhältnis haben.
    • PROMO_URL: Die URL des Angebots. Wenn Nutzer auf dem Tab „Werbung“ auf das Bild klicken, gelangen sie zu dieser URL.
    • HEADLINE (Optional): Eine ein- bis zweizeilige Beschreibung der Werbeaktion, 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 price angezeigt wird.
    • DISCOUNT_VALUE (optional): Der Betrag, der von price subtrahiert wird, um einen angepassten Preis anzuzeigen. Der angepasste Preis wird neben dem ursprünglichen Preis angezeigt.

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

    • POSITION (optional): Die Position der Karte im Karussell.

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

Nächste Schritte