Annota le email nella scheda Promozioni

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

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

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

Creare annotazioni delle email

Puoi annotare le email per visualizzare le seguenti funzionalità nella scheda Promozioni:

Creare un carosello di prodotti
Creare un'anteprima di una singola immagine
Creare un'annotazione dell'offerta
Creare una scheda dell'offerta

Le sezioni seguenti spiegano come creare ogni tipo di annotazione delle email.

Creare un carosello di prodotti

I caroselli di prodotti mostrano più anteprime di immagini per una promozione, ad esempio:

Un'email promozionale che mostra un carosello di tre anteprime di immagini di offerte di calzini.

Puoi includere fino a 10 anteprime di immagini in un carosello e ogni immagine deve essere univoca.

Per creare un carosello di prodotti:

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

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

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, 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 dalla scheda Promozioni, visitano questo URL.
HEADLINE (facoltativo): una descrizione della promozione di 1-2 righe che viene visualizzata sotto l'immagine di anteprima.
PRICE (facoltativo): il prezzo della promozione.
PRICE_CURRENCY (facoltativo): la valuta del prezzo in formato ISO 4217 da 3 lettere, ad esempio USD. Determina il simbolo della valuta visualizzato con il price.
DISCOUNT_VALUE (facoltativo): l'importo sottratto dal price per visualizzare un prezzo modificato. Il prezzo modificato viene visualizzato accanto al prezzo originale.

Ad esempio, se il discountValue è 25, il price è 100 e il priceCurrency è USD, il prezzo modificato viene visualizzato come $75.
POSITION (facoltativo): la posizione della scheda nel carosello.

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

Creare un'anteprima di una singola immagine

Le annotazioni di anteprima di una singola immagine mostrano un'immagine per mettere in evidenza un prodotto importante nella scheda Promozioni di Gmail, ad esempio:

Un'email promozionale che mostra un'immagine di scarpe, un badge offerta del 20% e il codice promozionale 20TODAY

Puoi utilizzare questa funzionalità per una singola immagine. Tutti i destinatari devono ricevere la stessa immagine e lo stesso URL dell'immagine. Per saperne di più, consulta la documentazione delle domande frequenti.

Per creare un'anteprima di una singola immagine:

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

Nella sezione head, aggiungi un tag script che includa il tipo di dati PromotionCard:

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>

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

Sostituisci i seguenti valori. Per le proprietà facoltative, puoi includere un valore o omettere la proprietà dal codice.

IMAGE_URL: l'URL dell'immagine di anteprima in formato PNG o JPEG, ad esempio https://www.example.com/image.png. Le proporzioni supportate sono 1.91:1.
PROMO_URL: l'URL che indirizza alla promozione quando gli utenti fanno clic sull'image.
HEADLINE (facoltativo): una descrizione della promozione di 1-2 righe che viene visualizzata sotto l'immagine di anteprima.
PRICE (facoltativo): il prezzo della promozione.
PRICE_CURRENCY (facoltativo): la valuta del prezzo in formato ISO 4217 da 3 lettere, ad esempio USD. Determina il simbolo della valuta visualizzato con il price.
DISCOUNT_VALUE (facoltativo): l'importo sottratto dal price per visualizzare un prezzo modificato. Il prezzo modificato viene visualizzato accanto al prezzo originale.

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

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

Creare un'annotazione dell'offerta

Fai risaltare la tua email con un'annotazione dell'offerta. Questa funzionalità aggiunge un badge promozionale direttamente all'email nella posta in arrivo, mettendo in evidenza le informazioni chiave, come un codice sconto o i dettagli dell'offerta, accanto all'oggetto.

Un'email promozionale che mostra in anteprima un badge offerta con il 20% di sconto e il codice promozionale 20TODAY.

Per attivare l'annotazione dell'offerta:

Aggiungi lo schema all'HTML dell'email: nella piattaforma di email marketing, apri l'editor HTML della campagna. Nella sezione head, aggiungi un script tag che includa il tipo di dati DiscountOffer con la seguente struttura:

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>

Personalizza le proprietà dell'annotazione dell'offerta: aggiorna i valori nello script in modo che corrispondano alla promozione specifica.

Valori obbligatori: nel codice campione, sostituisci almeno una delle seguenti variabili per generare un'annotazione dell'offerta.
- DESCRIPTION: un riepilogo breve e accattivante dell'offerta.
  - Esempio: "20% di sconto su tutto il sito" o "Prendi 2 e paghi 1".
- DISCOUNT_CODE: il codice promozionale che un utente deve applicare al momento del pagamento.
  - Esempio: 20TODAY.
- END_DATE_TIME: la data e l'ora di fine della promozione in formato ISO 8601.
  - Esempio: 2025-09-23T18:44:37-07:00.
Proprietà altamente consigliate:
- START_DATE_TIME: la data e l'ora di inizio della promozione in formato ISO 8601.
  - Esempio: 2025-08-24T18:44:37-07:00.
Scrivi il messaggio email: nel tag <body>, scrivi il messaggio e progetta il layout dell'email come faresti normalmente.
Convalida e visualizza l'anteprima della scheda: prima di inviare la campagna, convalida il codice e visualizza un' anteprima dell' aspetto dell'annotazione dell'offerta.

Creare una scheda dell'offerta

Le schede dell'offerta sono riepiloghi visivi delle tue promozioni generati da Gmail. Possono essere visualizzate nella scheda Promozioni e all'interno dell'email stessa, offrendo la massima visibilità alle tue offerte.

Un'email promozionale che mostra in anteprima un'auto in offerta con uno sconto del 25% e il codice promozionale MAY2024.

Per attivare le schede dell'offerta:

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>

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"/>
      <meta itemprop="offerpageurl" content="OFFER_PAGE_URL"/>
      <meta itemprop="merchantHomepageUrl" content="MERCHANT_HOMEPAGE_URL"/>
    </div>
  </head>

  <body>
    // The message of your email.
  </body>
</html>

Personalizza le proprietà della scheda dell'offerta: aggiorna i valori nello script in modo che corrispondano alla promozione specifica.

Valori obbligatori:
- DESCRIPTION: un riepilogo breve e accattivante dell'offerta.
  - Esempio: "20% di sconto su tutto il sito" o "Prendi 2 e paghi 1".
- Almeno uno dei seguenti URL: ti consigliamo di fornire l'URL di una pagina dell'offerta.
  - OFFER_PAGE_URL: l'URL della pagina di destinazione di questa offerta specifica. Verrà creato un pulsante "Acquista ora" (o simile) sulla scheda dell'offerta. Se viene fornito, daremo la preferenza all'URL della pagina dell'offerta.
  - MERCHANT_HOMEPAGE_URL: utilizza questo URL solo se non è disponibile una pagina dell'offerta specifica. Questo URL rimanderà alla tua home page principale.
Valori altamente consigliati:
- DISCOUNT_CODE: il codice promozionale che un utente deve applicare al momento del pagamento.
  - Esempio: 20TODAY.
- START_DATE_TIME: la data e l'ora di inizio della promozione in formato ISO 8601.
  - Esempio: 2025-08-24T18:44:37-07:00.
- END_DATE_TIME: la data e l'ora di fine della promozione in formato ISO 8601.
  - Esempio: 2025-09-23T18:44:37-07:00.
Scrivi il messaggio email: nel tag <body>, scrivi il messaggio e progetta il layout dell'email come faresti normalmente.
Convalida e visualizza l'anteprima della scheda: prima di inviare la campagna, convalida il codice e visualizza un' anteprima dell' aspetto dell'annotazione dell'offerta.

Passaggi successivi

Consulta la documentazione di riferimento per scoprire i campi di markup delle email disponibili.
Scopri le best practice per le email annotazioni.

Annota le email nella scheda Promozioni Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Creare annotazioni delle email

Creare un carosello di prodotti

JSON-LD

Microdati

Creare un'anteprima di una singola immagine

JSON-LD

Microdati

Creare un'annotazione dell'offerta

JSON-LD

Microdati

Creare una scheda dell'offerta

JSON-LD

Microdati

Passaggi successivi

Annota le email nella scheda Promozioni