Хотите запустить AMP-рассылку, но думаете, что для этого нужна большая команда и много времени на подготовку? У нас есть отличное доказательство, что на разработку письма с интерактивным контентом может уйти всего несколько часов и справиться с этой задачей вы сможете в одиночку. В редакторе писем eSputnik уже есть готовые AMP-элементы, которые необходимо только дополнить своим контентом. При желании можно воспользоваться услугами дизайнера, но это совсем не обязательно, ведь баннеры можно подобрать на фотостоках самостоятельно.
В этой статье мы расскажем о кейсе проекта WOWBODY slim, которому маркетинговое агентство eSputnik помогло подготовить AMP-письмо силами стандартного редактора системы.
О проекте
WOWBODY slim — это проект известных в Украине фитнес-тренеров Аниты Луценко и Юлии Богдан. Его цель — работа с клиентами компании, которые мечтают похудеть и стать на путь здорового образа жизни. Домашние онлайн-тренировки совмещают в себе комплекс упражнений, рекомендации по питанию и полезным привычкам. Благодаря проекту женщины могут правильно сбросить вес, изменить пищевые привычки и в целом стать более здоровыми.
Задача
Емейл-маркетолог проекта с 2015 года работает в системе eSputnik и уже опробовала на практике массу вариаций промо и триггерных рассылок. AMP-письмо планировала запустить в качестве эксперимента и сравнить результаты его рассылки с обычными не интерактивными письмами.
Как создать AMP письмо в eSputnik
На старте работ мы проанализировали специфику проекта и решили, что AMP-письмо должно остаться нацеленным на образование пользователя, но в более веселом и непринужденном виде.
Для реализации такой задумки отлично подошел формат викторины. В процессе разработки письма для WOWBODY slim мы ориентировались на готовые варианты, которые уже были созданы в системе.
Один из примеров с подобной механикой - "AMP-тест: отгадай по логотипу сервисы для email-маркетолога"
Подготовительный этап
В начале работы над задачей маркетолог проекта подготовил 4 вопроса на тему здорового образа жизни. Каждый с 3-мя вариантами ответа. Из них один или два был правильными, а остальные воплощали в себе популярные, но ошибочные суждения. Для каждого вопроса дизайнер из команды клиента подготовил тематические баннеры. Дальше осталось только собрать воедино все материалы и превратить их в классное письмо.
Механика работы викторины: пользователь читает вопрос и выбирает один вариант ответа, кликает на него, а далее ему открывается подробная расшифровка правильного ответа.
Так человек учится и делает для себя выводы, как стоит вести себя, чтобы это было полезно для здоровья и красоты.
Нужна помощь в верстке AMP-контента?
Да, давайте сотрудничать!Этап верстки
За основу письма мы взяли готовый мастер-шаблон проекта, сохранили из него футер и хедер. Получилась заготовка с пустым телом письма.
Далее мы решили добавить заглавный (заранее подготовленный) баннер с текстом. Для этого кликаем на картинку в поле “Бросьте контент сюда”, откроется панель инструментов в левой части экрана, через специальное окошко можно либо загрузить картинку с компьютера, либо вставить ссылку. Мы загрузили картинку с компьютера, а далее просто убрали ненужные отступы.
Чтобы убрать отступы нужно: нажать на “Структуру”, в которую помещен баннер, перейти в раздел “Отступы” в левой части редакторской панели, убрать ползунок “Отступы” или поставить в значениях “0”. Теперь картинка полностью растянута на всю ширину письма.
После баннера идет небольшая подводка к последующей викторине и расшифровка, о чем будет письмо. Прежде чем приступить к написанию текста, давайте настроим одинаковый формат текста для всего тела письма. Кликаем на панель слева, находим раздел “Оформление” и проставляем нужные нам параметры в разделах “Полосы”, “Заголовки”, “Кнопка” и др. Мы поставили для “Полосы”:
- размер текста — 16,
- цвет фона контента — #ffffff,
- цвет текста — #666666,
- цвет ссылок — #ff2f74.
Для “Заголовков” мы оставили цвет #333333, а кегль сделали для H1 — 30, H2 — 24, H3 — 20.
В разделе “Кнопка” мы также задали стандартные для этого проекта параметры. Цвет кнопки — #ff2f74, цвет кнопки по наведению тоже #ff2f74. Цвет ссылок — #ff2f74, цвет текста — #ffffff. Границу в этом письме не рисовали, поэтому оставили в значении 0, а вот отступы справа и слева поставили по 30px, а сверху и снизу по 15px.
В разделе “Адаптивность” мы также предусмотрели заранее размеры шрифтов в мобильной версии письма. Поставили по 11pх шрифт в хедере и футере, по 14pх для контента и блока “Меню”, а также 12pх в инфообласти. Заголовки сделали следующие: на H1 — 22, H2 — 20, H3 — 18. Размер текста кнопки также установили 16px.
Когда основные настройки заданы — доделать письмо не составит труда!
Следующим шагом мы добавляем из левой панели инструментов в тело письма блок “Текст”, вписываем наше слово “Привет!”, выравниваем по центру и отмечаем его как “Заголовок 2”. Текст автоматически станет нужного нам цвета и кегля. После этого мы добавляем еще один блок с текстом и вставляем в него подводку “Красивое подтянутое тело, много энергии и классное самочувствие — это несложно, весело и всего 30 минут в день. При условии, что вы на программе WOWBODY или знаете правила заботы о себе”. Этот текст мы выравниваем по левому краю и добавляем небольшой отступ сверху на 15px.
Подводка к викторине готова!
Теперь нам нужно составить сами блоки с вопросами и вариантами ответа.
-
Вставляем одинарный контейнер после текста-подводки.
-
Добавляем блок “Картинка” из левой панели инструментов, а в нее подгружаем соответствующий вопросу баннер, который заранее подготовил дизайнер.
-
Добавляем блок “Текст”, вписываем название “С чего начинается ваше бодрое утро?” и форматируем как заголовок H2.
-
Теперь настало время добавить в этот контейнер AMP-элемент из панели инструментов, который называется “Аккордеон”.
Именно он поможет нам правильно оформить все варианты ответов.
-
В самом аккордеоне нам нужно добавить количество секций, равное количеству вариантов ответов. В нашем случае в первом вопросе мы предусмотрели 3 разных ответа от пользователей.
-
Цвет текста секций мы решили оставить стандартным для этого проекта — #333333, размер шрифта — 20px, а цвет фона секций — #fffff. Каждую секцию переименовали в соответствии с кратким вариантом ответа на вопрос.
-
Механика работы аккордеона подразумевает, что при нажатии на вариант ответа выползает следующий блок с более подробным описанием ответа и аргументацией, почему это суждение верно или нет.
-
Мы окрасили правильные варианты ответа в зеленый оттенок #6aa84f, а ошибочные — в розовый #ff2f74.
-
В итоге у нас получился вот такой AMP-вопрос.
По завершению оформления делаем видимым этот вопрос только в формате AMPHTML в настройках в той же панели инструментов слева.
-
Теперь нам нужно подготовить такой же вопрос, но в стандартном виде HTML, для тех людей, которые не получат AMP-версию письма из-за технических ограничений. Этот вариант мы составим с 2-мя возможными ответами и оформим этот блок статичным текстом. По аналогии делаем видимым этот вопрос только для формата HTML.
Запомните!
В письме обязательно должны быть предусмотрены варианты вопросов для тех, кто получит AMP-рассылку, и для тех, кому придет HTML-версия письма.
После всех вопросов мы добавили небольшой текст, который финализирует всю викторину и анонсирует классную скидку в благодарность за вовлеченность пользователя.
Добавляем простую одинарную “Структуру”, в нее помещаем блок “Текст” и прописываем необходимую информацию в цветах письма.
Ну все! Письмо готово, проверяем итоговый результат.
Письмо получилось простым, легким и в то же время вовлекающим. А если учесть, что на подготовку ушло всего несколько часов, то это просто восторг для любого маркетолога!
Выводы
Для создания классного AMP-контента в eSputnik совсем не нужно огромное количество времени или навыки в верстке. Достаточно лишь усидчивости в освоении новых элементов. В нашем редакторе регулярно появляются новые AMP-механики, которыми легко воспользоваться абсолютно бесплатно, в рамках стандартного использования системы. Пробуйте и удивляйте ваших подписчиков креативностью, у вас есть все шансы стать первыми в своей нише, кто использует AMP :)