Первые шаги
Отслеживание событий и поведения
- Получение и установка скрипта веб-трекинга
- Настройка трекинга привязкой к селекторам сайта
- Настройка и использование веб-трекинга для персонализации контента на сайте и в рассылках
- Настройка Web Tracking методом отправки событий через JavaScript
- Передача данных о поведении посетителей сайта через REST API
Пользовательские данные
- Обзор адаптивного email-редактора
- Создание оформления для письма
- Создание сквозных модулей
- Настройка адаптивности
- Настройка Smart-элементов
- Оформление промовкладки для Gmail
- Добавление Rolloverʼа
- Добавление фона в письмо
- Добавление анкорных ссылок
- Библиотека блоков (Модули)
- Добавление блока "Видео"
- Добавление таблицы в письмо
- Работа с блоком "Баннер"
- Добавление пользовательских шрифтов
- Добавление кастомных иконок соцсетей
- Работа с блоком "Соцсети"
- Создание кнопки CTA
- Редактирование HTML и CSS
- Робота с блоком "Изображения"
- Работа с блоком “Таймер"
- Настройка блока "Меню"
- Создание футера
Омниканальность
- SDK для мобильных приложений
- Управление ключами доступа к мобильному SDK
- Подключение мобильного приложения
- Создание Google проекта для Mob Push
- Создание мобильных push-сообщений
- Настройка аналитики доставляемости и кликов
- Планирование мобильных push-уведомлений
- Настройка универсальных ссылок (deeplinks & Universal links)
- Отчеты по мобильным push-рассылкам
Автоматизация
- Запуск сценария после импорта контактов
- Двойное подтверждение подписки
- Приветственная серия
- Запуск Welcome-серии для разных категорий
- Регулярный сценарий для группы
- Поздравление с днем рождения
- Привязка сценария к кнопке
- Согласование переменных события со сценарием на примере сценария "Заказ доставлен"
- Сбор отзывов о заказе
- Реактивация клиентов и подписчиков
- Отправка рассылки непрочитавшим
- Контроль триггеров
- Если сценарий не работает
Персонализация
- Подстановка промокода из файла
- Подстановка промокода с использованием API
- Принципы генерации промокодов с помощью PHP/JAVA
- Подстановка промокода с помощью персонализации
- Загрузка промокодов для использования в сценарии
- Генерация промокодов в сценарии
- Отправка промокода с помощью препроцессора
- HTTP-запрос для передачи промокода из сообщения в карточку контакта
Аналитика
- Отчёт по email-рассылке
- Отчет по AMP-рассылке
- Отчеты по мобильным push-рассылкам
- Отчет по SMS-рассылке
- Отчет по Web-push рассылке
- Отчет по Viber-рассылке
- Настройка передачи UTM-меток
- Визуализация дохода от рассылок
- Отслеживание эффективности рассылок в Google Analytics
- Как открыть CSV-файл после экспорта
Мультиязычность
API
Смена системы
Документы
Интеграция
Настройка адаптивности
1. Настройка адаптивности через вкладку “Оформление”
Настройка адаптивности происходит во вкладке “Оформление”, которая предназначена для создания общего стиля всего письма.
Чтобы настраивать адаптивность емейла, нужно включить функцию адаптивности в разделе “Оформление” → “Общие”.
Далее нужно перейти в последний пункт этой вкладки:
Важно: настройки, которые открываются на этой вкладке, будут срабатывать в мобильной версии письма в почтовых клиентах, поддерживающих адаптивность.
1. Размер текста
Находится во вкладке “Оформление” → “Адаптивность”. Здесь можно задать настройки текста и заголовков для отображения на мобильных устройствах.
В редакторе eSputnik по умолчанию указан оптимальный размер шрифта для элементов.
Для десктопной версии писем для текста чаще всего используется шрифт 14 px. Но на экране мобильного устройства он будет слишком мелким, поэтому оптимальным будет шрифт размером не менее 16 px.
Для заголовков не рекомендуется использовать слишком большой шрифт, т. к. он может занимать 3-4 строки. Заданный здесь размер шрифта будет приоритетнее, чем тот размер, который задан на вкладке “Контент” (это относится и к размеру ссылок).
2. Кнопки
Размер текста на кнопке и размещение кнопки в мобильной версии письма также можно задать отдельно.
Для мобильной версии можно изменить внешние отступы, внутренние останутся такими же, как и для десктопной версии.
На кнопку можно поместить иконку. Но эта функция не поддерживается в Windows Outlook 2002, 2007, 2010, 2013, 2016, 2019.
3. Общие отступы
Отступы для текста и картинки можно настроить для десктопной и мобильной версии отдельно с помощью переключения иконки “На мобильной версии”.
2. Настройка отдельных блоков
1. Карточка товара
Настройка карточки товара происходит через раздел “Контент” → “Структуры”, по клику на карточку товара слева откроется раздел, в котором можно включить адаптивность, а также вносить другие изменения: добавить картинку, ссылку, выравнивание, отступы и т. п.
Чтобы карточка товара корректно перестроилась в адаптивной версии, все ее элементы должны быть расположены в одном контейнере.
То есть изображение товара, его название, описание и кнопка с призывом к действию должны быть расположены в одной структуре друг под другом. При таком расположении мы получаем вот такой результат:
Предпросмотр доступен по клику на кнопку “Просмотр сообщения” в верхнем меню:
1.1. Обратный порядок блоков
Если карточка составлена в обратном порядке (сначала текст, потом картинка), на мобильном это может выглядеть некрасиво. Чтобы блоки отобразились в другой последовательности, включите инверсию контейнеров (работает для двух контейнеров). Это означает, что элементы на мобильном устройстве будут отображаться в обратном порядке: картинка → текст.
1.2. Отключение адаптивности
Если перестраивание элементов может навредить дизайну письма, адаптивную структуру можно отключить.
По умолчанию этот переключатель включен и означает, что контейнеры будут расположены один под другим на мобильных устройствах. Если передвинуть бегунок влево, структура не будет перестраиваться.
При отключении адаптивности письмо может некорректно отображаться на мобильном устройстве. Поэтому емейл обязательно нужно тестировать.
2. Адаптивность картинок
Настройка адаптивности изображений находится в разделе “Контент” и доступна при нажатии на контейнер с изображением:
Включение этой опции указывает изображению подстроиться под размер экрана мобильного устройства. Для оптимального отображения картинки без потери качества загружайте ее в большем размере, чем размер ячейки:
3. Центрирование текста
На вкладке “Контент” вы можете задать выравнивание текста на мобильной версии:
4. Скрытие/отображение блоков для разных устройств
В адаптивном редакторе eSputnik можно задавать настройки отображения различных блоков на экране мобильных устройств.
Скрыть можно любую структуру в письме как для мобильной, так и для десктопной версии. Отключенный элемент в редакторе письма будет иметь пометку.
5. Блок “Меню”
В “Меню” также можно сократить отображение пунктов для мобильной версии. Для этого нужно перейти в настройки блока меню и отключить лишние категории.
В блоке “Меню” мы рекомендуем использовать не более 4 пунктов для корректного отображения на мобильном. Если блок выглядит неопрятно, можно уменьшить шрифт.