Дизайн Структура Шаблоны How-to AMP
~ 12 мин читать
7295 просмотры
оценить
04 июня

Сервис данных, или как создавать AMP-формы с помощью Stripo

Stripo / Blog / Сервис данных, или как создавать AMP-формы с помощью Stripo

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

Вступление: в чем преимущества AMP-писем

Довольно часто мы просим пользователей оценить нас, оставить отзывы или комментарии, мы просим их поделиться информацией о возрасте, половой принадлежности и т. д. Поэтому формы опросов и анкеты — неотъемлемые элементы email-маркетинга.

Причем здесь вообще AMP? Как показали проведенные нами тесты, конверсия AMP-писем в пять раз выше, чем у традиционных писем в формате HTML.

Submitting Feedback

Узнав результаты, мы поспешили поделиться ними в вами. 

Сервис Stripo: для чего и как его использовать?

Используя революционные AMP-формы, вы можете собирать электронные адреса и номера телефонов клиентов, использовать чекбоксы и даже измерять индекс потребительской лояльности (NPS) — и все это делается непосредственно в электронных письмах.

Checkboxes in Emails

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

Но мы в Stripo позаботились об этом. Теперь вы можете всего в несколько кликов и без навыков кодирования создавать сервисы, на которых будете хранить ответы всех своих пользователей. И эти сервисы доступны в режиме 24/7!

И прямо сейчас мы создадим сервис и используем его для рассылки с AMP-формой.

Готовы? Попробуем вместе…

Шаг 1. Создание нового сервиса

Обратите внимание, что можно либо использовать наш сервис, либо встроить любой внешний endpoint — даже тот, который вы создали в Zapier.

Способ 1. Выбираем Сервис Данных Stripo

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

Итак, что нам нужно сделать для создания нового сервиса в Stripo:

  • в аккаунте Stripo перейти во вкладку «Данные», расположенную в левой части экрана;

  • в новом окне выбрать вкладку «Сервисы»;

Data Service Ru

  • нажать кнопку «+ Создать сервис»;

Creating New Service_RU

  • появится окно настройки сервиса. Здесь мы просто даем сервису имя (обязательно) и вводим его краткое описание (опционально);

  • все остальные поля заполняются автоматически;

  • скопировать URL-адрес для наших дальнейших рассылок;

Configuring Data Service_RU

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

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

  • включите «Хранилище Stripo» в этой вкладке.

Data Storage_RU

Способ 2. Выбор Zapier в качестве хранилища данных

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

  • выбрать «Внешние хранилища»;

  • вставить ссылку вашего Zapier Webhook — мы создадим его прямо сейчас.

Pasting Zapier URL

Создание Zapier Webhook

Zapier предлагает широкий ассортимент zaps (подключений).

Я собираюсь сохранять все ответы клиентов в Google Sheets, соответственно, мне нужно подключить Stripo к Zapier, а Zapier — к моему Google Drive.

Давайте это сделаем:

  • в аккаунте Zapier в верхнем левом углу нажмите кнопку “Make a Zap”;

The Make a Zap Button

  • дайте ему название;

  • во вкладке “1. When this happens” выберите “Webhooks by Zapier”;

Creating Webhooks by Zapiet

  • в качестве триггера выберите “Catch hook”;

Zapier Webhooks

  • нажмите “Continue”, чтобы продолжить;

  • в новом окне кликните Custom Webhook URL, который Zapier только что сгенерировал для вас;

Webhook URL

  • после чего вернитесь в Stripo и вставьте эту ссылку в соответствующее поле;

Pasting Webhook URL_RU

  • теперь скопируйте URL-адрес сервиса, созданного нами в самом начале раздела «Способ 2»;

URL Address_Zapier_Stripo Data Service

  • вставьте его в код шаблона — вам нужно заменить существующую ссылку на URL-адрес сервиса;

Replacing-default-end-point-with-Necessary-One

  • теперь давайте вернемся в Zapier;

  • здесь мы пропускаем (Skip) тесты и нажимаем “Continue”, чтобы продолжить, потому что нам пока что нечего тестировать;

Skipping Zapier Test

  • на этот раз нам нужна вкладка “2. Do this”, в которой выберите “Google Sheets”, чтобы найти их, введите Google или Sheets в поле поиска;

Choosing Google Sheets

  • теперь нужно правильно выбрать событие Action — в нашем случае это “Create Spreadsheet Row”, то есть создание строки таблицы;

Выбираем в Запиер необходимое нам действие

  • нажмите “Continue”;

  • введите учетные данные вашего аккаунта Google;

  • дайте Zapier доступ к вашему Google Drive;

Giving Zapier Access to Your Google Drive

  • Zapier автоматически добавляет ваш аккаунт Google Drive в список. Вам даже не нужно ничего выбирать;

Zapier Chooses Goole Drive as Your Account

  • перед этим мы создали Google Sheet со всеми необходимыми столбцами. Моя задача — собрать оценки и отзывы. Кроме того, мне важно знать, кто из получателей нас оценивал. Итак, моя таблица выглядит следующим образом:

My Spreadsheet

  • настроим таблицу: нам нужно выбрать “Drive”, “Spreadsheet”, то есть созданный вами Google Sheet, и рабочий лист. Я выбираю “Sheet 1”, так как хочу хранить все данные на одной странице.

Customizing Spreadsheet

  • Zapier извлекает названия полей из вашей таблицы;

  • Zapier также подтягивает данные из вашей AMP-формы (как мы говорили выше, мы будем собирать электронные адреса, оценки и отзывы);

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

  • и нажать “Continue”, чтобы продолжить;

Customizing Google Sheets in Zapier

  • запустите этот тест, чтобы проверить, правильно ли установлено соединение;

  • если тест прошел успешно, нажмите «Готово» и включите Zap.

Successful Test

Важно:

Мы показали, как хранить данные в «Хранилище Stripo» и передавать их через Zapier в Google Sheets. Но при желании вы можете использовать оба способа. Просто активируйте сразу две опции:

Choosing Both Services As Data Storage

В таком случае, результаты кампании будут храниться как на стороне Stripo, так и в Google Sheets через Zapier.

Шаг 2. Работа с AMP-формами

Теперь, когда у нас есть endpoint, давайте приступим к созданию AMP-форм.

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

Вышеупомянутая форма будет работать только у тех получателей, чьи почтовики уже поддерживают AMP — то есть десктопные и мобильные версии Gmail и Mail.ru. Остальные подписчики увидят обычный HTML (он же резервный) вариант, который мы создадим немного позже.

Сегодня в Stripo есть три способа создания AMP-форм:

Способ 1. Использование блока АМР-Форма

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

Подробнее о том, как это сделать, мы рассказываем в нашей статье «Сервис данных».

6 мин читать

4442 просмотры 5

Как легко и быстро создавать AMP-формы в письмах Перейти

Способ 2. Встраивание AMP-компонентов от Google AMP dev

Google предоставляет AMP-компоненты для встраивания. Вы следуете инструкциям на соответствующей странице и вставляете свою форму в наш шаблон.

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

Способ 3. Использование модулей Stripo

А вот это уже намного проще.

Когда шаблон будет готов, вам нужно:

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

  • ввести «Форма» в поисковой консоли;

Adding AMP Forms from the Modules Section

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

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

Внимание: не вносите никаких изменений в ⚡HTML-часть этого модуля, так как это может повлиять на работу вашей AMP-формы.

  • кликните по ⚡HTML-части модуля, чтобы открыть его код;

Editing AMP Modules in Stripo

  • вставьте URL-адрес, который вы скопировали при создании сервиса (см. Шаг 1);

  • вставляется он так, как показано в GIF-анимации ниже;

Inserting URL Address Into AMP Form

  • теперь эта форма будет собирать оценки и отзывы. Но мы хотим еще и знать, от кого они. Поэтому нам нужно вставить в нашу форму фрагмент кода, приведенный ниже, чтобы получить адреса этих подписчиков:

<input type="hidden" name="email" hidden value="%EMAIL|%">

Pasting Embed Code into Template

Размещать его нужно после </label>. 

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

Это важно:

Свяжитесь с вашим ESP по поводу merge-тега персонализации, предназначенного для отображения email-адресов. Мы используем eSputnik, поэтому в нашем случае это тег %EMAIL|%. Пожалуйста, не вносите никаких изменений в этот код.

  • письмо готово собирать оценки и отзывы ваших клиентов.

И вот еще что:

Вы можете тестировать эти формы даже в режиме предварительного просмотра. Если все сделано правильно, то в вашем Google Sheet будет заполнена следующая информация:

Merge Tages in Google Sheets

В таблице в столбце Email address мы видим merge-tag, поскольку тестировали форму в режиме предпросмотра. Но когда будем получать реальные фидбеки из почты коллег и пользователей, мы увидим адрес отправителя.

Testing AMP Forms_Google Sheets

Способ 4. Использование наших готовых шаблонов

Я считаю, что это самый простой способ использования AMP-форм в письмах. Но это сейчас! А в ближайшее время мы выпустим Drag-n-Drop блок AMP-формы — об этом мы расскажем чуть позже.

Итак, для использования наших шаблонов вам нужно:

Stripo Template with Embedded AMP Forms

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

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

  • кликните форму ⚡HTML в шаблоне;

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

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

Pasting-End-Point-in-Email

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

     

Шаг 3. Создание резервного варианта

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

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

Резервный вариант 1: Сбор оценок

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

  • если вы предлагаете поставить оценку от 1 до 5, перетащите в свой динамический шаблон структуру с 4 контейнерами;

  • включите отображение структуры только для HTML-версии;

  • добавьте в эту структуру еще один контейнер;

  • выровняйте контейнеры;

Adding Structures with 5 Containers

  • загрузите в контейнеры изображения с цифрами — «1», «2», «3», «4», «5»;

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

Fallback Rating

  • подставьте соответствующие URL-адреса к каждому изображению.

Ваш ESP предоставит вам общее количество кликов по каждой «оценке».

Резервный вариант 2. Оценивание

Вы можете просто спросить у пользователей, довольны ли они вашими товарами, предложив выбор из трех вариантов: «Плохо», «Хорошо» и «Отлично».

Rating Products_Fallback with Three Option

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

Резервный вариант 3. Ссылка на внешний ресурс

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

Вы создаете форму опроса на своем сайте либо с помощью Google Forms.

Сделав это и получив ссылку на опрос, вы:

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

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

  • задаете дизайн вашей кнопке;

  • прикрепляете к кнопке свой URL-адрес;

  • пишете на кнопке четкий текст CTA;

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

Fallback Forms

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

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

И только AMP HTML-формы или резервные HTML-варианты будут отображаться лишь в соответствующих версиях.

Шаг 4. Предварительный просмотр ваших писем

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

Чтобы отправлять тестовые AMP в Gmail прямо из Stripo, добавьте наш адрес — info@stripo-test.email — в качестве доверенного отправителя.

Adding-Stripo-As-Trusted-Sender

Подробную информацию о предпросмотре рассылок вы найдете в статье «Предварительный просмотр и отправка тестовых писем в Stripo».

Шаг 5. Проверка результатов

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

Найдите сервис, который вы ранее создали.

Data Service Report_RU

Как видим, он показывает количество запросов по каждому сервису и время последнего запроса.

Нажмите кнопку «Скачать файл CSV».

Downloadng CSV Files_RU

Готово.

В ближайшем будущем

Вы сможете использовать чекбоксов в письмах.

Мечты сбываются :)

Добавление чекбоксов и рейтингов без навыков кодирования? Очень скоро вы сможете это делать!

Forms with Checkboxes

Следите за нашими новостями ;)

Напоминаем

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

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

В завершение

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

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

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

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

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

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

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