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

Привет всем.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• введите «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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• готово.

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

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

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

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

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

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

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

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

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

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

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

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

Это важно:

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

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

Чтобы получить эту ссылку, сделайте вот что:

• перейдите в режим предварительного просмотра;

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

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

Напоминаем

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

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

В завершение

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