Esta página foi traduzida pela API Cloud Translation.

Fazer anotações em e-mails na guia "Promoções"

As anotações de e-mail dão vida às mensagens na guia "Promoções" com recursos como imagens, ofertas e datas de validade.

Quando você anota e-mails, os usuários do Gmail podem ver e interagir com suas promoções diretamente na caixa de entrada. Na guia "Promoções", os usuários podem clicar no texto ou na imagem anotada para saber mais sobre a promoção sem precisar abrir o e-mail.

Esta página explica como anotar e-mails usando JSON-LD e microdados. Para saber mais sobre a marcação de e-mails, consulte o guia Como começar. Para conferir uma lista de campos de marcação que podem ser usados em anotações de e-mail, acesse a documentação de referência.

Criar anotações de e-mail

É possível anotar e-mails para mostrar os seguintes recursos na guia "Promoções":

Anotações de transações
Carrosséis de produtos
Prévia de imagem única

As seções a seguir explicam como criar cada tipo de anotação de e-mail.

Criar uma anotação de transação

As anotações de oferta mostram detalhes baseados em texto sobre uma promoção, como um código promocional ou uma data de validade.

Para criar uma anotação de negócio:

Na plataforma de e-mail marketing, crie uma mensagem e abra o editor HTML.

Na seção head, adicione uma tag script que inclua o tipo de dados 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>

Microdados

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

Substitua os seguintes valores: Todas as propriedades são opcionais. Para cada propriedade, é possível incluir um valor ou omitir a propriedade do seu código.

DESCRIPTION (opcional): o texto que aparece com o selo da oferta, como 20% off ou Free shipping.
DISCOUNT_CODE (opcional): o código de desconto ou promoção da oferta, como 20TODAY.
START_DATE_TIME (opcional): a data e a hora em que a oferta começa no formato ISO 8601, como 2023-09-25T18:44:37-07:00.
END_DATE_TIME (opcional): a data e a hora de término da promoção no formato ISO 8601, como 2023-10-25T18:44:37-07:00.

Na tag body, escreva a mensagem do e-mail.

Criar um carrossel de produtos

Os carrosséis de produtos mostram várias prévias de imagens para uma promoção, como as seguintes:

Um e-mail promocional que mostra um carrossel com três prévias de imagens de ofertas de meias.

É possível incluir até 10 prévias de imagens em um carrossel, e cada imagem precisa ser única.

Para criar um carrossel de produtos:

Na plataforma de e-mail marketing, crie uma mensagem e abra o editor HTML.

Na seção head, adicione uma tag script. Para cada imagem no carrossel de produtos, adicione um objeto 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>

Microdados

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

Para cada objeto PromotionCard, substitua os seguintes valores. Para as propriedades opcionais, você pode incluir um valor ou omitir a propriedade do código.

IMAGE_URL: o URL da sua imagem em formato PNG ou JPEG, como https://www.example.com/image.png. As proporções aceitas são 4:5, 1:1 e 1, 91:1. Para carrosséis de produtos, cada imagem precisa ter um URL exclusivo e usar a mesma proporção.
PROMO_URL: o URL da promoção. Quando os usuários clicam na imagem na guia "Promoções", eles acessam esse URL.
HEADLINE (opcional): uma descrição de uma a duas linhas da promoção que aparece abaixo da imagem de visualização.
PRICE (opcional): o preço da promoção.
PRICE_CURRENCY (opcional): a moeda do preço no formato ISO 4217 de três letras, como USD. Determina o símbolo da moeda exibido com o price.
DISCOUNT_VALUE (opcional): o valor subtraído do price para mostrar um preço ajustado. O preço ajustado aparece ao lado do original.

Por exemplo, se o discountValue for 25, o price for 100 e o priceCurrency for USD, o preço ajustado será mostrado como $75.
POSITION (opcional): a posição do card no carrossel.

Na tag body, escreva a mensagem do e-mail.

Criar uma prévia de imagem única

As anotações de prévia de imagem única mostram uma imagem para destacar um produto importante na guia "Promoções" do Gmail, como:

Um e-mail promocional que mostra uma imagem de sapatos, um selo de oferta de 20% e o código promocional 20TODAY

É possível usar esse recurso para uma única imagem. Todos os destinatários precisam receber a mesma imagem e o mesmo URL. Consulte nossa documentação de perguntas frequentes para mais informações.

Para criar uma prévia de imagem única:

Na plataforma de e-mail marketing, crie uma mensagem e abra o editor HTML dela.

Na seção head, adicione uma tag script que inclua o tipo de dados 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>

Microdados

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

Substitua os seguintes valores: Para as propriedades opcionais, é possível incluir um valor ou omitir a propriedade do código.

IMAGE_URL: o URL da imagem de visualização em formato PNG ou JPEG, como https://www.example.com/image.png. A proporção aceita é 1,91:1.
PROMO_URL: quando os usuários clicam no image, o URL que direciona para a promoção.
HEADLINE (opcional): uma descrição de uma a duas linhas da promoção que aparece abaixo da imagem de visualização.
PRICE (opcional): o preço da promoção.
PRICE_CURRENCY (opcional): a moeda do preço no formato ISO 4217 de três letras, como USD. Determina o símbolo da moeda exibido com o price.
DISCOUNT_VALUE (opcional): o valor subtraído do price para mostrar um preço ajustado. O preço ajustado aparece ao lado do original.

Por exemplo, se o discountValue for 25, o price for 100 e o priceCurrency for USD, o preço ajustado será mostrado como $75.

Na tag body, escreva a mensagem do e-mail.

Próximas etapas

Consulte a documentação de referência para saber mais sobre os campos de marcação de e-mail disponíveis.
Saiba mais sobre as práticas recomendadas para anotações de e-mail.

Fazer anotações em e-mails na guia "Promoções" Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Criar anotações de e-mail

Criar uma anotação de transação

JSON-LD

Microdados

Criar um carrossel de produtos

JSON-LD

Microdados

Criar uma prévia de imagem única

JSON-LD

Microdados

Próximas etapas

Fazer anotações em e-mails na guia "Promoções"