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

Источник данных Stripo, или как использовать динамический контент в рассылках

Stripo / Blog / Источник данных Stripo, или как использовать динамический контент в рассылках

Внедрение геймификации и обновление контента рассылок в режиме реального времени, а также возможность выбирать и подтверждать время встречи непосредственно в письмах — все это динамический контент. Реализовать его можно с помощью компонента amp-list.

В мае этого года мы разослали серию писем-викторин. Результаты таких кампаний показали, что технология AMP, примененная вместе с геймификацией, оказывает позитивное влияние на CTOR (соотношение открытий и кликов). Наши подписчики взаимодействовали с контентом в AMP-рассылках в полтора раза активнее, чем в обычных HTML-письмах.

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

Да, все это требует времени. Но чтобы сделать вашу работу комфортнее, мы только что выпустили новый функционал — «Источники данных».

Источники данных Stripo: для чего это нужно?

Письма на основе AMP содержат динамический контент. И здесь довольно часто возникает потребность в компонентах amp-list.

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

Источник данных Stripo:

  • настраивает хедеры CORS, необходимые для AMP-писем;

  • создает endpoint для каждой кампании, содержащей компоненты AMP.

Мы делаем все, чтобы помочь вам создавать AMP-письма как можно быстрее.

Наши источники данных экономят часы, а иногда даже дни вашего времени при создании AMP-рассылок.

Использование источника данных Stripo

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

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

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

В разделе Данные выбираем вкладку Источники Данных

  • нажать кнопку «Подключите источник данных»;

Кнопка Подключить Источник Данных

  • в новом окне ввести всю необходимую информацию об этом конкретном соединении;

  • скопировать URL-адрес;

Конфигурация Источника Данных

  • вставить файл JSON, который вы подготовили заранее (или тот, который мы создадим вместе), во вкладку JSON;

Раздел JSON в Окне Настройки Источника Данных

  • готово.

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

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

Каждый раз при публикации новых статей или видео в своем блоге нужно редактировать JSON, чтобы эти обновления добавились в рассылки. Но в самих письмах ничего изменять не надо. Stripo передает эти изменения и обновления в ваши рассылки через endpoint (URL-адрес, который мы с вами сейчас создадим). Он поменяет изображения, текст и все остальное. То есть вам не придется редактировать или заменять приветственные письма в вашем ESP.

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

Использование компонентов amp-list в сфере eCommerce позволяет показывать в приветственных и промо-рассылках самые популярные товары.

Создание файла JSON

Перед настройкой JSON вам необходимо определиться с задачей своего amp-list.

Я хочу отправлять в приветственных письмах свежие статьи моего блога (ниразу не тщеславие, правда?)

В качестве основы для нашего файла JSON мы используем фрагмент кода, предоставленный Google.

{

  "items": [

    {

      "title": "AMP YouTube Channel",

      "url": "https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw"

    },

    {

      "title": "AMP Start",

      "url": "https://ampstart.com/"

    }

  ]

}

Часть файла JSON, приведенная ниже, повторяется. Вы можете вставлять его столько раз, сколько потребуется.

Повторяющийся Элемент JSON

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

Вы можете редактировать файл JSON в любом текстовом редакторе или в приложении Sublime Text.

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

Итак, я хочу, чтобы наши подписчики увидели:

  • титульное изображение/шапку статьи;

  • название статьи;

  • краткое описание;

  • кнопку «Читать дальше».

Вот JSON, который я собираюсь использовать для приветственных писем:

{
  "items": [
    {
      "title": "20 цепляющих тем и маркетинговых идей ко Дню Отца",
      "url": "https://stripo.email/blog/20-catchy-fathers-day-email-subject-lines-marketing-ideas/",
      "imgUrl": "https://stripo.email/photos/shares/Blog/Stripo-Fathers-Day-Featured-Image.jpg",
      "text": "Согласно исследованиям NRF, в 2019 году жители США потратили более 16 миллиардов долларов на подарки ко Дню Отца."
    },
    {
      "title": "AMP-письма: 10 способов использования технологии AMP",
      "url": "https://stripo.email/blog/ways-to-use-amp-in-emails/",
       "imgUrl": "https://stripo.email/photos/shares/Blog//AMP_Ways-to-Use-AMP_Stripo_Featured-Image.png",
      "text": "Эффективность AMP — уже доказанный факт. В частности, конверсия повышается как минимум в ПЯТЬ раз"
    }
  ]
}

Где:

  • title — название поста в блоге;

  • url — ссылка на этот пост в блоге;

  • imgUrl — ссылка на титульную картинку/шапку статьи;

  • text — краткое описание/аннотация.

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

Весь текст в кавычках после двоеточий нужно заменить вашим контентом. Сделайте это вручную.

Например:

  • "title": “заголовок статьи в вашем блоге”;

  • “URL”: “ссылка на вашу статью”,

  • “imgUrl”: “ссылка на изображение”;

  • "text": “аннотация/описание”.

Важно:

Кавычки в коде не менять на наши «ёлочки» — оставляем как есть.

И просто вставьте свой код во вкладке JSON в источнике данных Stripo.

Вставляем JSON в Качестве Источника Данных

Создание динамических писем с компонентами amp-list

Теперь, когда у нас есть URL-адрес, который на самом деле называется endpoint, мы можем встраивать его в наши приветственные письма.

Шаг 1. Создание приветственного письма

Правильно, в первую очередь нам нужно подготовить собственно письмо.

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

В моем случае будет следующая структура:

Дизайн Блогового Блока в Письме

  • титульное изображение/шапка;

  • название;

  • аннотация;

  • кнопка.

Очень важно правильно настроить размер для титульной картинки — пропорции здесь можно задать только один раз.

Убедитесь, что все элементы принадлежат к одной и той же структуре.

Шаг 2. Встраивание endpoint

Это самая интересная часть...

Хотя все не так сложно, как кажется вначале.

Главное — четко придерживайтесь нашей пошаговой инструкции, и тогда ваша рассылка будет работать:

  • первым делом вам нужно получить код только что созданной структуры. Для этого кликните иконку «Структура» в шаблоне, после чего откройте редактор кода;

  • скопируйте фрагмент кода, который начинается с <table width="100%" cellspacing…>;

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

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

  • дважды кликните по этому блоку в шаблоне, чтобы открыть его код;

Открываем Блок HTML

  • вставьте элемент кода, который скопировали на предыдущем шаге;

  • после чего в самом верху добавьте в код блока вот этот фрагмент:

<amp-list layout="fixed-height" height="360" width="auto" src="https://stripo.email/emailformdata/v1/list/ecxs/stripo-welcome-emails">

<template type="amp-mustache">

Где:

https://amp.stripo.email/v1/list/haig/welcome-emailsstripo-1 — это endpoint, который мы недавно сделали в разделе «Создание файла JSON»;

Вставляем АМР-код в Код Структуры

  • вставьте закрывающие теги (ниже) в конце кода вашего блока;

</template>
</amp-list>

Закрывающие Теги в Низу Структуры

  • выделенная часть кода, относящаяся к титульной картинке/шапке статей,

Code to Replace in the Code Editor_Stripo Source

должна быть заменена вот этим фрагментом:

<a href="{{url}}" target="_blank">
<amp-img width="540" height="180" alt="{{title}}" src="{{imgUrl}}" layout="responsive">
</amp-img>
</a>

(Не забудьте настроить оптимальную ширину и высоту вашего изображения).

Важно:

Вам не нужно вставлять какие-либо другие скрипты в <head> письма. Stripo добавляет всё автоматически.

Это необходимо для показа изображений в AMP-письмах.

  • а теперь, пожалуйста, замените все ссылки после <a href> на {{url}} — важно, чтобы они были в кавычках! И не убирайте фигурные скобки;

  • ссылка после src должна быть заменена на {{imgUrl}};

  • альтернативный текст для изображения должен быть заменен на {{title}};

  • аннотацию, она в коде белым цветом, следует заменить на {{text}} — пожалуйста, не добавляйте здесь кавычки;

  • вот так выглядит мой готовый код:

Финальный вариант моего кода

  • проверьте себя: единственная реальная ссылка, содержащаяся в вашем коде — это и есть ваш endpoint;

  • все остальные данные будут получены из вашего JSON;

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

Включать в AMPHTML

  • проверьте шаблон в режиме предпросмотра — если все сделано правильно, то вы увидите в письме свои статьи.

АМР-версия письма со свежими блоговыми статьями

Это важно:

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

Шаг 3. Создание резервного варианта/HTML-версии

Сделать его можно разными способами. Мы покажем только два самых популярных:

Способ 1. Отображение самых популярных либо самых полезных статей блога.

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

Приветственное письмо от Zapier

(Источник: приветственное письмо с популярными интеграциями от Zapier)

В разделе «Шаг 1» мы создали приветственное письмо с блоком «Публикации блога».

Нужно лишь убедиться, что он будет отображаться только в HTML-версии вашего письма:

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

  • на панели настроек активируйте опцию «Включать в HTML».

Включить Структуру в HTML

Способ 2. Отправка пользователей на ваш сайт

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

Письмо от Warner Bros

(Источник: приветственное письмо от Warner Bros Games с приглашением перейти на сайт, чтобы увидеть полный каталог).

Создание соответствующего блока контента

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

  • настройте дизайн на ваше усмотрение;

  • введите соответствующий текст CTA;

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

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

  • кликните иконку «Структура» в шаблоне;

  • включите отображение этой структуры только в режиме HTML (как показано в разделе «Способ 1»).

Напоминаем

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

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

В завершение

Используя amp-list, вы можете внедрять геймификацию и показывать только самый свежий контент в режиме реального времени (например, свободные часы для встреч и демо, доступные на складе модели товара, новейшие публикации и т. д.)

Источники данных Stripo помогут создать динамические рассылки с amp-list без необходимости настраивать хедеры CORS и подключать письма к вашему серверу — мы сделаем это всё за вас.

Создавать AMP-рассылки с нами намного проще!

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

Предыдущие статьи Следующие статьи
Greatest Examples of GIF animations in Emails_Cover Image
27 октября 2021 · 10 мин читать
Гиф-анимации в письмах: 16 лучших примеров

Гифки отлично будут смотреться в ваших письмах, если вы хотите продемонстрировать продукт, привлечь внимание пользователей к какому-либо элементу письма или же просто ненавязчиво украсить текст. В этой статье мы представили лучшие примеры гиф-анимаций в рассылках. Примеры GIF в письмах В этой подборке собраны лучшие примеры использования GIF в письмах, где каждая анимация выполняет свою миссию. 1. Adidas (Источник: рассылка от Adidas) Adidas использовал анимацию в письме, чтобы показать, в каком еще цвете доступен данный товар. Выглядит аккуратно и просто, но при этом...

Дизайн Маркетинг
24 сентября 2021 · 18 мин читать
Лучшие шрифты для рассылок: советы и хитрости

Одна из самых серьезных проблем при создании электронных писем — правильно выбрать шрифт. Вес, высота, ширина, цвет, форма, интервал… Все ли здесь имеет значение? Да, важно все, но самое главное — выбрать читабельный шрифт. В этой статье мы расскажем, как выбрать лучший профессиональный шрифт для рассылки. Stripo делает работу со шрифтами писем очень простой Начать Шрифты HTML-писем: основные правила, которые нужно соблюдать При выборе оптимального шрифта следует учитывать три базовых правила: 1. Не используйте более двух шрифтов Если вы используете...

Дизайн Шаблоны
08 апреля 2021 · 17 мин читать
Дизайн подписи в письмах: 14 лучших примеров

Хорошие подписи в письмах помогают нам развивать бизнес и производить хорошее впечатление на клиентов. И поскольку это последний элемент, который люди видят в письмах, нам нужно сделать подписи креативными и запоминающимися. Давайте рассмотрим лучшие примеры подписей и их правильное использование в письмах и шаблонах рассылок. Стоит отметить, что профессиональные подписи с подробной контактной информацией нужны для любого бизнеса. Используйте этот шаблон, чтобы создавать подписи для рассылок быстрее Использовать Такой пример подписи хорошо подходит для юридических консультаций, банковского дела и т.д....

Дизайн Маркетинг Шаблоны
banner9
11 сентября 2020 · 15 мин читать
10 Лучших Бесплатных Редакторов Шаблонов Писем 2021

Все редакторы писем для вас на одно лицо? Вы не можете определиться, какой же из них выбрать для создания email-рассылок? Это неудивительно, ведь их так много. Мы хотим внимательно рассмотреть популярные редакторы, чтобы найти отличительные черты каждого. Для чистоты эксперимента я буду создавать в них шаблоны, используя один набор медиа файлов. Посмотрим, что из этого получится, и есть ли отличия между редакторами.  Для исследования мы выбрали Stripo, само собой разумеется, и его главных конкурентов: BEE Free, CampaignMonitor, EDM Designer, GetResponse, Mailchimp, MailStyler2,...

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