building-amp-questionnaires-with-stripo-by-using-pre-built-modules
15 апреля 2023

Создание интерактивных опросников в Stripo: два простых способа

Роленко Любовь
Роленко Любовь Web-дизайнер / HTML-верстальщик Stripo
Оглавление
  1. Два способа создания интерактивных опросников в Stripo
  2. Небольшой совет
  3. В завершение
1.
Два способа создания интерактивных опросников в Stripo

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

(Ознакомьтесь с веб-версией этого письма)

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

Сегодня мы хотим рассказать о двух простых способах создания интерактивных опросников для email-кампаний с помощью Stripo.

Два способа создания интерактивных опросников в Stripo

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

Способ 1. Генератор интерактивного контента

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

Генератор формирует модуль, содержащий следующее:

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

Затем необходимо сохранить модуль, после чего можно работать с ним в Stripo или любом другом редакторе, поддерживающем AMP.

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

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

Вам также может понравиться

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

Способ 2. Готовый модуль Stripo

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

Это несложно реализовать, если следовать нашему пошаговому гайду.

Шаг 1. Вставка готового модуля AMP в шаблон

Для вашего удобства я создала готовый модуль «AMP-опросник». Он состоит из трех вопросов. Фактически, за основу мы взяли наше письмо из серии, убрали всю айдентику Stripo и наше интро. Собственно, все.

Соответственно, в вашем модуле будет три секции для вопросов.

Экран всего AMP-модуля

Данный модуль можно вставить в свой шаблон. По умолчанию он включен в AMP HTML-версию. 

Чтобы вставить модуль в шаблон, пожалуйста:

  • перетащите шаблон с 1 контейнером в письмо;
  • перейдите в раздел «Модули»;
  • перейдите на вкладку «Общие»;
  • введите «Questionnaire»;
  • просто перетащите этот модуль в свой шаблон.

Добавление готового модуля с AMP-опросником в письмо

Здесь можно редактировать цвета, цвета для слова «Вопрос» и его фона, а также цвета для полей с ответами.

Для этого кликните на иконке «Структура», затем откройте редактор кода, как показано ниже:

Редактирование цветов модуля

Редактирование секции со словом «Вопрос»

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

Редактирование секции ответов

Чтобы получить номер цвета, начните редактирование текста / оформление кнопок и в палитре цветов скопируйте номер нужного цвета.

Редактирование дизайна полей «Ответы»

В полях «Ответы» отображается, правильным или неправильным был ответ.

Чтобы найти их в своем коде, проскролльте страницу вниз:

Замена цветов в секции вариантов ответа

  • где "a1" означает правильный ответ;
  • "a0" — неправильный ответ.

Здесь можно заменить цвет фона и цвет границы.

По умолчанию при неправильном ответе пользователя «Поле ответа» становится красным, при правильном — зеленым.

Как быть с другими элементами, например, самими вопросами, изображениями и номерами секций? Их можно редактировать в JSON-файле.

Кстати, этот модуль уже подключен к JSON-файлу. Вам не нужно ничего в нем менять. Мы будем работать только с файлом JSON.

Шаг 2. Работа над вопросами / Редактирование JSON-файла

Да, вам нужен JSON-файл для создания источника данных — непосредственно опросника.

Этот файл будет извлекать информацию/вопросы с ваших серверов в письма.

В качестве JSON-файла используйте приведенный ниже пример кода (тот, который мы использовали для своей кампании):

{
   "items":[
      {
         "questions":[
            {
               "id":1,
               "img":"https://kvlya.stripocdn.email/content/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/images/29111588071244597.jpeg",
               "question":"How to pronounce our service’s name?",
               "text":"Fun fact. Initially, our service's name was Stripe, but when we found out that this name had been already taken, we quickly changed it. And yes, it happened on the first day at an international exhibition.",
               "wrongtext":"Oops. The correct answer is |strɪpe-oh| (|straɪp-oʊ|).
Fun fact. Initially, our service's name was Stripe, but when we found out that this name had been already taken, we quickly changed it. And yes, it happened on the first day at an international exhibition.",
               "correct":"1",
               "answers":[
                  {
                     "ida":1,
                     "answer":"|strɪpe-oh| ( |straɪp-oʊ| )"
                  },
                  {
                     "ida":2,
                     "answer":"|strɪp-oh| ( |strɪp-oʊ| )"
                  }
               ]
            },
            {
               "id":2,
               "img":"https://kvlya.stripocdn.email/content/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/images/83411588071269619.jpeg",
               "question":"What is the most popular email client in the world?",
               "text":"According to studies conducted by Litmus in April 2020, Gmail is the most popular email client. Please find the detailed results of the studies here.",
               "wrongtext":"Oops. The correct answer is “Gmail”.
According to studies conducted by Litmus in April 2020, Gmail is the most popular email client. Please find the detailed results of the study here.",
               "correct":"2",
               "answers":[
                  {
                     "ida":1,
                     "answer":"Outlook"
                  },
                  {
                     "ida":2,
                     "answer":"Gmail"
                  },
                  {
                     "ida":3,
                     "answer":"Apple iPhone"
                  },
                  {
                     "ida":4,
                     "answer":"Apple Mail"
                  }
               ]
            },
            {
               "id":3,
               "img":"https://kvlya.stripocdn.email/content/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/images/64191588071296283.jpeg",
               "question":"How to update a header or a footer in a hundred emails with Stripo at once?",
               "text":"Indeed, with Stripo, you can update any number of emails at once with a few clicks by using synchronized modules. Find more details on the feature in our article.
P.S. You can always email our support team. We’re there for you ;)",
               "wrongtext":"Oops. The correct answer is “Use synchronized modules”.
Indeed, with Stripo, you can update any number of emails at once with a few clicks by using synchronized modules. Find more details on the feature in our article.
P.S.: You can always email our support team. We’re there for you ;)",
               "correct":"3",
               "answers":[
                  {
                     "ida":1,
                     "answer":"Email our support team, they’ll do it for you"
                  },
                  {
                     "ida":2,
                     "answer":"Use smart elements"
                  },
                  {
                     "ida":3,
                     "answer":"Use synchronized modules"
                  },
                  {
                     "ida":4,
                     "answer":"Hire a team of 100 people"
                  }
               ]
            }
         ],
         "results":[
            {
               "titleWrong":"Good job.",
               "textWrong":"Everything is 10% off with this discount code:",
               "promocodeWrong":"SALE10",
               "outlookText":"Check your answers and get a discount. Correct answers: 1a, 2b, 3с.",
               "titleRight":"Amazing!",
               "textRight":"Everything is 30% off with this discount code:",
               "promocodeRight":"MEGASALE"
            }
         ]
      }
   ]
}

Где "id" — это секция с вопросами:

  • "id1" — секция с вопросом 1. Все элементы от "id1" до "id2" относятся к вопросу 1;
  • "img" — ссылка на изображение, которое вы собираетесь использовать в опроснике;
  • "question" — собственно вопрос;
  • "wrongtext" — это текст, который увидят пользователи в случае неправильного ответа;
  • "correct" — это текст, который увидят пользователи в случае правильного ответа;
  • "ida1-4" — вариант ответа, предоставляемый пользователям.

Отредактируйте эту информацию вручную:

  • "img": "ссылка на ваше изображение".
  • "question": "Ваш вопрос?".
  • "text": "текст, появляющийся после ответа пользователя".
  • "wrongtext": "вот что видят пользователи в случае неправильного ответа".
  • "correct": "вот что видят пользователи в случае правильного ответа".
  • "ida": 1,
    "answer": "вариант ответа 1".
  • "ida": 2,
    "answer": "вариант ответа 2".

Проделайте то же самое для каждой секции.

Наш код содержит три секции вопросов. Пожалуйста, удалите выделенный текст из своего JSON-файла, если вам нужны только две.

Удалите секции из JSON

Если вы хотите, чтобы все вопросы содержали четыре варианта ответа, то в JSON-коде удалите секцию 1 и продублируйте секцию 2. 

Шаг 3. Подключение писем к источнику данных

Этот шаг необходим для извлечения данных из JSON-файлов в наши опросники, а также для демонстрации пользователям правильности или неправильности их ответов (пользователи отправляют ответы, а наш источник данных показывает, был ли ответ правильным, и выдает пользователю правильный ответ).

  • откройте вкладку «Данные»;
  • перейдите в раздел «Источники данных»;
  • создайте новый источник данных;
  • введите название этой кампании ( оно может быть любым);
  • в новом разделе ниже вставьте свой JSON-файл;
  • скопируйте URL-адрес.

Создание нового источника данных

Шаг 4. Работа над хранилищем данных / Выбор места доставки ответов пользователей

Нам необходимо создать сервис данных — место для хранения ответов пользователей.

Если вы хотите разместить данные на серверах Stripo, переключите кнопку «Хранилище Stripo».

Создание нового хранилища данных с помощью сервиса данных Stripo

Если вы планируете хранить данные в Google Drive (Spread Sheets), выполните действия, описанные в нашей статье блога «Сервис данных Stripo».

Шаг 5. Вставка endpoints в письма

Теперь, чтобы подключить наш опрос к серверам и хранилищу данных — фактически активировать AMP-опросник в наших письмах, — необходимо вставить endpoints, которые мы только что создали:

  • кликните на иконку ⚡ HTML «Структура»;
  • откройте редактор кода;

Редактирование цветов модуля

  • замените ссылку, идущую после "action-xhr" в строке, на URL-адрес, сгенерированный в шаге 4;
  • замените ссылку на источник, которая идет после "src=" в строке, на URL-адрес, сгенерированный в шаге 3;

Вставка URL-ссылок

  • готово.

Шаг 6. Построение резервной версии опросника

Мы должны создать резервную версию квиза для пользователей, чьи почтовые клиенты не поддерживают AMP.

Здесь можно указать ссылку на веб-версию нашего AMP-письма или ссылку на Google Form с вопросами, которые были использованы для квиза.

Для получения ссылки на «Веб-версию», пожалуйста:

  • перейдите в режим предпросмотра;
  • кликните на «AMP HTML» в правом верхнем углу;
  • кликните на иконку «Копировать».

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

Шейринг ссылок на предпросмотр недоступен для тарифного плана Free.

Получение ссылки для шейринга

Чтобы добавить этот фолбэк в письма с опросниками, пожалуйста:

  • поместите в шаблон структуру с 1 контейнером;
  • перетащите в нее базовый блок «Кнопка»;
  • проработайте ее дизайн так, чтобы он соответствовал дизайну всего письма;
  • отредактируйте ее название. Например «Пройти опрос»;
  • добавьте к этой кнопке свой URL;
  • добавьте понятный CTA-текст над этой кнопкой;
  • включите эту структуру только в HTML-версию письма.

Включить только в HTML-версию опросника 

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

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

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

В завершение

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

Повышайте эффективность email-маркетинга с помощью интерактивных квизов
Была ли статья полезна?
Tell us your thoughts
Спасибо за ваш отзыв!
Поделиться
Геймификация для писем
Геймификация для писем

Создайте самую увлекательную рассылку. Без лишних хлопот с кодом.

Попробовать генератор игр
4 комментариев
Sarah Balli 2 года назад
Does this work with Outlook?
Andre Luiz Daleffi 4 года назад
Hey! Nice post, thanks for sharing the content. Took the steps, everything went well in the construction. The preview function shows everything correct too. But, the test function sends a blank email. Exporting to gmail or embedding the amphtml code also generates a blank email. What could it be? Thanks!
Andre Luiz Daleffi 4 года назад
Ps.: tried with Gmail
Анна Кузнецова 4 года назад
Andre, Thank you so much for your comment. We are sorry it did not work well for you. If your email was not blank and worked well in the preview mode, it means that you have not been whitelisted with Google as a sender. To test your AMP emails, please add our info@stripo-test.email email address as a trusted sender as shown in the screenshot https://prnt.sc/tazlyj . Find more details here https://stripo.email/blog/preview-and-send-test-email-in-stripo/#amp-html-emails To be allowed to send AMP emails to other recipients, you need to get whitelisted with Google. In this post, we share a step-by-step guide. https://stripo.email/blog/how-to-get-whitelisted-with-google-to-send-amp-emails-our-personal-experience/ Thank you for your interest in our blog and in the AMP functionality.
Тип
Индустрия
Сезоны
Интеграции
Редактор Stripo
Упростите процесс создания писем.
Плагин Stripo
Интегрируйте Drag-n-Drop редактор Stripo в свое веб-приложение.
Заказать шаблон
Наша команда может разработать и сверстать его для вас. Просто заполните бриф, и мы свяжемся с вами в ближайшее время.

Редактор Stripo

Для команд специалистов по email-маркетингу и индивидуальных разработчиков писем.

Плагин Stripo

Для продуктов, которые могут эффективно использовать интегрированный white label конструктор писем.