Annota le email nella scheda Promozioni

Le annotazioni email danno vita ai messaggi email della scheda Promozioni, con funzionalità come immagini, offerte e date di scadenza.

Quando annota le email, gli utenti di Gmail visualizzano e interagiscono con le tue promozioni direttamente dalla loro posta in arrivo. Nella scheda Promozioni, gli utenti possono fare clic sull'immagine o sul testo annotato per scoprire di più sulla promozione, senza dover aprire l'email.

Questa pagina spiega come annotare le email utilizzando JSON-LD e i microdati. Per scoprire di più sul markup delle email, consulta la Guida introduttiva. Per un elenco dei campi di markup che puoi utilizzare nelle annotazioni email, consulta la documentazione di riferimento.

Crea annotazioni email

Puoi aggiungere annotazioni alle email per visualizzare le seguenti funzionalità nella scheda Promozioni:

Le sezioni seguenti spiegano come creare ciascun tipo di annotazione email.

Creare un'annotazione per i deal

Le annotazioni relative alle promozioni mostrano dettagli testuali relativi a una promozione, ad esempio un codice promozionale o una data di scadenza.

Per creare un'annotazione per un deal:

  1. Nella tua piattaforma di email di marketing, crea un'email e apri l'editor HTML dell'email.

  2. Nella sezione head, aggiungi un tag script che includa il tipo di dati DiscountOffer:

    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>

    Microdati

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

    Sostituisci i seguenti valori. Tutte le proprietà sono facoltative. Per ogni proprietà, puoi includere un valore oppure omettere la proprietà dal codice.

    • DESCRIPTION (Facoltativo) Il testo visualizzato con il badge dell'offerta, ad esempio 20% off o Free shipping.
    • DISCOUNT_CODE (Facoltativo): lo sconto o il codice promozionale dell'offerta, ad esempio 20TODAY.
    • START_DATE_TIME (Facoltativo): la data e l'ora di inizio dell'offerta nel formato ISO 8601, ad esempio 2023-09-25T18:44:37-07:00.
    • END_DATE_TIME (Facoltativo): la data e l'ora di fine della promozione in formato ISO 8601, ad esempio 2023-10-25T18:44:37-07:00.

  3. Nel tag body, scrivi il messaggio per l'email.

I caroselli di prodotti mostrano più anteprime di immagini per una promozione, come la seguente:

Un&#39;email promozionale che mostra un carosello di tre anteprime di immagini delle offerte di calze.

Puoi includere fino a 10 anteprime di immagini in un carosello, ciascuna delle quali deve essere univoca.

Per creare un carosello di prodotti:

  1. Nella tua piattaforma di email di marketing, crea un'email e apri l'editor HTML dell'email.

  2. Nella sezione head, aggiungi un tag script. Per ogni immagine nel carosello di prodotti, aggiungi un oggetto PromotionCard:

    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>

    Microdati

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

    Per ogni oggetto PromotionCard, sostituisci i seguenti valori. Per le proprietà facoltative, puoi includere un valore o omettere la proprietà dal codice.

    • IMAGE_URL: l'URL dell'immagine in formato PNG o JPEG, ad esempio https://www.example.com/image.png. Le proporzioni supportate sono 4:5, 1:1 e 1, 91:1. Per i caroselli di prodotti, ogni immagine deve avere un URL univoco e utilizzare le stesse proporzioni.
    • PROMO_URL: l'URL della promozione. Quando gli utenti fanno clic sull'immagine nella scheda Promozioni, visitano questo URL.
    • HEADLINE (Facoltativo): una descrizione da 1 a 2 righe della promozione visualizzata sotto l'immagine di anteprima.
    • PRICE (facoltativo): il prezzo della promozione.
    • PRICE_CURRENCY (Facoltativo): la valuta del prezzo nel formato ISO 4217 a tre lettere, ad esempio USD. Determina il simbolo di valuta visualizzato con price.

    • DISCOUNT_VALUE (Facoltativo): l'importo sottratto da price per mostrare un prezzo adeguato. Il prezzo modificato viene visualizzato accanto al prezzo originale.

      Ad esempio, se discountValue è 25, price è 100 e priceCurrency è USD, il prezzo adeguato viene visualizzato come $75.

    • (Facoltativo) POSITION: la posizione della scheda nel carosello.

  3. Nel tag body, scrivi il messaggio per l'email.

Passaggi successivi