Как создавать интерактивный контент без проблем с кодом. Stripo представляет: генератор интерактивных модулей

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

Хотите создавать подобное без навыков программирования? Именно для этого и нужен наш генератор. Читайте дальше, чтобы узнать, как его использовать.

Что такое генератор интерактивного контента и какую пользу он может вам принести?

Основная задача этого генератора — упростить и ускорить процесс создания интерактивных элементов (на основе AMP или HTML) для ваших писем. Для этого обычно приходится обращаться к программистам или разбираться с кодом самостоятельно. Но с нашим новым генератором вам нужно проявить только всю свою креативность, а мы позаботимся о технической части.

Генератор предоставляет вам модуль, в котором содержится следующее:

• AMP-версия вашего письма. Работает в Gmail, Yahoo и FairEmail;
• интерактивный фолбэк. Работает на всех устройствах и в почтовых клиентах, поддерживающих HTML5 и CSS3. Также совместим с Apple Mail и Samsung Email;  
• текстовая резервная версия. Работает в почтовых клиентах, не поддерживающих HTML5 и CSS3, например в некоторых приложениях Outlook.

Вы просто вставляете этот код в свой шаблон, и все готово!

На сегодняшний день наш генератор позволяет создать один интерактивный элемент — опросник. Этим летом мы добавим еще два элемента. Ознакомиться с полным списком доступных в скором времени интерактивных модулей можно здесь.

Основные преимущества нашего интерактивного генератора:

• упрощенное создание интерактивного контента при помощи удобного интерфейса генератора;  
• он генерирует AMP-код, интерактивныйHTML-фолбэк и текстовый резервный вариант одним кликом;  
• навыки кодирования не требуется;  
• сгенерированный код доступен как пользователям Stripo, так и тем, кто не является нашими клиентами.

Давайте взглянем на наш генератор и посмотрим, как он работает.

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

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

Шаг 1. Откройте генератор

Итак, по ссылке вы заходите прямо на страницу нашего генератора. Самое время его запустить.

• нажмите кнопку «Опросник»;

• нажмите кнопку «Новый опросник», чтобы начать его создание.

Шаг 2. Ознакомьтесь с кнопками

Прежде чем нажимать на кнопки, неплохо бы ознакомиться с ними, потому что их много. Итак, по порядку:

1. Кнопки для навигации по настройкам различных элементов опросника, таких как вопросы, экраны завершения и резервные сообщения.  
2. Блок для создания вопросов и ответов.  
3. Переключатель нумерации вопросов (работает только в том случае, если в вашем опроснике больше одного вопроса).  
4. Переключатель предварительного просмотра AMP-версии, интерактивного HTML и резервной версии опросника.  
5. Кнопки предварительного просмотра опросника на десктопных и мобильных устройствах.

Шаг 3. Заполните вопросы и ответы

Здесь мы наконец создадим наш email-опросник. Мы покажем, на что способен этот генератор, спросив, сколько будет 2 + 2. Остановимся подробнее на моментах, которые следует учитывать при создании опросника.

Вопросы

Чтобы создать вопрос, введите:

• вопрос (вы можете добавить дополнительные вопросы, нажав кнопку «+»);  
• ссылку на изображение, которое должно сопровождать вопрос;  
• все варианты ответов.

Ограничения для изображений:

• формат JPG, PNG или GIF;  
• вес файла до 3 МБ;  
• размеры до 4000 × 4000.

Чтобы удалить ненужный вопрос, кликните значок корзины рядом с номером вопроса, который вы хотите удалить.

Вы можете добавить подсказки, также известные как сообщения об успешном завершении, которые появятся после того, как получатель отправит ответ на вопрос.

Следующая опция позволит вам пронумеровать вопросы в вашем опроснике. Поскольку у нас один вопрос, нумерация не отображается.

Окно завершения

Вы можете добавить экран с результатами пользователя, который появится после того, как он заполнит опросник. Во вкладках «Все правильные», «Некоторые правильные» и «Все неправильные» вы можете написать нужные сообщения, которые увидит получатель.

Вы также можете выбрать, где будет отображаться сообщение. Для нашего примера мы выбрали «После квиза».

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

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

Важно отметить:

Мы только что создали AMP и интерактивную HTML-версию письма.

Запасной вариант сообщения

Резервный вариант нужен для почтовых клиентов, которые не поддерживают AMP или интерактивные элементы в HTML-письмах.

Вы можете позволить генератору создать его автоматически, нажав соответствующую кнопку.

Можно также создать собственный резервный вариант вручную. Просто введите необходимое сообщение.

Шаг 4. Поработайте над дизайном

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

В правом верхнем углу найдите кнопку «Оформление», чтобы начать раскрашивать опросник.

Вы можете изменить:

• цветовые схемы;  
• цвета отдельных элементов;  
• цвета шрифтов;  
• размеры шрифтов.

Шаг 5. Проверьте созданный опросник

Обязательно проверьте все три версии как для десктопных, так и для мобильных устройств.

При необходимости вы всегда можете отредактировать любую из них.

Шаг 6. Используйте сгенерированный контент

После того как вы закончили создание опросника, нужно сохранить результаты, нажав для этого кнопку «Сохранить». Далее все зависит от того, где именно вы собираетесь использовать этот код.

Вариант 1. Если вы хотите использовать код в Stripo

Если вы используете код для создания письма в Stripo, можете скопировать код в буфер обмена или скачать его в виде HTML-файла.

Затем вам нужно:

• скопировать код;  
• навести курсор на любую полосу — Контент;  
• нажать кнопку с плюсом в нижней части полосы;

• выберите полосу с 1 колонкой;

• нажмите на новую полосу, чтобы убедиться, что именно она сейчас активна;  
• откройте ее код в редакторе;

• замените существующий код тем кодом, который вы скопировали ранее.

Если вы скачали HTML-файл, то принцип практически тот же, за исключением дополнительных действий. В списке загрузок вашего браузера вы увидите этот файл; его нужно открыть посредством Блокнота или любого другого текстового редактора. После этого скопируйте код из Блокнота в буфер обмена и вставьте его в письмо так, как описано выше.

После этого опросник появится в вашем шаблоне и вы сможете сохранить его как модуль. Модули — это повторно используемые элементы шаблона письма, которые вы можете создать для своих будущих кампаний. Любой элемент письма можно легко сохранить как модуль в вашей персональной библиотеке, поэтому можете сохранить сгенерированный вами интерактивный элемент и добавлять его в другие письма, когда это потребуется.

После добавления сгенерированного интерактивного элемента в свою рассылку вы сможете экспортировать ее в HTML, AMP HTML или напрямую в другие ESP.

Это важно: перед экспортом нужно убедиться, что ваш ESP поддерживает AMP. Вы можете сделать это на официальной странице поддержки AMP от Google или обратившись в сервис поддержки вашего ESP.

Вот список интегрированных со Stripo ESP, которые позволяют экспортировать письма на основе AMP.

Если ваш ESP поддерживает технологию AMP, но наша интеграция не позволяет экспортировать AMP-контент, скачайте шаблон в виде файла AMP HTML.

Вариант 2. Если вы используете код вне Stripo

На данный момент вы можете получить сгенерированный код опросника по электронной почте в свои входящие. Просто введите email-адрес в соответствующее поле и нажмите «Отправить». Перед этим важно установить флажок «Пришлите мне HTML и AMP-версии».

В своей почте вы увидите вот такое письмо. Нажмите «Скачать код».

Не забывайте, что этот код содержит как элементы AMP, которые будут правильно работать в Gmail, FairEmail и Yahoo, так и фолбэк, который будет отображаться в тех почтовых клиентах, которые не поддерживают AMP.

Когда вы нажмете кнопку, модуль откроется в новом окне, где вы сможете поиграть с ним. Чтобы загрузить код для этого модуля, кликните правой кнопкой мыши в любом пустом месте и скачайте страницу в виде HTML-файла. В большинстве ESP вам придется заливать AMP и HTML по отдельности. Чтобы разделить ваш код на AMP и HTML, нужно открыть скачанный файл в любом текстовом редакторе (в нашем случае это Блокнот). Поскольку код содержит как AMP, так и резервную версию модуля, мы указали это в коде.

• AMP-код находится в блоках <!--AMP Version Start--> и <!--AMP Version End-->;
• резервный код находится в блоках <!--Fallback Version Start--> и <!--Fallback Version End→.

Обратитесь в службу поддержки вашего ESP, чтобы узнать, поддерживают ли они наш код.

Это важно: если вы используете модуль (код) вне Stripo, нужно будет добавить в письмо определенные скрипты.

<script async src="https://cdn.ampproject.org/v0.js"></script> 
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> 
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script> 
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

Шаг 7. Проверьте результаты

Давайте протестируем наше письмо, используя опцию предварительного просмотра в Stripo. Как видите, все то, что мы добавили в процессе создания, отлично работает. После этого вы можете настроить дизайн опросника при помощи встроенных инструментов Stripo.

Небольшой совет

Просто дружеское напоминание — чтобы иметь возможность отправлять AMP-контент, вам необходимо:

• попасть в белый список Google или Yahoo;
• пофиксить все баги, если они возникают. Вы увидите их в режиме предварительного просмотра (иначе пользователи получат рассылку в формате HTML). Пожалуйста, помните, если вы используете наш код в том виде, в котором его получили, в вашем письме не будет ошибок. Если нужно его изменить, обязательно проверьте свой код, прежде чем рассылать игру;
• убедиться, что ваш ESP/CRM может отправлять AMP-письма;
• AMP-письма теряют свои AMP-свойства, если их пересылать именно в почте, а не рассылкой;
• через 30 дней после доставки вашим уважаемым получателям письмо утрачивает свои AMP-свойства.

Если ни одно из этих условий не соблюдено, подписчики увидят интерактивный фолбэк.

В завершение

Наша неизменная цель — сделать создание писем простым и доступным для всех, от опытных технарей до маркетологов, которые никогда не прикасались к коду.

С нашим генератором вы получаете фрагмент кода, содержащий элементы AMP, которые будут правильно работать в Gmail, FairEmail и Yahoo; интерактивный HTML-фолбэк, который работает в Apple Mail и Samsung Mail; и фолбэк, который будет отображаться в тех почтовых клиентах, которые не поддерживают интерактивный контент, например в некоторых версиях приложений Outlook.

Сегодня Stripo позволяет создавать игры, квизы и опросы, в которых ваши подписчики могут участвовать непосредственно в письме. Работать с интерактивным контентом еще никогда не было так просто.