Cette page a été traduite par l'API Cloud Translation.

Annoter les e-mails dans l'onglet "Promotions"

Les annotations d'e-mails donnent vie aux e-mails de l'onglet "Promotions" grâce à des fonctionnalités telles que les images, les offres et les dates d'expiration.

Lorsque vous annotez vos e-mails, les utilisateurs Gmail voient vos promotions et interagissent avec elles directement depuis leur boîte de réception. Dans l'onglet "Promotions", les utilisateurs peuvent cliquer sur le du texte ou de l'image annotés pour en savoir plus sur la promotion, sans que vous ayez à ouvrir l’e-mail.

Cette page explique comment annoter des e-mails à l'aide de JSON-LD et microdonnées. À Pour en savoir plus sur le balisage des e-mails, consultez Guide de démarrage. Pour une liste de balisage que vous pouvez utiliser dans les annotations dans les e-mails, consultez la documentation de référence.

Créer des annotations dans les e-mails

Vous pouvez annoter des e-mails pour afficher les fonctionnalités suivantes dans l'onglet "Promotions" :

Annotations de l'accord
Carrousels de produits

Les sections suivantes expliquent comment créer chaque type d'annotation d'e-mail.

Créer une annotation d'accord

Les annotations d'offre spéciale affichent des détails textuels sur une promotion, tels que un code promotionnel ou une date d'expiration.

Pour créer une annotation d'accord, procédez comme suit:

Dans votre plate-forme de messagerie marketing, créez un e-mail et ouvrez son code HTML. éditeur.

Dans la section head, ajoutez une balise script qui inclut le type de données. 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>

Microdonnées

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

Remplacez les valeurs suivantes. Toutes les propriétés sont facultatives. Pour chaque vous pouvez soit inclure une valeur, soit omettre la propriété dans votre du code source.

DESCRIPTION (facultatif): texte qui s'affiche avec l'élément un badge d'offre spéciale tel que 20% off ou Free shipping.
DISCOUNT_CODE (facultatif): code de remise ou promotionnel pour l'offre, par exemple 20TODAY.
START_DATE_TIME (facultatif): date et heure auxquelles l'élément l'offre commence dans ISO 8601 (par exemple, 2023-09-25T18:44:37-07:00).
END_DATE_TIME (facultatif): date et heure de fin de la promotion dans ISO 8601 (par exemple, 2023-10-25T18:44:37-07:00).

Dans la balise body, rédigez le message pour votre adresse e-mail.

Créer un carrousel de produits

Les carrousels de produits affichent plusieurs aperçus d'images pour une promotion, par exemple suivantes:

E-mail promotionnel affichant un carrousel de trois images d'aperçu d'offres spéciales.

Vous pouvez inclure jusqu'à 10 aperçus d'images dans un carrousel, chaque image uniques.

Pour créer un carrousel de produits:

Dans votre plate-forme de messagerie marketing, créez un e-mail et ouvrez son code HTML. éditeur.

Dans la section head, ajoutez une balise script. Pour chaque image de votre produit carrousel, ajoutez un élément PromotionCard objet:

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>

Microdonnées

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

Pour chaque objet PromotionCard, remplacez les valeurs suivantes. Pour le des propriétés facultatives, vous pouvez soit inclure une valeur, soit omettre la propriété de votre code.

IMAGE_URL: URL de votre image dans au format PNG ou JPEG, par exemple https://www.example.com/image.png. La formats pris en charge sont 4:5, 1:1 et 1.91:1. Pour carrousels de produits, chaque image doit avoir une URL unique et utiliser la même format.
PROMO_URL: URL de la promotion. Quand ? les utilisateurs cliquent sur l'image dans l'onglet "Promotions", ils accèdent à cette URL.
HEADLINE (facultatif): description en une ou deux lignes de la promotion qui s'affiche sous l'image d'aperçu.
PRICE (facultatif): prix de la promotion.
PRICE_CURRENCY (facultatif): devise de la prix en trois lettres ISO 4217 (par exemple, USD). Détermine le symbole de la devise affiché à l'aide du bouton price
DISCOUNT_VALUE (facultatif): montant soustrait de price pour afficher un prix ajusté. La valeur ajustée le prix est affiché à côté du prix d'origine.

Par exemple, si discountValue est 25, price est 100, et priceCurrency est de USD, le prix ajusté est de $75.
POSITION (facultatif): position de la carte. dans le carrousel.

Dans la balise body, rédigez le message pour votre adresse e-mail.

Étapes suivantes

Consultez la documentation de référence pour en savoir plus les champs de balisage d'e-mail disponibles.
En savoir plus sur les bonnes pratiques concernant les e-mails .