Первые шаги
Отслеживание событий и поведения
Пользовательские данные
- Как добавить анкорные ссылки в емейл
- Настройка Smart-элементов
- Сквозные модули для одновременного обновления всех писем
- Оформление промовкладки для Gmail в письме
- Создание футера в адаптивном редакторе
- Всё для адаптивности в редакторе
- Редактирование HTML и CSS
- Работа с блоком "Баннер"
- Обзор адаптивного email-редактора eSputnik
- Как добавить Rollover в письмо
- Добавление блока "Видео"
- Работа с блоком "Меню"
- Работа с блоком "Картинки"
- Работа с блоком "Соц.сети"
- Как добавить таблицу в письмо?
- Библиотека блоков (Модули)
- Как добавить фон в редакторе
- Добавление пользовательских шрифтов в email-редакторе
- Как вставить кастомные социальные иконки в письмо
- Как создать кнопку CTA
- Создание оформления для письма
- Работа с блоком “Таймер"
Омниканальность
- Настройка универсальных ссылок (deeplinks & Universal links)
- Планирование мобильных push-уведомлений
- Настройка аналитики доставляемости и кликов
- Управление ключами доступа к мобильному SDK
- Создание мобильных push-сообщений
- Отчеты по мобильным push-рассылкам
- Создание и интеграция Google проекта для Mob Push
- SDK для мобильных приложений
- Подключение мобильных приложений к eSputnik
- Service Worker. Устранение неполадок
- Создание welcome цепочки для web-push уведомлений
- Как настроить подписку на Web Push
- Создание web-push-уведомлений
- Инструкция по подключению Safari web push
- Создание Google проекта для сбора web-push токенов
- Персонализация веб-пушей данными из веб-активности пользователя
- Создание веб-формы для сайтов
- Отправка событий из форм подписки в Google Analytics
- Как настроить информер для вашего сайта
- Создание pop-up-форм с помощью Google Tag Manager или WordPress
- Настройка pop-up виджета для сайта
- Настройка плавающего окна для сайта
- Создание кнопки вызова виджета
- Настройка виджета возрастного ограничения
Автоматизация
- Настройка формы подписки и двойного подтверждения
- Как настроить автоматическое поздравление с Днем рождения
- Согласование переменных события со сценарием на примере сценария "Заказ доставлен"
- Сегментация триггерных писем по дополнительным полям
- Запуск сценария после импорта контактов
- Контроль триггеров
- Как привязать сценарий к кнопке
- Устранение неполадок в работе сценариев
- Как настроить автоматическую реактивацию подписчиков и клиентов
- Настройка сценария для опросов и сбора отзывов
- Как отправить рассылку непрочитавшим
- Создание регулярного сценария для группы (видео)
- Создание welcome-цепочки для email-сообщений
Персонализация
- HTTP-запрос для передачи промокода из сообщения в карточку контакта
- Принципы генерации промокодов с помощью PHP/JAVA
- Подстановка промокода с использованием API
- Загрузка промокодов для использования в сценарии
- Подстановка промокода с помощью персонализации
- Подстановка промокода из файла
- Генерация промокодов в сценарии
- Отправка промокода с помощью препроцессора
Аналитика
- Настройка визуализации дохода от рассылок
- Отслеживание эффективности рассылок в Google Analytics
- Отчет по AMP-рассылке
- Отчет по Viber-рассылке
- Как корректно открыть CSV-файл после экспорта
- Отчёт по email-рассылке
- Отчеты по мобильным push-рассылкам
- Настройка передачи UTM-меток
- Отчет по Web-push рассылке
- Отчет по SMS-рассылке
Мультиязычность
API
- API-ключи
- Ресурсы API для добавления контактов
- Использование API-ресурса Send prepared message
- Получение рекомендаций по API ресурсом Contact recommendations based on web tracking
- Использование API-ресурса Generate event
- Интеграция с API – частые вопросы
- Передача заказов с помощью ресурса Generate event
Смена системы
Документы
Интеграция
Работа с блоком "Баннер"
Как создать баннер для рассылки, когда под рукой нет Photoshop, а в команде - дизайнера? Легко! Вы можете создать баннер прямо в письме, не используя сторонние графические редакторы. Давайте разберем на примере email рассылки для туристической компании, как это сделать
Создание баннера для емейл-рассылки
Для начала нам нужно создать структуру и выбрать блок ”Баннер” на вкладке “Контент”:
Перетаскиваем этот блок в тело письма:
Подготовьте фон
Основа любого баннера - картинка. Для нашего примера подберем заманчивое изображение моря. Вы можете использовать встроенный фотобанк и искать картинку по ключевому слову:
А можете подобрать подходящее изображение в сети и загрузить его по ссылке на картинку или просто перетянув его в указанное место:
Будьте внимательны - допускается изображение размером не больше 2 Мб, для быстрой загрузки в письме и корректного отображения на всех устройствах.
После загрузки изображения есть возможность показать его частично или полностью, с помощью форм-фактора:
Эта функция определяет внешний вид будущего баннера, который может быть вертикальным, квадратным и горизонтальным:
- вертикальный увеличивает размер баннера по вертикали,
- квадратный делает баннер равномерным,
- горизонтальный - оставляет изображение пропорционально письму.
К изображению можно применить любой из фильтров на выбор:
Обязательно прописывайте ссылку на сайт или акцию, которую рекламирует баннер в email-рассылке, чтобы сделать его кликабельным. Также внесите альтернативный-текст в соответствующее поле - он отобразится, если картинка не покажется в письме.
На баннер можно поставить одно дополнительное изображение, например ваше лого:
Изображение можно разместить в любой части баннера в произвольном порядке или придерживаясь симметрии. Зажав Shift на клавиатуре, изображение можно перемещать по обозначенным сеткам:
Не забудьте включить соблюдение пропорций, если будете масштабировать второе изображение:
Вы можете разместить второе изображение в любой части баннера:
Содержимое баннера
Когда фон подготовлен, подумайте, какой призыв вы хотите разместить. Помните, что баннер в емейл-рассылке должен вызывать интерес, поэтому текст на нём должен быть емким, коротким и вызывать интерес к прочтению письма.
Если нужно создать баннер, как в примере - будьте готовы к тому, что придётся его порезать на части, чтобы отдельно были активными соответствующие ссылки "Парни" и "Девушки". Но давайте, рассмотрим более простые примеры, когда в картинку зашита всего одна ссылка на общую категорию.
В редакторе eSputnik есть возможность добавлять текст прямо на изображение:
Текстовый контейнер можно перемещать по всей площади баннера:
Подберите шрифт
Вы можете использовать 1-2 шрифта на одном баннере, чтобы сделать акцент и подчеркнуть выгоду вашего предложения. В системе шрифты разделены на несколько групп:
- стандартные
- нестандартные
- шрифты баннера
Стандартные и нестандартные шрифты отображаются как для латиницы, так и для кириллицы. Шрифты баннера могут быть отображены только для букв латинского алфавита.
Важно:
после создания баннера он становится цельным изображением, поэтому не бойтесь экспериментировать - все шрифты будут отображены у пользователя как вы и задумывали.
Примеры использования баннера в рассылках
Давайте на примерах рассмотрим, как можно с помощью баннера оживить письмо.
Начинать создание баннера необходимо с формулировки того, что же рекламирует баннер, и придумывания хорошего призыва. Плохой призыв не спасет даже самая красивая иллюстрация. Придумав тему, подбираем подходящее изображение.
1. Иллюстрация к статье
Такой баннер состоит из трех элементов: картинки, дополнительного изображения и текста
Дополнительное изображение в данном примере - полупрозрачный прямоугольник, для того, чтобы выделить текст:
И сам блок с текстом:
Ссылка на таком баннере ведет именно на ту статью, что анонсируется в рассылке.
2. Баннер как шапка в письме
Баннер может выполнять функцию хедера в письме. Разместите логотип на подходящем фоне, добавьте краткое описание или слоган компании - и хедер готов.
3. Продающий баннер
Такой баннер должен содержать в себе суть вашего предложения и призыв к действию
Он состоит из трех элементов:
- Базовой картинки
- и двух текстовых блоков
Как видите, ничего сложного. Даже не приходится выходить из письма или пользоваться сторонними сервисами, чтобы сделать красивой новостную или проморассылку.
Подведем итог
- С помощью нашего редактора вы сможете создавать баннер для рассылки, не прибегая к помощи графического редактора.
- Все необходимые элементы встроены в редактор.
- Вы можете редактировать любые слои изображения и применять эффекты в блоке «Баннер».