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

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

Про проект

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

Завдання

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

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

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

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

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

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

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

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

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

Етап верстки

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

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

Щоб видалити відступи, треба натиснути “Структуру”, в якій розміщений банер, перейти до розділу “Відступи” на панелі редагування ліворуч, прибрати повзунок “Відступи” або встановити у значеннях “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-елемент, який має назву “Акордеон”.

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

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

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

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

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

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

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

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

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

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

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

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

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

Висновки

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