Agrega anotaciones en correos electrónicos en la pestaña Promociones

Las anotaciones de correo electrónico dan vida a los mensajes de correo electrónico en la pestaña Promociones con funciones como imágenes, ofertas y fechas de vencimiento.

Cuando anotas correos electrónicos, los usuarios de Gmail ven tus promociones y pueden interactuar con ellas directamente desde su bandeja de entrada. En la pestaña Promociones, los usuarios pueden hacer clic en el texto o la imagen anotados para obtener más información sobre la promoción sin tener que abrir el correo electrónico.

En esta página, se explica cómo anotar correos electrónicos con JSON-LD y microdatos. Para obtener más información sobre el lenguaje de marcado de correo electrónico, consulta la guía de introducción. Para obtener una lista de los campos de lenguaje de marcado que puedes usar en las anotaciones de correo electrónico, visita la documentación de referencia.

Crea anotaciones de correo electrónico

Puedes anotar correos electrónicos para mostrar las siguientes funciones en la pestaña Promociones:

En las siguientes secciones, se explica cómo crear cada tipo de anotación de correo electrónico.

Los carruseles de productos muestran varias vistas previas de imágenes para una promoción, como las siguientes:

Un correo electrónico promocional que muestra un carrusel con tres vistas previas de imágenes de ofertas de calcetines.

Puedes incluir hasta 10 vistas previas de imágenes en un carrusel, y cada imagen debe ser única.

Para crear un carrusel de productos, sigue estos pasos:

  1. En tu plataforma de correo electrónico de marketing, crea un correo electrónico y abre el editor de HTML.

  2. En la sección head, agrega una etiqueta script. Para cada imagen de tu producto carrusel, agrega un PromotionCard objeto:

    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>

    Microdatos

    <!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, reemplaza los siguientes valores. Para las propiedades opcionales, puedes incluir un valor o bien omitir la propiedad de tu código.

    • IMAGE_URL: Es la URL de tu imagen en formato PNG o JPEG, como https://www.example.com/image.png. Las relaciones de aspecto admitidas son 4:5, 1:1 y 1.91:1. Para los carruseles de productos, cada imagen debe tener una URL única y usar la misma relación de aspecto.

    • PROMO_URL: Es la URL de la promoción. Cuando los usuarios hacen clic en la imagen desde la pestaña Promociones, visitan esta URL.

    • HEADLINE (opcional): Es una descripción de 1 o 2 líneas de la promoción que se muestra debajo de la imagen de vista previa.

    • PRICE (opcional): Es el precio de la promoción.

    • PRICE_CURRENCY (opcional): Es la moneda del precio en formato ISO 4217 de 3 letras, como USD. Determina el símbolo de moneda que se muestra con el price.

    • DISCOUNT_VALUE (opcional): Es el importe que se resta del price para mostrar un precio ajustado. El precio ajustado se muestra junto al precio original.

      Por ejemplo, si el discountValue es 25, el price es 100, y el priceCurrency es USD, el precio ajustado se muestra como $75.

    • POSITION (opcional): Es la posición de la tarjeta en el carrusel.

  3. En la etiqueta body, escribe el mensaje para tu correo electrónico.

Crea una vista previa de una sola imagen

Las anotaciones de vista previa de una sola imagen muestran una imagen para destacar un producto importante en la pestaña Promociones de Gmail, como la siguiente:

Un correo electrónico promocional que muestra una imagen de zapatos, una insignia de oferta del 20% y el código promocional 20TODAY

Puedes usar esta función para una sola imagen. Todos los destinatarios deben recibir la misma imagen y URL de imagen. Consulta nuestra documentación de preguntas frecuentes para obtener más información.

Para crear una vista previa de una sola imagen, sigue estos pasos:

  1. En tu plataforma de correo electrónico de marketing, crea un correo electrónico y abre el editor de HTML.

  2. En la sección head, agrega una etiqueta script que incluya el tipo de datos 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>

    Microdatos

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

    Reemplaza los siguientes valores. Para las propiedades opcionales, puedes incluir un valor o bien omitir la propiedad de tu código.

    • IMAGE_URL: Es la URL de la imagen de vista previa en formato PNG o JPEG, como https://www.example.com/image.png. La relación de aspecto admitida es 1.91:1.

    • PROMO_URL: Es la URL que dirige a la promoción cuando los usuarios hacen clic en la image.

    • HEADLINE (opcional): Es una descripción de 1 o 2 líneas de la promoción que se muestra debajo de la imagen de vista previa.

    • PRICE (opcional): Es el precio de la promoción.

    • PRICE_CURRENCY (opcional): Es la moneda del precio en formato ISO 4217 de 3 letras, como USD. Determina el símbolo de moneda que se muestra con el price.

    • DISCOUNT_VALUE (opcional): Es el importe que se resta del price para mostrar un precio ajustado. El precio ajustado se muestra junto al precio original.

      Por ejemplo, si el discountValue es 25, el price es 100, y el priceCurrency es USD, el precio ajustado se muestra como $75.

  3. En la etiqueta body, escribe el mensaje para tu correo electrónico.

Crea una anotación de oferta

Haz que tu correo electrónico se destaque con una anotación de oferta. Esta función agrega una insignia promocional directamente a tu correo electrónico en la bandeja de entrada, que destaca información clave, como un código de descuento o detalles de la oferta, justo al lado de la línea de asunto.

Un correo electrónico promocional que muestra una vista previa de una insignia de oferta con un 20% de descuento y el código promocional 20TODAY.

Para habilitar la anotación de oferta, sigue estos pasos:

  1. Agrega el esquema al HTML de tu correo electrónico: En tu plataforma de correo electrónico de marketing, abre el editor de HTML de tu campaña. En la sección head, agrega una script etiqueta que incluya el tipo de datos DiscountOffer con la siguiente estructura:

    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>

    Microdatos

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

  2. Personaliza las propiedades de la anotación de oferta: Actualiza los valores de la secuencia de comandos para que coincidan con tu promoción específica.

    Valores obligatorios: En el código de muestra, reemplaza al menos una de las siguientes variables para generar una anotación de oferta.

    • DESCRIPTION: Es un resumen breve y atractivo de tu oferta.

      • Ejemplo: "20% de descuento en todo el sitio" o "Compra uno y obtén otro gratis".

    • DISCOUNT_CODE: Es el código promocional que un usuario debe aplicar en el paso de confirmación de la compra.

      • Ejemplo: 20TODAY.

    • END_DATE_TIME: Es la fecha y hora de finalización de la promoción en formato ISO 8601.

      • Ejemplo: 2025-09-23T18:44:37-07:00.

    Propiedades altamente recomendadas:

    • START_DATE_TIME: Es la fecha y hora de inicio de la promoción en formato ISO 8601.

      • Ejemplo: 2025-08-24T18:44:37-07:00.

  3. Escribe el mensaje de correo electrónico: En la etiqueta <body>, escribe el mensaje y diseña el diseño de tu correo electrónico como lo haces normalmente.

  4. Valida tu tarjeta y obtén una vista previa: Antes de enviar tu campaña, valida el código y obtén una vista previa de cómo se verá la anotación de oferta.

Crea una tarjeta de oferta

Las tarjetas de oferta son resúmenes visuales de tus promociones que genera Gmail. Pueden aparecer en la pestaña Promociones y dentro del correo electrónico, lo que les brinda a tus ofertas la máxima visibilidad.

Un correo electrónico promocional en el que se muestra un avance de un auto en oferta con un 25% de descuento y el código promocional MAY2024.

Para habilitar las tarjetas de oferta, sigue estos pasos:

  1. Agrega el esquema al HTML de tu correo electrónico: En tu plataforma de correo electrónico de marketing, abre el editor de HTML de tu campaña. En la sección head, agrega una script etiqueta que incluya el tipo de datos DiscountOffer con la siguiente estructura:

    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>

    Microdatos

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

  2. Personaliza las propiedades de la tarjeta de oferta: Actualiza los valores de la secuencia de comandos para que coincidan con tu promoción específica.

    Valores obligatorios:

    • DESCRIPTION: Es un resumen breve y atractivo de tu oferta.

      • Ejemplo: "20% de descuento en todo el sitio" o "Compra uno y obtén otro gratis".

    • Al menos una de las siguientes URLs: Te recomendamos que proporciones una URL de la página de la oferta.

      • OFFER_PAGE_URL: Es la URL de la página de destino de esta oferta específica. Esto creará un botón "Comprar ahora" (o similar) en la tarjeta de oferta. Si se proporciona, preferiremos la URL de la página de la oferta.

      • MERCHANT_HOMEPAGE_URL: Úsala solo si no hay disponible una página de oferta específica. Esto creará un vínculo a tu página principal.

    Valores altamente recomendados:

    • DISCOUNT_CODE: Es el código promocional que un usuario debe aplicar en el paso de confirmación de la compra.

      • Ejemplo: 20TODAY.

    • START_DATE_TIME: Es la fecha y hora de inicio de la promoción en formato ISO 8601.

      • Ejemplo: 2025-08-24T18:44:37-07:00.

    • END_DATE_TIME: Es la fecha y hora de finalización de la promoción en formato ISO 8601.

      • Ejemplo: 2025-09-23T18:44:37-07:00.

  3. Escribe el mensaje de correo electrónico: En la etiqueta <body>, escribe el mensaje y diseña el diseño de tu correo electrónico como lo haces normalmente.

  4. Valida tu tarjeta y obtén una vista previa: Antes de enviar tu campaña, valida el código y obtén una vista previa de cómo se verá la anotación de oferta.

Próximos pasos