Комментируйте электронные письма на вкладке «Акции».

Аннотации к электронным письмам оживляют электронные сообщения на вкладке «Акции» с помощью таких функций, как изображения, предложения и даты истечения срока действия.

Когда вы добавляете аннотации к письмам, пользователи Gmail просматривают ваши акции и взаимодействуют с ними прямо из своих входящих. На вкладке «Акции» пользователи могут нажать на аннотированный текст или изображение, чтобы узнать больше об акции, не открывая письмо.

На этой странице объясняется, как аннотировать электронные письма с помощью JSON-LD и микроданных . Подробнее о разметке электронных писем см. в руководстве « Начало работы ». Список полей разметки, которые можно использовать в аннотациях электронных писем, см. в справочной документации .

Создание аннотаций к электронным письмам

Вы можете аннотировать электронные письма, чтобы отображать следующие функции на вкладке «Акции»:

В следующих разделах объясняется, как создать каждый тип аннотации электронной почты.

Карусели продуктов отображают несколько предварительных изображений для рекламной акции, например:

Рекламное письмо, в котором отображается карусель из трех изображений-превью с предложениями по продаже носков.

В карусель можно включить до 10 превью изображений, каждое из которых должно быть уникальным.

Чтобы создать карусель товаров:

  1. На вашей платформе для маркетинговой электронной почты создайте электронное письмо и откройте HTML-редактор письма.
  2. В разделе head добавьте тег script . Для каждого изображения в карусели товаров добавьте объект 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>
    

    Микроданные

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

    Для каждого объекта PromotionCard замените следующие значения. Для необязательных свойств вы можете либо включить значение, либо исключить свойство из кода.

    • IMAGE_URL : URL-адрес изображения в формате PNG или JPEG, например, https://www.example.com/image.png . Поддерживаемые соотношения сторон: 4:5, 1:1, 1,91:1. Для каруселей товаров каждое изображение должно иметь уникальный URL-адрес и использовать одинаковое соотношение сторон.

    • PROMO_URL : URL-адрес рекламной акции. Когда пользователи нажимают на изображение на вкладке «Акции», они переходят по этому URL-адресу.

    • HEADLINE (Необязательно): 1-2-строчное описание акции, которое отображается под изображением предварительного просмотра.

    • PRICE (Необязательно): Цена акции.

    • PRICE_CURRENCY (Необязательно): Валюта цены в трёхбуквенном формате ISO 4217 , например, USD . Определяет символ валюты, отображаемый вместе с price .

    • DISCOUNT_VALUE (Необязательно): Сумма, вычитаемая из price для отображения скорректированной цены. Скорректированная цена отображается рядом с исходной ценой.

      Например, если discountValue равно 25 , price100 , а priceCurrencyUSD , скорректированная цена отображается как $75 .

    • POSITION (Необязательно): Положение карточки в карусели.

  3. В теге body напишите текст вашего письма.

Создайте предварительный просмотр одного изображения

Аннотации предварительного просмотра одного изображения отображают одно изображение для демонстрации важного продукта на вкладке «Промо» Gmail, например:

Рекламное письмо с изображением обуви, значком скидки 20% и промокодом 20TODAY

Эту функцию можно использовать для одного изображения. Все получатели должны получить одно и то же изображение и его URL-адрес. Подробнее см. в разделе часто задаваемых вопросов .

Чтобы создать предварительный просмотр одного изображения:

  1. На вашей платформе для маркетинговой электронной почты создайте электронное письмо и откройте HTML-редактор письма.
  2. В разделе head добавьте тег script , включающий тип данных 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>
    

    Микроданные

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

    Замените следующие значения. Для необязательных свойств вы можете либо включить значение, либо исключить свойство из кода.

    • IMAGE_URL : URL-адрес изображения для предварительного просмотра в формате PNG или JPEG, например, https://www.example.com/image.png . Поддерживаемое соотношение сторон — 1,91:1.

    • PROMO_URL : Когда пользователь нажимает на image , URL-адрес перенаправляет на рекламную акцию.

    • HEADLINE (Необязательно): 1-2-строчное описание акции, которое отображается под изображением предварительного просмотра.

    • PRICE (Необязательно): Цена акции.

    • PRICE_CURRENCY (Необязательно): Валюта цены в трёхбуквенном формате ISO 4217 , например, USD . Определяет символ валюты, отображаемый вместе с price .

    • DISCOUNT_VALUE (Необязательно): Сумма, вычитаемая из price для отображения скорректированной цены. Скорректированная цена отображается рядом с исходной ценой.

      Например, если discountValue равно 25 , price100 , а priceCurrencyUSD , скорректированная цена отображается как $75 .

  3. В теге body напишите текст вашего письма.

Создать аннотацию к сделке

Сделайте свое письмо заметным с помощью аннотации к сделке. Эта функция добавляет рекламный значок прямо в ваше письмо во входящих, указывая ключевую информацию, например, код скидки или подробности предложения, прямо рядом с темой письма.

Рекламное письмо, в котором показан значок со скидкой 20% и промокод 20TODAY.

Чтобы включить аннотацию сделок, выполните следующие действия:

  1. Добавьте схему в HTML-код вашего письма : в вашей маркетинговой платформе email-маркетинга откройте HTML-редактор вашей кампании. В разделе head добавьте тег script , включающий тип данных 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>
    

    Микроданные

    <!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. Настройте свойства аннотации сделки : обновите значения в скрипте в соответствии с вашей конкретной рекламной акцией.

    Обязательные свойства: для создания аннотации сделки необходимо включить хотя бы одно из следующих свойств.

    • DESCRIPTION : Краткое, убедительное изложение вашего предложения.

      • Пример: «Скидка 20% на весь товар» или «Купите один товар, получите второй бесплатно».
    • DISCOUNT_CODE : промокод, который пользователь должен применить при оформлении заказа.

      • Пример: 20TODAY.
    • END_DATE_TIME : Дата и время окончания акции в формате ISO 8601 .

      • Пример: 2025-09-23T18:44:37-07:00.

    Настоятельно рекомендуемые объекты:

    • START_DATE_TIME : Дата и время начала акции в формате ISO 8601 .

      • Пример: 2025-08-24T18:44:37-07:00.
  3. Напишите сообщение электронной почты : в теге <body> напишите сообщение и спроектируйте макет вашего электронного письма, как вы это обычно делаете.

  4. Проверьте и просмотрите свою карту : перед отправкой кампании проверьте свой код и просмотрите предварительный просмотр того, как будет выглядеть ваша аннотация к сделке.

Создать карточку сделки

Карточки предложений — это визуальные обзоры ваших акций, создаваемые Gmail. Они могут отображаться на вкладке «Акции» и в самом письме, обеспечивая максимальную заметность ваших предложений.

Рекламное письмо с анонсом автомобиля со скидкой 25% и промокодом MAY2024.

Чтобы включить карты сделок, выполните следующие действия:

  1. Добавьте схему в HTML-код вашего письма : в вашей маркетинговой платформе email-маркетинга откройте HTML-редактор вашей кампании. В разделе head добавьте тег script , включающий тип данных 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"
            "offerPageUrl": "OFFER_PAGE_URL"
            "merchantHomepageUrl": "MERCHANT_HOMEPAGE_URL"
          }]
        </script>
      </head>
    
      <body>
        // The message of your email
      </body>
    </html>
    

    Микроданные

    <!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. Настройте свойства карточки предложения : обновите значения в скрипте в соответствии с вашей конкретной акцией.

    Требуемые свойства:

    • DESCRIPTION : Краткое, убедительное изложение вашего предложения.

      • Пример: «Скидка 20% на весь товар» или «Купите один товар, получите второй бесплатно».
    • По крайней мере один из следующих URL-адресов: Мы рекомендуем указать URL-адрес страницы предложения.

      • OFFER_PAGE_URL : URL целевой страницы данного предложения. Это создаст кнопку «Купить сейчас» (или аналогичную) на карточке предложения. Если эта кнопка указана, мы будем использовать URL страницы предложения.

      • MERCHANT_HOMEPAGE_URL : Используйте этот параметр только если страница с конкретным предложением недоступна. Ссылка будет вести на вашу главную страницу.

    Настоятельно рекомендуемые объекты:

    • DISCOUNT_CODE : промокод, который пользователь должен применить при оформлении заказа.

      • Пример: 20TODAY.
    • START_DATE_TIME : Дата и время начала акции в формате ISO 8601 .

      • Пример: 2025-08-24T18:44:37-07:00.
    • END_DATE_TIME : Дата и время окончания акции в формате ISO 8601 .

      • Пример: 2025-09-23T18:44:37-07:00.
  3. Напишите сообщение электронной почты : в теге <body> напишите сообщение и спроектируйте макет вашего электронного письма, как вы это обычно делаете.

  4. Проверьте и просмотрите свою карту : перед отправкой кампании проверьте свой код и просмотрите предварительный просмотр того, как будет выглядеть ваша аннотация к сделке.

Следующие шаги