AMP Forms_Stripo_Featured Image_Blog
timer ~ 12 мин читать
44715 просмотры
оценить
04 июня 2020

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

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

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

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

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

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

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

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

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

Чекбоксы в письмах

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

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

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

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

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

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

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

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

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

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

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

Создание нового Сервиса данных _ UPD

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

Создание нового Сервиса данных

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

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

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

Конфигурация Сервиса данных

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

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

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

Выбор Stripo в качестве хранилища

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

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

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

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

Zapier как хранилище данных

Создание Zapier Webhook

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

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

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

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

Кнопка создания Zap

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

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

Создание вебхуков от Zapier

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

Выбор вебхука в качестве триггера

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

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

URL вебхука

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

Вставка ссылки вебхука Zapier

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

Конфигурация Сервиса данных

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

Замена дефолтной конечной точки на нужную

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

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

Пропуск тестування Zapier

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

Выбор Google Sheets

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

Выбор «Создать таблицу» в в качестве действия

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

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

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

Предоставление Zapier доступа к вашему Google Drive

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

Zapier выбирает Goole Drive в качестве своего аккаунта

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

Моя таблица

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

Кастомизация таблицы

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

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

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

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

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

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

Успешный тест

Важно:

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

Использование двух сервисов данных

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

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

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

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

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

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

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

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

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

6 мин читать

32638 просмотры 4

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

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

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

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

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

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

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

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

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

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

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

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

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

Редактирование AMP-модулей в Stripo

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

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

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

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

Вставка кода встраивания в шаблон

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

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

Это важно:

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

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

И вот еще что:

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

Merge-теги в Google Sheets

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

Тестирование AMP-форм _ Google Sheets

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

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

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

Шаблон Stripo со встроенными AMP-формами

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

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

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

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

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

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

     

Шаг 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 в качестве надежного отправителя

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

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

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

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

Список сервисов

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

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

Скачивание CSV-файлов

Готово.

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

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

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

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

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

Напоминаем

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

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

В завершение

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

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

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

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

Дизайн Маркетинг Шаблоны
best-fonts-for-email-cover-image-stripo
24 мая · 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-маркетинга!