Первые шаги
Отслеживание событий и поведения
Пользовательские данные
- Обзор адаптивного email-редактора
- Создание оформления для письма
- Создание сквозных модулей
- Настройка адаптивности
- Настройка Smart-элементов
- Оформление промовкладки для Gmail
- Добавление Rolloverʼа
- Добавление фона в письмо
- Добавление анкорных ссылок
- Библиотека блоков (Модули)
- Добавление блока "Видео"
- Добавление таблицы в письмо
- Работа с блоком "Баннер"
- Добавление пользовательских шрифтов
- Добавление кастомных иконок соцсетей
- Работа с блоком "Соцсети"
- Создание кнопки CTA
- Редактирование HTML и CSS
- Робота с блоком "Изображения"
- Работа с блоком “Таймер"
- Настройка блока "Меню"
- Создание футера
Омниканальность
- SDK для мобильных приложений
- Управление ключами доступа к мобильному SDK
- Подключение мобильного приложения
- Создание Google проекта для Mob Push
- Создание мобильных push-сообщений
- Настройка аналитики доставляемости и кликов
- Планирование мобильных push-уведомлений
- Настройка универсальных ссылок (deeplinks & Universal links)
- Отчеты по мобильным push-рассылкам
Автоматизация
- Настройка дополнительных рассылок
- Двойное подтверждение подписки
- Приветственная серия
- Приветственная серия с сегментацией по категориям
- Запуск сценария после импорта контактов
- Регулярный сценарий для группы
- Поздравление с днем рождения
- Привязка сценария к кнопке
- Согласование переменных события со сценарием на примере сценария "Заказ доставлен"
- Сбор отзывов о заказе
- Реактивация клиентов и подписчиков
- Отправка рассылки непрочитавшим
Персонализация
- Подстановка промокода из файла
- Подстановка промокода с использованием API
- Принципы генерации промокодов с помощью PHP/JAVA
- Подстановка промокода с помощью персонализации
- Загрузка промокодов для использования в сценарии
- Генерация промокодов в сценарии
- Отправка промокода с помощью препроцессора
- HTTP-запрос для передачи промокода из сообщения в карточку контакта
Аналитика
- Отчёт по email-рассылке
- Отчет по AMP-рассылке
- Отчеты по мобильным push-рассылкам
- Отчет по SMS-рассылке
- Отчет по Web-push рассылке
- Отчет по Viber-рассылке
- Настройка передачи UTM-меток
- Визуализация дохода от рассылок
- Отслеживание эффективности рассылок в Google Analytics
- Как открыть CSV-файл после экспорта
Мультиязычность
Товарные рекомендации
API
Смена системы
Документы
Интеграция
Обзор адаптивного email-редактора
Работа в визуальном адаптивном редакторе eSputnik избавляет от рутины и экономит время маркетолога для сегментирования, аналитики, качественной персонализации писем. Ведь для создания емейлов в нашей системе не нужно знать HTML-код, верстка происходит простым перетаскиванием блоков.
В этой статье мы расскажем о возможностях drag'n'drop редактора и разберем его отдельные функции.
Где находится адаптивный редактор?
Нужно зайти в раздел “Сообщения” → “Создать email” и выбрать необходимый шаблон.
При клике на “Создать email” откроется перечень шаблонов.
После выбора подходящего шаблона он откроется в редакторе. Этот шаблон является стандартным, его нужно отредактировать в стиле своего сайта и под определенный тип рассылки: триггерное или промописьмо.
Слева находится основная панель, через которую можно внести изменения. Она состоит из вкладок:
- “Оформление” – в этой статье описано, как создать оформление письма.
- “Контент” – работа с ней описана в этом материале.
Вкладка “Контент”
Вкладка “Контент” включает три раздела:
- Структуры – позволяет задать количество элементов.
- Блоки – позволяет добавить элементы (меню, баннер, видео, соцсети и т. д.) в структуру.
- Модули – библиотека уже готовых и сохраненных структур и блоков.
С помощью конструктора можно легко выбирать элементы и выстраивать их в нужном порядке.
Полосы
Каждое письмо состоит из таких элементов: полоса, структура, контейнер.
Полосы объединяют и вмещают в себя блоки, структуры и контейнеры. Их можно перемещать, копировать, удалять и форматировать.
Панель редактирования внешнего вида полосы:
Для редактирования полосы можно:
- задать цвет фона;
- добавить фоновую картинку – есть разные способы: из банка картинок, загрузить уже подготовленную или вставить ссылку на внешний ресурс;
- обвести контент – задать отступы и цвет;
- скрыть полосу для десктопной или мобильной версии;
- включить/выключить полосу для HTML- или AMP-версии письма.
Структуры
Структуры могут содержать в себе только блоки, например: видео, картинки, текст, баннеры, кнопки, таймер и т. д. В зависимости от контента, который нужно сделать, выбирается соответствующая структура и перетаскивается на полосу. Структура может иметь от одной до четырех секций.
Все контентные блоки находятся во вкладке “Блоки”, они составляют важную часть редактора, именно с их помощью можно наполнять контент письма.
Чтобы выбрать блок, структуру или полосу, нужно кликнуть по элементу и перетащить в нужное место в письме.
Блоки
Рассмотрим элементы вкладки “Блоки”:
-
Шапка письма: логотип + меню
Оформленный в корпоративном стиле хедер делает письмо легко узнаваемым.
Чтобы создать хедер, нужно:
- Перетянуть в область письма на одну полосу две структуры;
- Перетянуть в первую структуру блоки “Картинка” и “Текст”.
- Перетянуть во вторую структуру блок “Меню”.
- Выбрать или загрузить подготовленную картинку. Далее для изображения нужно задать:
- размер и центрирование;
- альтернативный текст (он нужен для объяснения, что находится на картинке; это важно для чтения письма скринридерами или если у получателя отключена загрузка изображений; также Alt – важный параметр для почтовиков – по описанию система оценивает содержимое емейла);
- ссылку – рекомендуем делать лого кликабельным.
- Добавить название компании под логотипом;
- Написать необходимые пункты меню, задать цвет, шрифт, выравнивание, добавить ссылки.
-
Функции блока “Картинки”
Внести изменения в изображение можно непосредственно в самом редакторе eSputnik.
Встроенный редактор изображений в eSputnik:
Набор параметров при встраивании картинки в емейл:
- Rollover – эффект позволяет при наведении мыши на текущую картинку показать подписчику другую;
- Ссылка;
- Альтернативный текст;
- Выравнивание для десктопной и мобильной версии;
- Размер;
- Растягивание по ширине;
- Адаптивность картинки – позволяет изображению подстроиться под ширину экрана мобильного устройства;
- Отступы – для десктопной и мобильной версии;
- Анкорная ссылка – редко используется для картинок; якорные ссылки применяют, когда письмо получилось достаточно длинным, они позволяют получателю вернуться к нужному элементу в письме по клику на определенный элемент;
- Скрытие элемента – для десктопной или мобильной версии;
- Включение/отключение элемента для HTML- и AMP-версии письма;
- Привязка к событию – эта функция в основном используется для привязки сценария к кнопке, например “Подтвердил подписку”.
-
Создание баннера
Красивый баннер поможет удержать внимание пользователя и мотивировать его дочитать письмо до конца. Можно выбрать подходящий по элементам баннер из списка модулей и оформить в нужном стиле.
Есть несколько способов создания баннера непосредственно в редакторе.
- Загрузить готовую картинку, добавить на нее необходимый текст.
- Воспользоваться встроенным банком картинок (поиск выполняется по ключевому слову). Выбранная картинка добавляется в один клик, далее ее можно редактировать.
- Добавление URL-картинки из открытого источника и ее дальнейшее редактирование уже внутри сервиса.
Добавить текст на картинку для баннера можно несколькими способами:
- Добавление текста на картинку непосредственно через панель вверху (она открывается по клику на картинку в баннере).
Редактировать такой баннер можно после его конвертации в картинку. Например, заменить картинку, удалить/изменить текст. - Добавление текста в редакторе изображений.
Для этого нужно:
- выбрать пункт “Текст”;
- выбрать шрифт (в системе их 220, есть поиск);
- написать текст для баннера, для сохранения нажать “Применить” → “Сохранить”;
Изменить текст и шрифт в таком баннере после сохранения нельзя.
Чтобы баннер выглядел корректно для десктопной и мобильной версии, рекомендуем создать отдельный элемент для каждой из них. Например, мы создали еще один баннер с крупным текстом, который будет удобно читать на мобильном, и скрыли его для десктопной версии.
Аналогичные настройки нужны для баннера десктопной версии – скрыть его для мобильного.
Вид баннеров в обеих версиях:
-
Настройка таймера
Наличие таймера в емейле подталкивает получателей к быстрым целевым действиям. Для настройки таймера нужно задать:
- время старта и окончания;
- шрифт;
- вид разделителя чисел;
- подписи цифр;
- выравнивание (десктоп и мобильная версия).
Для каждого значения – день, час, минута, секунда – можно задать собственные настройки: цвет, шрифт, размер, регистр подписей.
По окончанию времени отсчета можно заменить таймер картинкой. Этот вариант нужен на тот случай, если подписчик откроет письмо после того, как акция закончится.
-
Добавление видео
Чтобы добавить видео в письмо, нужно:
- Добавить структуру, в нее поместить блок “Видео”;
- Добавить ссылку на видео (Youtube, Vimeo) в поле “Ссылка на видео”;
- Добавить титульную картинку – это необязательно, т. к. система автоматически подтянет обложку из видео, таким же образом пропишется альтернативный текст видео;
- Выбрать кнопку “Play”;
- Дальнейшие настройки видео аналогичны тем, что мы описали выше для картинок: можно задать выравнивание и размер, адаптивность картинки, скрытие элемента, добавление анкорной ссылки, включение/отключение элемента для HTML- и AMP-версии письма.
Поскольку HTML5 поддерживается не всеми почтовиками, видео в самом письме не воспроизводится. По клику на кнопку на видео в письме откроется видео на том ресурсе, где оно расположено (Youtube, Vimeo).
-
Карточка товара
Создать карточку товара можно самостоятельно или выбрать во вкладке “Модули” подходящую и отредактировать ее в стиле компании. Как внести изменения в картинку, текст, кнопку, мы описали выше.
Чтобы автоматизировать процесс создания карточки товара для каждого нового письма в системе eSputnik, можно использовать smart-элементы. Это структура/контейнер/полоса, в которых есть базовые блоки (картинка, текст, кнопка), данные которых подтягиваются из внешних источников. Достаточно один раз создать карточку товара и указать ссылки, откуда системе брать значения.
Для этого нужно выбрать элемент, например “Кнопка”, кликнуть по нему. Слева в боковом меню выбрать “к контейнеру”.
Дальнейшие настройки элементов происходят в блоке “Данные” → “Smart”, детали в этой статье.
-
Блок “Социальные сети”
Рекомендуем добавлять блок “Социальные сети” во всех письмах, т. к. это возможность привлечь внимание пользователя к другим каналам коммуникации с вашим бизнесом. В редакторе есть множество вариаций вида этого блока.
Для этого блока доступны те же настройки, что и для других элементов: указать ссылку, альтернативный текст; выбрать размещение блока, размер, выравнивание, отступы и т. д.
Этот блок можно создать самостоятельно, используя банк картинок или собственные изображения.
-
Блок HTML
Блок НТМL предназначен для добавления собственного HTML и CSS. При этом из всего адаптивного редактора будут доступны функции редактирования картинок и ссылок. Настройку адаптивности пользователь делает самостоятельно.
-
AMP-элементы
АМР-технология позволяет создавать рассылки, которые выглядят как автономные веб-страницы. Подписчик сможет выполнять действие прямо в письме: посмотреть ассортимент, забронировать встречу и т. д. Для этого используются разные формы. В системе eSputnik они уже подготовлены. Инструкции по их настройке: карусель, аккордеон, форма.