Questa pagina è stata tradotta dall'API Cloud Translation.

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 loro 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 scoprire di più sul markup delle email, consulta la guida Guida introduttiva. Per un elenco dei campi di markup che puoi utilizzare nelle annotazioni email, consulta la documentazione di riferimento.

Creare annotazioni email

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

Annotazioni relative ai deal
Caroselli di prodotti
Anteprima di una singola immagine

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

Creare un'annotazione del deal

Le annotazioni delle offerte mostrano dettagli basati su testo relativi a una promozione, ad esempio un codice promozionale o una data di scadenza.

Per creare un'annotazione relativa a un accordo:

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 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 o 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): il codice sconto o promozionale per l'offerta, ad esempio 20TODAY.
START_DATE_TIME (facoltativo): la data e l'ora di inizio dell'offerta in 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.

Nel tag body, scrivi il messaggio per la tua email.

Creare un carosello di prodotti

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

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 unica.

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 dei 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 lo stesso formato.
PROMO_URL: l'URL della promozione. Quando gli utenti fanno clic sull'immagine dalla scheda Promozioni, visitano questo URL.
HEADLINE (facoltativo): una descrizione di 1-2 righe della promozione visualizzata sotto l'immagine di anteprima.
PRICE (facoltativo): il prezzo della promozione.
PRICE_CURRENCY (facoltativo): la valuta del prezzo in 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 visualizzare un prezzo aggiustato. Il prezzo modificato viene visualizzato accanto al prezzo originale.

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

Nel tag body, scrivi il messaggio per la tua 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, il badge dell'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 immagine. Per saperne di più, consulta la nostra documentazione sulle domande frequenti.

Per creare un'anteprima di una singola immagine:

Nella tua 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: quando gli utenti fanno clic su image, l'URL che indirizza alla promozione.
HEADLINE (facoltativo): una descrizione di 1-2 righe della promozione visualizzata sotto l'immagine di anteprima.
PRICE (facoltativo): il prezzo della promozione.
PRICE_CURRENCY (facoltativo): la valuta del prezzo in 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 visualizzare un prezzo aggiustato. Il prezzo modificato viene visualizzato accanto al prezzo originale.

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

Nel tag body, scrivi il messaggio per la tua email.

Passaggi successivi

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

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

Creare annotazioni email

Creare un'annotazione del deal

JSON-LD

Microdati

Creare un carosello di prodotti

JSON-LD

Microdati

Creare un'anteprima di una singola immagine

JSON-LD

Microdati

Passaggi successivi

Annota le email nella scheda Promozioni