Building AMP Questionnaires_Featured Image
timer ~ 9 мин читать
41801 просмотры
оценить
15 июня 2020

Создание AMP-опросов с использованием готовых модулей Stripo

Stripo / Blog / Создание AMP-опросов с использованием готовых модулей Stripo

Привет всем.

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

Небольшое вступление

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

В результате мы получили буквально тысячи запросов в стиле «Как создать такие письма для моих рассылок?».

Вот почему мы решили сделать такую обучающую серию.

Давайте начнем с AMP-опросов, потому что таким было первое письмо в нашей серии викторин...

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

Как создать AMP-опрос с помощью Stripo

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

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

Шаг 1. Добавление готового AMP-модуля в ваш шаблон

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

Итак, в вашем модуле будет три раздела для вопросов.

Перетащите этот модуль в ваш шаблон. По умолчанию он активен в AMP HTML-версии.Screen-of-Entire-AMP-Module

Чтобы добавить модуль в шаблон, сделайте следующее:

  • перетащите в шаблон структуру с одним контейнером;

  • зайдите в раздел «Модули»;

  • перейдите во вкладку «Готовые»;

  • введите «Questionnaire»;

  • и просто перетащите этот модуль в шаблон.

Здесь вы можете редактировать цвета текста вопроса, фона и полей с ответами.

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

Открываем редактор кода

Редактирование раздела «Текст вопроса»

Вам нужно заменить существующие цвета на те, которые вы хотите, вставив номера цветов из нашей палитры.

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

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

Редактирование дизайна полей ответов

В полях «Ответы» вы показываете, правильный ли ответ или нет.

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

Меняем дизайн полей с ответами

  • “a1” означает правильный ответ;

  • “a0” — неправильный вариант.

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

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

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

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

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

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

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

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

{
  "items": [
    {
      "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.",
      "c": "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.",
      "c": "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 ;)",
      "c": "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"
        }
      ]
    }
  ]
}

Где “id” — раздел с вопросами:

  • “id1” — раздел с вопросом 1. Все элементы от “id1” до “id2” относятся к вопросу 1;

  • “img” — ссылка на изображение, которое вы собираетесь использовать в анкете;

  • “question” — собственно вопрос;

  • ”wrongtext” — это текст, который увидят пользователи, если дадут неправильный ответ;

  • “ida1-4” — это варианты ответов, предлагаемые пользователям.

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

  • “img”: “ссылка на ваше изображение”;

  • "question": “ваш вопрос”;

  • "text": “текст, который появляется после того, как пользователь дал какой-либо ответ”;

  • "wrongtext": “то, что видят пользователи, когда дают неправильный ответ”;

  • “ida": 1;

  • "answer": “вариант ответа 1”;

  • "ida": 2;

  • "answer": “вариант ответа 2”.

Сделайте то же самое для каждого раздела.

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

Если вы хотите, чтобы во всех ваших вопросах было четыре варианта ответа, удалите раздел 1 в коде JSON и продублируйте раздел 2.Removing-Sections-from-JSON

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

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

  • откройте вкладку «Данные»;

  • перейдите в раздел «Источник данных»;

  • создайте новый источник данных;

  • введите название этой кампании (оно может быть каким угодно);

  • в новом разделе ниже вставьте файл JSON;

  • скопируйте URL-адрес.

reating New Data Source for Questionnaires_RU

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

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

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

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

Шаг 5. Добавление endpoints в письма

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

  • нажмите иконку ⚡ HTML «Структура»;

  • откройте редактор кода;

Structure_Code_Ru

  • замените ссылку после "action-xhr" в строке <form id...> на URL-адрес, созданный вами на шаге 4;
  • замените исходную ссылку после строки <amp-list...> на URL-адрес, который вы сгенерировали на шаге 3;

Пример Кода_Опросники

  • готово.

Шаг 6. Создание резервной HTML-версии опроса

Нам нужно создать резервную версию опроса в HTML-формате для тех, чьи почтовики еще не поддерживают AMP.

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

Обычно в такие письма маркетологи добавляют ссылки на Google Forms или анкеты на сайтах, где пользователи могут пройти опрос…

Email-Invitation-to-Participate-in-Survey

(Письмо-приглашение от Litmus)

Чтобы добавить в письмо такую ссылку, сделайте следующее:

  • перетащите структуру с одним контейнером в позицию непосредственно под/над структурой, содержащей ваш AMP HTML-опрос;

  • заполните его соответствующим контентом;

  • перетащите в эту структуру базовый блок «Кнопка»;

  • настройте ее на ваш вкус;

  • вставьте свой URL;

  • включите отображение этой структуры в HTML-версии письма-опроса.

Включаем структуру в HTML версию письма

Это важно:

Все остальные элементы письма, такие как лого, футер и контактная информация, будут отображаться в обеих версиях рассылки.

Если вы хотите, чтобы ваши клиенты увидели опрос, который мы только что создали на шаге 5, тогда можете просто добавить ссылку на веб-версию нашего AMP-письма вместо ссылки на Google Forms.

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

  • нажмите “AMP HTML” в верхнем правом углу;

  • и кликните иконку «Скопировать».

Напоминаем

Для того, чтоб ваши получатели увидели именно АМР-письмо, нужно:

  • получить от Google разрешение на отправку АМР-контента;
  • в случае возникновения каких-либо ошибок, которые можно обнаужить именно в меню «Предпросмотр», их нужно устранить в коде. Хотя письма, созданные с помощью наших АМР-блоков, не будут содержать ошибоок;
  • включить HTML-версию в письмо. В противном случае, оно может быть совсем не доставлено;
  • убедиться, что ваш ESP/CRM поддерживает отправку АМР-контента;
  • учитывать, что на данный момент только Gmail (веб версия и приложение на мобильном, как на Android, так и на iOS) и Mail.ru (веб версия и приложение на мобильном, как на Android, так и на iOS) поддерживают АМР-контент. Yahoo скоро пополнит этот список;
  • письма теряют АМР-контент при пересылке.

В завершение

Мы только что создали письмо с опросом. Он работает, как и остальные AMP-элементы, в Gmail и Mail.ru. Остальные пользователи увидят резервный вариант.

Вам понравился наш опросник? Хотите такой же себе?

Sarah Balli 6 месяцев назад

Does this work with Outlook?

Andre Luiz Daleffi 2 года назад

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 прокомментировал Andre Luiz Daleffi 2 года назад

Ps.: tried with Gmail

Hanna Kuznietsova прокомментировал Andre Luiz Daleffi 2 года назад

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.

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

Предыдущие статьи Следующие статьи
banner9
06 июня 2022 · 15 мин читать
ТОП-10 email-редакторов 2022 года

Все конструкторы email-шаблонов для вас на одно лицо? И вы затрудняетесь с выбором подходящего инструмента для своих кампаний, верно? Неудивительно, ведь их очень много. Мы сделаем обзор самых популярных конструкторов, чтобы выделить их отличительные особенности и помочь вам найти наилучший HTML-редактор шаблонов для ваших текущих потребностей. Я попробую создать одинаковый шаблон с одними и теми же медиафайлами во всех редакторах, чтобы увидеть, чем отличаются эти инструменты. Лучшие конструкторы email-шаблонов Для нашего обзора мы выбрали такие редакторы: Stripo, HubSpot, Campaign Monitor,...

Дизайн Маркетинг Шаблоны
best-fonts-for-email-cover-image-stripo
24 мая 2022 · 18 мин читать
Лучшие шрифты для рассылок: советы и хитрости

Одна из самых серьезных проблем при создании электронных писем — правильно выбрать шрифт. Вес, высота, ширина, цвет, форма, интервал… Все ли здесь имеет значение? Да, важно все, но самое главное — выбрать читабельный шрифт. В этой статье мы расскажем, как выбрать лучший профессиональный шрифт для рассылки. Создавайте элегантные письма с помощью Stripo в кратчайшие сроки, используя наши готовые шаблоны Ознакомиться   Шрифты HTML-писем: основные правила, которые нужно соблюдать При выборе оптимального шрифта следует учитывать три базовых правила: 1. Не используйте более двух шрифтов...

Дизайн Маркетинг
Greatest Examples of GIF animations in Emails_Cover Image
27 октября 2021 · 10 мин читать
Гиф-анимации в письмах: 16 лучших примеров

Гифки отлично будут смотреться в ваших письмах, если вы хотите продемонстрировать продукт, привлечь внимание пользователей к какому-либо элементу письма или же просто ненавязчиво украсить текст. В этой статье мы представили лучшие примеры гиф-анимаций в рассылках. Примеры GIF в письмах В этой подборке собраны лучшие примеры использования GIF в письмах, где каждая анимация выполняет свою миссию. 1. Adidas (Источник: рассылка от Adidas) Adidas использовал анимацию в письме, чтобы показать, в каком еще цвете доступен данный товар. Выглядит аккуратно и просто, но при этом...

Дизайн Маркетинг
08 апреля 2021 · 17 мин читать
Дизайн подписи в письмах: 14 лучших примеров

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

Дизайн Маркетинг Шаблоны
Будьте всегда в курсе последних новостей в области email-маркетинга!