Шаблон сообщения для email-рассылки

Из прошлой статьи вы узнали, что один и тот же шаблон можно использовать для отправки email-письма, SMS-сообщения и push-уведомления. Для этого добавьте необходимые каналы связи и настройте шаблон для каждого из них:

В этой статье мы научимся настраивать шаблон для email-рассылки.

Шаг 1. Выберите способ создания шаблона

Существует три способа создания шаблона:

1. Импорт из файла — можно использовать, если у вас есть готовый HTML-файл или ZIP-архив с готовым кодом и изображениями.

2. Вставить код — позволяет работать, если у вас есть готовый HTML-код.

3. Редактор — подойдёт тем, кто хочет создать шаблон с нуля во встроенном редакторе платформы.

Шаг 2. Выберите, в каком редакторе будете работать

Если вы решили создать шаблон письма в редакторе, вы можете сделать это тремя способами:

1. HTML-редактор

2. Визуальный редактор

3. Блочный редактор

1. Редактор кода

Здесь вам потребуются специальные знания или дополнительный специалист, который владеет HTML-версткой писем. Преимущество такого способа — возможность создавать сложные макеты и адаптировать шаблон под любой размер экрана.

Нажмите клавишу «Редактор кода»:

Вставьте код в окно «Код шаблона»:

В редакторе удобно работать. Кнопки в верхней панели позволяют легко форматировать текст и в несколько кликов добавлять нужные объекты.

Нажмите на иконку </>, чтобы открыть меню переменных и функций редактора. Используйте переменные, чтобы персонализировать письмо. Добавляйте в сообщение данные профилей клиентов (имя, город, возраст и др.), отправляйте подписчикам персональные промокоды. Используйте циклы и логические выражения, а также динамический контент и системные ссылки.

2. Визуальный редактор

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

В открывшемся окне нажмите «Визуальный редактор» в верхнем правом углу:

С визуальным редактором проще работать, поскольку он практически не требует знаний HTML и позволяет удобно редактировать готовый шаблон.:

Подробнее о том, как работать в визуальном редакторе, читайте в документации.

3. Блочный редактор

Если вы хотите использовать блочный редактор, то вам необходимо выбрать его сразу после перехода в стартовое окно настройка email-шаблона:

Блочный редактор удобен тем, что не требует знания HTML, позволяет с лёгкостью создавать готовые шаблоны с нуля. Просто выберите необходимый объект в меню слева и перетяните его в тело шаблона, а затем отредактируйте на свой вкус.

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

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

Найти его можно в разделе «Настройки” в правом верхнем углу:

Подробное руководство по работе с блочным редактором читайте в документации.

Шаг 3. Добавьте тему письма

Введите тему сообщения — заголовок письма.

Именно на тему получатель обращает внимание в первую очередь, когда заходит в папку «Входящие». Если тема не заинтересует подписчика, он не откроет письмо.

Вот несколько советов, как повысить open rate с помощью темы:

• Персонализируйте письмо. Самое простое — обратитесь к подписчику по имени.

• Добавляйте эмодзи. Так вы выделите свое письмо среди остальных.

• Избегайте Capslock и огромное количество вопросительных и восклицательных знаков. За такое почтовые провайдеры отправляют письма в Спам.

• Не делайте тему слишком длинной. Например, на мобильных устройствах пользователи видят лишь первые 40 символов заголовка.

Шаг 4. Настройте имя и Email отправителя

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

Если помните, те же данные вы указывали при создание ресурса и базы профилей. Какого же отправителя увидит ваш подписчик? Логика такая. Данные в ресурсе перезаписывают данные в базе. А данные в шаблоне перезаписывают данные в ресурсе.

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

Подробнее о том, как настраивать имя и email отправителя, читайте в документации.

Шаг 5. Добавление текстовой версии письма

Можно добавить текстовую версию письма, поставив галочку в графе «Добавить текстовую версию письма»:

Зачем нужна текстовая версия письма?

• Некоторые подписчики могут использовать почтовые клиенты, не поддерживающие HTML.

• Без текстовой версии ваше письмо может попасть в папку «Спам».

Текстовая версия письма не обязательно должна совпадать с HTML версией. Но если вы не хотите ничего менять, то запустите автоматическую генерацию текста на основе HTML версии. Для этого нажмите на иконку:

В текстовую версию вы также можете добавлять списки, UTM метки, ссылки и переменные.

Данный шаг не является обязательным.

Шаг 6. Добавление AMP-версии

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

AMP позволяет добавлять интерактивные элементы в письма, такие как:

• карусели изображений,

• встроенные формы для подписки, регистрации или оплаты,

• интерактивные кнопки с обновляющимся контентом,

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

AMP можно добавить в HTML версию письма. Для этого поставьте галочку «Добавить AMP» и перейдите на вкладку AMP HTML:

В AMP-версии письма используется стандартный HTML-код, но с добавлением элементов <amp-*>. Например:

• <amp-carousel*> — для карусели изображений

• <amp-form*> — для форм

• <amp-img*> — для изображений с возможностью загрузки

Подробнее об этом вы можете прочитать в документации.

AMP также можно добавить в блочном редакторе. Для этого выберите «AMP» в окне блочного редактора и перетащите необходимый элемент в тело шаблона:

Подробнее о работе с AMP и блочным редактором читайте в документации.

Шаг 7. Прикрепите файл

Возможно, вы хотите отправить клиенту подарочный купон или white paper в pdf формате. Прикрепить файл к сообщению можно двумя способами:

1. Загрузить файл в платформу с компьютера.

2. Добавить файл по локальному пути. Для этого выберите директорию хранения файла на сервере, на котором установлена платформа. Указывая путь, вы можете использовать переменные профиля клиента.

Шаг 8. Проверьте сообщение перед использованием в рассылке

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

Нажмите на кнопку в верхней части страницы, чтобы активировать предпросмотр:

В окне предпросмотра вы можете выбрать необходимый канал, контент для которого хотите просмотреть. Для Email канала доступен предпросмотр как HTML, так и текстовой версии.

В нижней части окна находятся кнопки переключения десктопного и мобильного режимов отображения.

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

Если письмо выглядит так, как вы и задумывали, то закройте окно. Не забудьте сохранить сделанные изменения, нажав на кнопку «Применить» в верхней части страницы:

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