Дизайн Шаблоны How-to AMP
~ 9 мин читать
3 комментарии
5612 просмотры
оценить
15 июня

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

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

Привет всем.

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

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

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

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

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

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

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

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

Опросник АМР

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

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

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

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

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

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

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

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

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

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

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

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

Adding-a-Prebuilt-Module-with-AMP-Questionnaire-into-EmailЗдесь вы можете редактировать цвета текста вопроса, фона и полей с ответами.

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

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

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

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

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

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

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

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

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

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

  • “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.

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

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

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

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

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

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

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

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

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

reating New Data Source for Questionnaires_RU

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

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

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

Building a New Data Service

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

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

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

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

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

Structure_Code_Ru

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

Вставляем Ссылки Endpoints

  • готово.

Шаг 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” в верхнем правом углу;

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

Getting Shareable Link to AMP Version of Emails

Напоминаем

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

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

В завершение

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

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

Andre Luiz Daleffi 3 месяца назад

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 3 месяца назад

Ps.: tried with Gmail

Анна Кузнецова прокомментировал Andre Luiz Daleffi 3 месяца назад

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.

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

← Предыдущие статьи Следующие статьи →
9 дней назад · 18 мин читать
10 лучших рассылок, которые вдохновят вас в 2020-2021

В предыдущей публикации мы рассказывали, как сделать вашу первую емейл-кампанию успешной и как улучшить текущие кампании при помощи 10 простых шагов. А сегодня мы хотели бы показать вам наилучшие (на наш взгляд) примеры емейл-рассылок, которые смогут вдохновить вас. 1. Brighton Тема: Обмен сумок – время отдавать и время получать. Каждая рассылка, созданная этой компанией – шедевр. Элегантный, красивый, обращенный к сильным эмоциям. Но это сообщение является еще и примером социального маркетинга. Очень важно напомнить людям, что хорошо не только иметь,...

Дизайн Маркетинг Шаблоны
16 октября · 11 мин читать
Идеи дизайна рассылок ко Дню Благодарения

Как сделать письмо ко Дню Благодарения и убедить получателей открыть его? Здесь вы найдете ответы на эти вопросы. С этим шаблоном вы создадите праздничную рассылку быстрее Использовать Идеи дизайна ко Дню Благодарения Принято считать, что письмо с простым дизайном может быть эффективным, если в нем есть какое-то супер-сообщение или гипер-щедрое предложение. Но за неделю или пару недель до Дня Благодарения папки «Входящие» у ваших клиентов будут переполнены письмами от конкурентов, чьи предложения и сообщения могут быть не хуже, чем у вас. Поэтому...

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