How to: Как быстро создать AMP-письмо в eSputnik. Делимся опытом wowbodyslim.com

Хотите запустить AMP-рассылку, но думаете, что для этого нужна большая команда и много времени на подготовку? У нас есть отличное доказательство, что на разработку письма с интерактивным контентом может уйти всего несколько часов и справиться с этой задачей вы сможете в одиночку. В редакторе писем eSputnik уже есть готовые AMP-элементы, которые необходимо только дополнить своим контентом. При желании можно воспользоваться услугами дизайнера, но это совсем не обязательно, ведь баннеры можно подобрать на фотостоках самостоятельно.

В этой статье мы расскажем о кейсе проекта WOWBODY slim, которому маркетинговое агентство eSputnik помогло подготовить AMP-письмо силами стандартного редактора системы.

О проекте

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

Задача

Емейл-маркетолог проекта с 2015 года работает в системе eSputnik и уже опробовала на практике массу вариаций промо и триггерных рассылок. AMP-письмо планировала запустить в качестве эксперимента и сравнить результаты его рассылки с обычными не интерактивными письмами. 

Как создать AMP письмо в eSputnik

На старте работ мы проанализировали специфику проекта и решили, что AMP-письмо должно остаться нацеленным на образование пользователя, но в более веселом и непринужденном виде.

Для реализации такой задумки отлично подошел формат викторины. В процессе разработки письма для WOWBODY slim мы ориентировались на готовые варианты, которые уже были созданы в системе.

Один из примеров с подобной механикой - "AMP-тест: отгадай по логотипу сервисы для email-маркетолога"

Подготовительный этап

В начале работы над задачей маркетолог проекта подготовил 4 вопроса на тему здорового образа жизни. Каждый с 3-мя вариантами ответа. Из них один или два был правильными, а остальные воплощали в себе популярные, но ошибочные суждения. Для каждого вопроса дизайнер из команды клиента подготовил тематические баннеры. Дальше осталось только собрать воедино все материалы и превратить их в классное письмо.

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

Так человек учится и делает для себя выводы, как стоит вести себя, чтобы это было полезно для здоровья и красоты.

Этап верстки

За основу письма мы взяли готовый мастер-шаблон проекта, сохранили из него футер и хедер. Получилась заготовка с пустым телом письма. 

Далее мы решили добавить заглавный (заранее подготовленный) баннер с текстом. Для этого кликаем на картинку в поле “Бросьте контент сюда”, откроется панель инструментов в левой части экрана, через специальное окошко можно либо загрузить картинку с компьютера, либо вставить ссылку. Мы загрузили картинку с компьютера, а далее просто убрали ненужные отступы.

Чтобы убрать отступы нужно: нажать на “Структуру”, в которую помещен баннер, перейти в раздел “Отступы” в левой части редакторской панели, убрать ползунок “Отступы” или поставить в значениях “0”. Теперь картинка полностью растянута на всю ширину письма.

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

• размер текста — 16,
• цвет фона контента — #ffffff,
• цвет текста — #666666,
• цвет ссылок — #ff2f74. 

Для “Заголовков” мы оставили цвет #333333, а кегль сделали для H1 — 30, H2 — 24, H3 — 20.

В разделе “Кнопка” мы также задали стандартные для этого проекта параметры. Цвет кнопки — #ff2f74, цвет кнопки по наведению тоже #ff2f74. Цвет ссылок — #ff2f74, цвет текста — #ffffff. Границу в этом письме не рисовали, поэтому оставили в значении 0, а вот отступы справа и слева поставили по 30px, а сверху и снизу по 15px.

Last post

В разделе “Адаптивность” мы также предусмотрели заранее размеры шрифтов в мобильной версии письма. Поставили по 11pх шрифт в хедере и футере, по 14pх для контента и блока “Меню”, а также 12pх в инфообласти. Заголовки сделали следующие: на H1 — 22, H2 — 20, H3 — 18. Размер текста кнопки также установили 16px.

Когда основные настройки заданы — доделать письмо не составит труда!

Следующим шагом мы добавляем из левой панели инструментов в тело письма блок “Текст”, вписываем наше слово “Привет!”, выравниваем по центру и отмечаем его как “Заголовок 2”. Текст автоматически станет нужного нам цвета и кегля. После этого мы добавляем еще один блок с текстом и вставляем в него подводку “Красивое подтянутое тело, много энергии и классное самочувствие — это несложно, весело и всего 30 минут в день. При условии, что вы на программе WOWBODY или знаете правила заботы о себе”. Этот текст мы выравниваем по левому краю и добавляем небольшой отступ сверху на 15px.

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

Теперь нам нужно составить сами блоки с вопросами и вариантами ответа.

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

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

3. Добавляем блок “Текст”, вписываем название “С чего начинается ваше бодрое утро?” и форматируем как заголовок H2.

4. Теперь настало время добавить в этот контейнер AMP-элемент из панели инструментов, который называется “Аккордеон”.

Именно он поможет нам правильно оформить все варианты ответов.

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

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

7. Механика работы аккордеона подразумевает, что при нажатии на вариант ответа выползает следующий блок с более подробным описанием ответа и аргументацией, почему это суждение верно или нет.

8. Мы окрасили правильные варианты ответа в зеленый оттенок #6aa84f, а ошибочные — в розовый #ff2f74.

9. В итоге у нас получился вот такой AMP-вопрос.

По завершению оформления делаем видимым этот вопрос только в формате AMPHTML в настройках в той же панели инструментов слева.

10. Теперь нам нужно подготовить такой же вопрос, но в стандартном виде HTML,  для тех людей, которые не получат AMP-версию письма из-за технических ограничений. Этот вариант мы составим с 2-мя возможными ответами и оформим этот блок статичным текстом. По аналогии делаем видимым этот вопрос только для формата HTML.

11. Подобным образом оформляем оставшиеся 3 вопроса.

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

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

Ну все! Письмо готово, проверяем итоговый результат.

Письмо получилось простым, легким и в то же время вовлекающим. А если учесть, что на подготовку ушло всего несколько часов, то это просто восторг для любого маркетолога!

Выводы

Для создания классного AMP-контента в eSputnik совсем не нужно огромное количество времени или навыки в верстке. Достаточно лишь усидчивости в освоении новых элементов. В нашем редакторе регулярно появляются новые AMP-механики, которыми легко воспользоваться абсолютно бесплатно, в рамках стандартного использования системы. Пробуйте и удивляйте ваших подписчиков креативностью, у вас есть все шансы стать первыми в своей нише, кто использует AMP :)

Special Request Inline