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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание Zapier Webhook

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

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

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

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

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

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

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

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

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

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

• теперь скопируйте URL-адрес нашего сервиса;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Важно:

Мы показали, как хранить данные на нашем Сервисе и во внешнем хранилище (Zapier). Но при желании вы можете использовать оба. Просто активируйте обе опции:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Это важно:

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

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

И вот еще что:

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

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

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

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

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

• открыть этот шаблон в своем аккаунте;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Готово.

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

Мы показали вам, как собирать отзывы с помощью AMP-форм. Но скоро это будет еще прощею

1. Сбор контактной информации пользователей

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

Как это можно будет сделаеть?

• просто перетащите блок «Форма», который мы скоро выпустим, в шаблон вашего письма;

• выберите соответствующий режим ввода текста;

• и собирайте информацию, которой пользователи захотят поделиться.

Вы даже сможете «дизайнить» эти формы.

2. Использование чекбоксов

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

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

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

В завершение

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