Вкладка “Пропозиції” в поштовій скриньці Gmail схожа на вулицю з магазинами: десятки брендів одночасно змагаються за увагу користувача. Як виділити ваш лист серед інших? Тут на допомогу приходять анотації від Google – візуальні прев’ю, які перетворюють лист у списку вхідних на мінікарусель із банером, знижкою, промокодом або строком дії пропозиції.

Анотації особливо ефективні для ecommerce: вони одразу передають суть акції – розпродаж, новинку, промокод чи сезонну пропозицію – ще до того, як користувач відкрив лист. Банер або товарне зображення привертають погляд, обмежена дія пропозиції створює ефект терміновості, а логотип бренду підсилює впізнаваність та довіру.

І найприємніше для маркетолога: ці прев’ю можна налаштувати без розробників, користуючись простою інструкцією або інструментами eSputnik – швидко і без технічних складнощів. Далі в статті розберемо покроково, які бувають види анотацій, як їх налаштувати, та як цей інструмент допомагає збільшувати конверсію.

Що таке анотації Gmail 

Анотації Gmail – це візуальні елементи, які з’являються під темою листа ще до того як лист відкрили: банер з акційною пропозицією, знижка, промокод або навіть ціла карусель товарів.

При цьому такий спосіб підсвічувати “найяскравіші” пропозиції не є рекламою, за яку потрібно платити. Це алгоритмічний інструмент Gmail, доступний будь-якому бренду.

Google анонсував анотації ще у 2019 році, а у 2023 зробив велике оновлення. Тепер маркетолог може додати не одну, а до 10 товарних карток із фото, короткою назвою та ціною – і користувач переглядає їх прямо в списку листів, не відкриваючи розсилку. Клік по такій картці одразу веде на сторінку товару на сайті, скорочуючи шлях клієнта та підвищуючи відсоток конверсії в покупку.

Оновлення 2023 також включало:

• Карусель товарів (Product Carousel). Можна додати до 10 карток з окремими URL, фото, назвою й ціною. Враховуйте, що всі зображення в каруселі повинні мати однакове співвідношення сторін, інакше Gmail не збудує коректну галерею.
• Одиничні банери – теж залишились і тепер вони менш обмежені за пропорціями.
  Було: жорстка вимога 3:1, будь-яке відхилення обрізалось.
  Стало: пропорції стали гнучкіші – банер може бути трохи вищим або ширшим, головне, щоб залишався горизонтальним (орієнтовно 3:1 або 4:1 чи 3:1.5). 
• Деталізовані пропозиції. Можна додати не лише банер, але й відсоток знижки, промокод, дату завершення акції. Це підсилює FOMO-ефект і підвищує мотивацію до кліку.
• Автоматичні анотації. Якщо маркетолог не створив анотацію вручну, а в листі є кілька однотипних товарних блоків, алгоритми Gmail можуть самостійно згенерувати карусель. Але найкращий результат дає ручне налаштування, тому що тоді бренд повністю контролює, що саме бачить користувач у списку.

Чому анотації збільшують відкриття та продажі 

У вкладці “Пропозиції” всі листи конкурують між собою фактично лише заголовками та прехедером. Анотації змінюють правила: вони додають візуальний складник, який виділяє лист серед інших, ще до того, як отримувач прочитає тему. 

Стандартний лист перетворюється на міні-каталог. Вмикаються одразу кілька психологічних тригерів:

• візуальна домінанта: око чіпляється за картинку серед текстових рядків;
• ефект новизни: каруселі та банери не схожі на інші елементи папки “Пропозиції”;
• фактор FOMO: додавання строку дії оферу або відсотка знижки стимулює швидку дію;
• скорочення шляху до покупки: користувач може перейти на сторінку товару не відкриваючи лист, а клікнувши відповідний банер.

Анотації 2.0: як додати до листа різні формати

Анотації Gmail підтримують кілька форматів візуальних прев’ю. Далі наведемо короткі інструкції: як реалізувати різні види анотацій вручну або за допомогою вбудованого інтерфейсу платформи eSputnik.

Одиничне прев'ю (Single Image Preview)

Один великий банер, який відображається під темою. Підходить для основного офферу, сезонної пропозиції, важливого анонсу або акценту на одному товарі. Привертає максимум уваги завдяки великій площі. 

Як додати одиничну картинку для превʼю

1. Увімкніть підтримку анотацій Gmail у HTML-листі. 

2. Скористуйтесь прикладом коду нижче – вставте його в секцію < head > шаблона вашого листа: 

<!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",
      "headline": "HEADLINE",
      "price": PRICE,
      "priceCurrency": "USD",
      "discountValue": DISCOUNT_VALUE,
      "url": "YOURURL"
    }]
    </script>
  </head>
</html>

3. Після того, як ви скопіюєте шаблон коду для одиничної картки, підставте у нього власні значення:

• IMAGE_URL – посилання на зображення товару у форматі PNG або JPEG.
  Це має бути прямий URL до картинки, наприклад: https://example.com/image.png.
• YOURURL – адреса сторінки товару.
  Саме на цю сторінку користувач потрапить після натискання на прев’ю у вкладці “Пропозиції”.
• HEADLINE (необов’язково) – короткий опис або назва товару у 1–2 рядки.
  Цей текст Gmail покаже безпосередньо під зображенням.
• PRICE (необов’язково) – вартість товару у числовому форматі.
• PRICE_CURRENCY (необов’язково) – валюта ціни.
  Gmail приймає лише трилітерні коди ISO 4217 (наприклад: USD, EUR, UAH).
  Символи валюти ($, €, ₴) не підходять.
• DISCOUNT_VALUE (необов’язково) – величина знижки у відсотках.
  Ви вказуєте базову ціну та відсоток знижки, а Gmail автоматично розраховує нову – і відображає її поруч зі старою. Наприклад: якщо ціна = 100, а DISCOUNT_VALUE = 25, то Gmail покаже 75.

4. Перевірте результат у Gmail Promotions Preview.

Карусель товарів (Product Carousel) з цінами та описом

Складається з 2-10 карток, кожна з яких містить фото, назву, ціну та окремий URL. Користувач може гортати карусель в списку листів у вкладці “Пропозиції”, клікати на картку й одразу переходити на сторінку продукту, оминаючи лист. 

Як додати карусель товарів 

1. Підготуйте від 2 до 10 зображень з однаковим співвідношенням сторін.

2. Вставте поданий нижче код в шаблон листа, в секцію < head >:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
  <head>
    <script type="application/ld+json">
    [{
      "@context": "http://schema.org/",
      "@type": "PromotionCard",
      "image": "https://IMAGE_URL_1.jpg",
      "headline": "test headline",
      "price": 123,
      "priceCurrency": "USD",
      "discountValue": 24, // this value will be subtracted from the full price
      "url": "https://google.com"
    },
    {
      "@context": "http://schema.org/",
      "@type": "PromotionCard",
      "image": "https://IMAGE_URL_2.jpg",
      "headline": "test headline",
      "price": 123,
      "priceCurrency": "USD",
      "discountValue": 24, // this value will be subtracted from the full price
      "url": "https://google.com"
    },
    {
      "@context": "http://schema.org/",
      "@type": "PromotionCard",
      "image": "https://IMAGE_URL_3.jpg",
      "headline": "test headline",
      "price": 123,
      "priceCurrency": "USD",
      "discountValue": 24, // this value will be subtracted from the full price
      "url": "https://google.com"
    }]
    </script>
  </head>
</html>

3. Як і в випадку з одиничною карткою, замініть значення на власні дані. Це потрібно зробити для кожної картки.

• IMAGE_URL – адреса зображення товару у форматі PNG або JPEG
  (приклад: https://example.com/image.png).
• PROMO_URL – посилання на сторінку товару.
• HEADLINE (необов’язково) – назва або короткий опис товару у 1–2 рядки.
• PRICE (необов’язково) – вартість товару у числовому вигляді.
• PRICE_CURRENCY (необов’язково) – валюта ціни у форматі ISO 4217
  (наприклад: USD, EUR, UAH).
• DISCOUNT_VALUE (необов’язково) – значення знижки у відсотках.

Карусель зображень (Image Carousel)

Версія товарної каруселі без тексту: лише зображення, кожне з яких має окремий URL.
Підходить для колекцій, категорій товарів та іміджевих компаній. Клік по картинці переводить користувача на сторінку відповідного товару.

Як додати карусель зображень

1. Використовуйте приклад коду як з наведеного вище каруселі товарів. Вставте приклад коду в шаблон листа, в секцію <head>. 
2. Виключіть необовʼязкові значення і замініть на власні IMAGE_URL та PROMO_URL. 

Автоматичні каруселі від Google

Якщо не налаштувати анотації вручну, Gmail може сам створити карусель на основі верстки листа. У цьому випадку алгоритм сканує лист і формує з блоків карусель із зображеннями. Опис, ціна й інша інформація при цьому не відображаються – лише картинки.

Умови, за яких Gmail згенерує карусель:

• у листі є кілька однакових товарних блоків
  (фото, назва, ціна, кнопка з унікальним URL)
• блоки мають однакову верстку
• URL ведуть на різні сторінки
• зображення товарів однакової пропорції

Коли автокарусель НЕ з’явиться:

• блоки змішані (різна структура)
• повторюється один і той самий URL
• фото різних пропорцій
• ціна вставлена як картинка

Анотація пропозиції (Deal Annotation) 

Компактний формат, в якому під темою додаються відсоток знижки, промокод, дата закінчення акції. Лист з пропозицією виділяється в списку інших, підсилює терміновість і стимулює швидку дію.

Як швидко додати анотацію пропозиції Gmail в редакторі eSputnik 

У eSputnik анотації Gmail налаштовуються за кілька кліків у drag-n-drop редакторі. Платформа сама створює правильну структуру та автоматично вставляє її у лист.

Кроки:

1. Відкрийте лист у редакторі eSputnik.

2. Натисніть на назву листа, щоб перейти в налаштування.

3. Увімкніть функцію “Виділити за допомогою Gmail Promotion Annotations”. 

4. Увімкніть поле, яке хочете додати:

• ярлик з пропозицією
• промокод
• строк дії
• логотип відправника
• банер

5. Завантажте картинки та введіть текст.

6. Збережіть і відправте тест.

eSputnik сам згенерує правильний код і вставить його у лист. Клікнувши по будь-якому елементу такої анотації в поштовому акаунті, користувач відкриє email.

Кейс “Епіцентр”: вплив анотацій на метрики

Група компаній “Епіцентр” – одна з найбільших торгівельних екосистем України. Онлайн-напрям компанії розвивається через сайт EPICENTRK.UA, мобільний застосунок, соцмережі та регулярні email-розсилки.

Для підготовки, надсилання листів і аналітики в “Епіцентр” використовують омніканальну платформу eSputnik. Підготовка листів з анотаціями теж відбувається в drug-n-drop редакторі платформи. 

 Команда ставила три ключові цілі:

1. Виділитися серед конкурентів у вкладці “Пропозиції”.
2. Підвищити open rate.
3. Збільшити переходи на сайт і продажі.

Що показали тестування:

• +10–15% до Open Rate у порівнянні з листами без анотацій.
• Більше показів у верхніх позиціях вкладки “Пропозиції”.

Анотації сприяють кращій видимості та підсилюють результат промокампаній. Для ecommerce це дає реальний приріст охоплення та переходів. Кейс підтверджує, що анотації не просто прикрашають лист, а реально впливають на поведінку та конверсію. 

Як виміряти ефективність у розсилках

Оскільки Gmail не дає окремої статистики по анотаціях, доводиться використовувати інші підходи.

1. Вимірювання переходів через tracking pixel

Щоб побачити, чи відображались анотації, потрібно вставити піксель відстеження у зображення одиничного прев’ю або в кожну картку каруселі. Піксель покаже кількість переглядів прев’ю у стрічці, навіть якщо лист не відкрили.

2. A/B-тест для точного вимірювання Open Rate

Надійний спосіб оцінити вплив анотацій – тестування на сегменті Gmail-користувачів:

1. Зробіть сегмент тільки з адрес @gmail.com.
2. Поділіть його на 2 частини.
3. Група А отримає лист без анотацій.
4. Група B побачить той самий лист, але з анотаціями та tracking pixel.
5. Порівняйте:
   • кількість показів прев’ю;
   • Open Rate обох груп.

Так ви зрозумієте, чи реально анотації збільшують відсоток відкриття для вашої бази.

3. Чи можна відстежити продажі

Gmail не передає інформацію про кліки по прев’ю. Тому пряме відстеження конверсій неможливе.

На практиці можна аналізувати загальний приріст транзакцій у кампаніях, де були анотації, порівняно з контрольними розсилками. Це не гарантує 100% точності, але добре показує динаміку.

Висновок

Анотації Gmail мають вимірюваний вплив на проморозсилки. Вони збільшують перегляди листів у стрічці та покращують OR. 

Крім промолистів використовуйте анотації для дайджестів з цінними матеріалами та листів з категоріями товарів. Так ви зможете привернути увагу тих підписників, які ще не готові щось купити.

Анотації – один із найшвидших способів підсилити промокампанії без збільшення бюджету. Запишіться на безкоштовну консультацію – підкажемо, як налаштувати анотації Gmail у ваших розсилках та отримати більше переходів і продажів.

Отримати персональну консультацію