Катерина Корабльова

Провідний спеціаліст з email-маркетингу в eSputnik

How-to: Як швидко створити AMP-лист у eSputnik. Ділимося досвідом wowbodyslim.com

Хочете запустити AMP-розсилку, але вважаєте, що для цього знадобиться велика команда і багато часу на підготовку? У нас є переконливий доказ того, що розробка листа з інтерактивним контентом може потребувати лише кількох годин і що ви зможете впоратись із цим завданням власними силами. У редакторі листів eSputnik вже є готові AMP-елементи, які треба лише доповнити власним контентом. За бажанням можна скористатися послугами дизайнера, однак це зовсім не обов'язково, адже банери ви можете самостійно вибрати на фотостоках.

У цій статті ми розповімо про кейс проекту WOWBODY slim, якому маркетингова агенція eSputnik допомогла підготувати AMP-лист, використовуючи стандартний редактор системи.

Про проект

WOWBODY slim — це проект відомих в Україні фітнес-тренерів Аніти Луценко і Юлії Богдан. Його мета – робота з клієнтами компанії, які мріють схуднути і стати на шлях здорового способу життя. Домашні онлайн-тренування поєднують у собі комплекс вправ, рекомендації стосовно харчування та корисних звичок. Завдяки проекту жінки можуть правильно скинути вагу, змінити звички харчування і в цілому стати здоровішими.

Сайт проекту WOWBODY slim

Завдання

Емейл-маркетолог проекту працює в системі eSputnik починаючи з 2015 року та вже спробувала на практиці безліч варіацій промо і тригерних розсилок. Вона планувала запустити AMP-лист у порядку експерименту, щоб порівняти результати цієї розсилки та звичайних неінтерактивних листів.

Як створити AMP-лист у eSputnik

На старті робіт ми проаналізували специфіку проекту і вирішили, що AMP-лист має залишатися спрямованим на освіту користувача, але у більш веселій та невимушеній формі.

Ідеально придатним для реалізації цього задуму був формат вікторини. У процесі розробки листа для WOWBODY slim ми орієнтувалися на готові варіанти, які вже були створені в системі.

Серед прикладів із подібною механікою був лист від Email-Competitors "AMP-тест: вгадай за логотипом сервіси для email-маркетолога".

Приклад Email-Competitors

Етап підготовки

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

Механіка роботи вікторини: користувач читає запитання, вибирає один варіант відповіді і клікає його, після чого відкривається детальне розшифрування правильної відповіді.

У такий спосіб людина навчається і робить для себе висновки, як треба поводитися, щоб це було корисно для здоров'я та краси.

Потрібна допомога у верстці AMP-контенту?

Етап верстки

В якості основи листа ми взяли готовий майстер-шаблон проекту і зберегли з нього футер та хедер. Вийшла заготовка з порожнім тілом листа.

Заготовка листа з футером і хедером

Потім ми вирішили додати заголовний (заздалегідь підготовлений) банер із текстом. Для цього клікаємо картинку в полі "Киньте контент сюди"; у лівій частині екрану відкриється панель інструментів, і через спеціальне віконце можна буде завантажити картинку з комп'ютера або вставити посилання. Ми завантажили картинку з комп'ютера, після чого просто прибрали зайві відступи.

Щоб видалити відступи, треба натиснути “Структуру”, в якій розміщений банер, перейти до розділу “Відступи” на панелі редагування ліворуч, прибрати повзунок “Відступи” або встановити у значеннях “0”. Тепер картинку буде розтягнуто на повну ширину листа.

Як вставити банер у хедер

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

  • розмір тексту — 16;

  • колір фону контенту — #ffffff;

  • колір тексту — #666666;

  • колір посилань — #ff2f74.

Для "Заголовків" ми залишили колір #333333, а кегль зробили: для H1 — 30, для H2 — 24 і для H3 — 20.

Основні налаштування для оформлення листа

У розділі “Кнопка” ми теж налаштували стандартні для цього проекту параметри. Колір кнопки — #ff2f74, колір кнопки за наведенням — теж #ff2f74. Колір посилань — #ff2f74, колір тексту — #ffffff. Межі до цього листа ми не додавали, тому залишили нульове значення, а от відступи праворуч та ліворуч встановили по 30px, а зверху та знизу — по 15px.

Налаштування оформлення для кнопок

У розділі “Адаптивність” ми також заздалегідь передбачили розміри шрифтів для мобільної версії листа. Ми встановили шрифт по 11pх у хедері та футері, по 14pх для контенту і блоку "Меню", а також 12pх для інфообласті. Заголовки зробили такими: H1 — 22, H2 — 20, H3 — 18. Також налаштували розмір тексту для кнопки — 16px.

Основні налаштування адаптивності

Коли основні налаштування зроблені, завершити листа буде нескладно!

Прописуємо заголовок у тілі листа

Наступним кроком ми додаємо з лівої частини панелі інструментів до тіла листа блок “Текст”, вписуємо слово “Привіт!”, вирівнюємо його за центром і позначаємо як “Заголовок 2”. Текст автоматично набуває потрібного нам кольору і кегля. Потім додаємо ще один блок із текстом і вставляємо до нього підведення “Гарне підтягнуте тіло, багато енергії та класне самопочуття – це нескладно, весело і потребує лише 30 хвилин на день. За умови, що ви у програмі WOWBODY або знаєте правила догляду за собою”. Цей текст ми вирівнюємо за лівим краєм і додаємо невеликий відступ зверху — 15px.

Підведення до вікторини готове!

Тепер нам треба побудувати власне блоки із запитаннями і варіантами відповідей.

  1. Вставляємо одинарний контейнер після тексту-підведення.

  2. Додаємо блок “Картинка” з панелі інструментів ліворуч, а до неї завантажуємо заздалегідь підготований дизайнером банер, що відповідає запитанню.

  3. Додаємо блок “Текст”, вписуємо назву “Із чого починається ваш бадьорий ранок?” і форматуємо її як заголовок H2.

  4. Тепер час додати з панелі інструментів до цього контейнера AMP-елемент, який має назву “Акордеон”.

AMP-блок із акордеоном

Саме він допоможе нам правильно оформити всі варіанти відповідей.

  1. У самому акордеоні нам треба додати кількість секцій, яка дорівнюватиме кількості варіантів відповідей. У нашому випадку для першого запитання ми передбачили три різні відповіді користувачів.

Додавання секцій до блоку акордеона

  1. Ми вирішили залишити стандартний для цього проекту колір тексту секцій — #333333, встановили розмір шрифту — 20px і фоновий колір секцій — #fffff. Кожну секцію ми перейменували відповідно до короткого варіанту відповіді на запитання.

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

Прописуємо варіанти відповідей в AMP

  1. Ми застосували для правильних варіантів відповідей зелений відтінок #6aa84f, а для помилкових – рожевий #ff2f74.

  2. У результаті ми отримали ось таке AMP-запитання.

AMP-блок із запитанням і варіантами відповідей

Завершивши оформлення, ми робимо запитання видимим лише у форматі AMPHTML — цей параметр встановлюється в налаштуваннях тієї самої панелі інструментів ліворуч.

Налаштування видимості AMP/HTML блоків у листі

  1. Тепер нам треба підготувати таке саме запитання, але у стандартному вигляді HTML — для тих, хто не отримає AMP-версію листа через технічні обмеження. Цей варіант ми побудуємо з двома можливими варіантами відповіді та оформимо цей блок як статичний текст. За аналогією робимо це запитання видимим тільки для формату HTML.

Запитання у форматі HTML

11. У подібний спосіб оформлюємо три інших запитання.

Запам’ятайте!

У листі неодмінно мають бути передбачені варіанти запитань для тих, хто отримає AMP-розсилку, і тих, кому надійде HTML-версія.

AMP-блок із другим запитанням

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

Фінальний текст у листі

Додаємо просту одинарну “Структуру”, до неї вставляємо блок “Текст” і прописуємо потрібну інформацію, використовуючи кольори листа.

Last post

Ну от і все! Лист готовий, перевіряємо фінальний результат.

Повна версія AMP-листа

Лист вийшов простим, легким, і водночас він залучає. А якщо врахувати, що на підготовку ми витратили всього кілька годин, то це просто екстаз для будь-якого маркетолога!

Висновки

Для створення класного AMP-контенту в eSputnik зовсім не потрібні величезні обсяги часу або навички верстки. Цілком вистачить наполегливості в опануванні нових елементів. У нашому редакторі регулярно з'являються нові AMP-механіки — іхнє застосування є простим і абсолютно безкоштовним у межах стандартного користування системою. Випробовуйте їх і дивуйте підписників креативністю — ви маєте всі шанси стати першим, хто застосує AMP у своїй ніші! :)

0.0 з 5 на основі 0 оцінок

Катерина Корабльова

Провідний спеціаліст з email-маркетингу в eSputnik

Коментарі 0