Маркетологи собирают базу адресов через форму подписки на сайте и в соцсетях, используют собранные базы для ретаргетинга или запускают на них рассылки. Отслеживание электронного сообщения происходит с помощью пикселя и UTM-меток. Пиксель позволяет отследить количество человек, открывших сообщение, а UTM-метки фиксируют переходы по ссылкам.
Верстка электронной почты ведется с использованием тех же технологий, что и для сайтов. Это язык разметки HTML и каскадная таблица стилей CSS. Создать креативное и адаптивное письмо сложнее, чем разработать Landing Page. В почтовых приложениях смартфонов не поддерживается часть стилей и HTML-блоков.
Неправильная верстка приводит к корявому отображению письма в почтовых сервисах: пропадает фон, блок уезжает на другое место, шрифты заменяются на встроенные или программа накладывает собственные стили.
Конструкторы для создания e-mail
Языки HTML и CSS знает только небольшой процент веб-мастеров, поэтому рассмотрим, как создать почту средствами онлайн-инструментов. Разберем базовый функционал сервисов, позволяющих создавать адаптивные письма с помощью визуального редактора, не вникая в веб-дизайн и HTML-верстку.
Stripo
Stripo главная страница до авторизации
Инструмент позволяет создавать HTML-письма на основе готовых шаблонов или с нуля простым перетаскиванием блоков drag-n-drop. Можно выбрать один из 300 бесплатных шаблонов, заменить картинки, описание, поменять блоки размерами или удалить. Готовое письмо можно отправить на почту для тестирования, скачать или экспортировать в почтового клиента.
Чтобы открыть конструктор:
в личном кабинете нажмите на кнопку «Новое письмо»;
выберите понравившийся шаблон или создание с нуля через «Empty template».
Дальше для примера воспользуемся готовым вариантом «Our library». Он бесплатный и доступен в разделе «Подготовленные шаблоны». Открываем образец и оцениваем его внешний вид и окно настроек с блоками слева.
Конструктор Stripo
Редактирование письма в конструкторе Stripo:
при наведении мышки на блок всплывают кнопки, позволяющие переместить, скопировать, удалить блок или сохранить как модуль;
при нажатии на блок открывается меню настроек с левой стороны, где можно поменять картинку, текст, открыть графический редактор, поменять фон и добавить эффекты;
нажатие на кнопку «Блоки» открывает список, позволяющий добавить в письмо видео, баннеры, меню, описание, карусель, кнопки социальных сетей и собственный HTML-код.
С помощью кнопок в верхней части окна можно:
открыть код и посмотреть на работу под капотом;
экспортировать шаблон в свою почту или сохранить в HTML;
переименовать и сохранить экземпляр на сайте;
отправить тестовое письмо с отредактированным шаблоном на почту;
посмотреть, как готовый вариант отображается на десктопах и телефонах.
Рекомендуем всегда сохранять шаблон в свою выборку на сайте и перед выгрузкой в почтового клиента сохранять в HTML. Это страховка, что не придется собирать письмо по новой, если обнаружится ошибка в тексте или появится задача поменять логотип.
MakeMail
MakeMail главная страница
MakeMail — бесплатный инструмент для создания адаптивных электронных писем. Сервис позволяет редактировать готовые или создавать новые шаблоны. Для внесения правок можно перетаскивать мышкой блоки drag-n-drop или воспользоваться HTML-редактором.
Чтобы открыть конструктор:
выберите шаблон.
Выбор шаблона MakeMail
При выборе шаблона обращайте внимание на подсказки, которые отображаются при наведении на него мышкой. Если не разбираетесь в верстке, выбирайте вариант с визуальным редактором drag-n-drop. Когда пользователь работает над письмом сайт запоминает внесенные правки и при повторном посещении конструктора редактирование начинается с того же места.
Makemail конструктор
Редактирование письма в конструкторе MakeMail:
с левой стороны отображаются блоки, которые можно перетаскивать в шаблон. С помощью этих блоков добавляются кнопки, разделители, картинки, таблицы и карты;
с правой стороны отображаются настройки выбранного элемента. Здесь редактируются ссылки, кнопки, размеры и отступы. Также можно поменять картинку и скруглить углы;
после нажатия на элемент отображаются границы блока и кнопка для перетаскивания. Если навести на эту кнопку мышку отобразятся кнопки для сохранения и копирования элемента.
После всех манипуляций можно подняться в верхнюю часть окна и посмотреть внешний вид письма на десктопах, смартфонах, почтовых клиентах, отправить образец на почту или получить HTML-верстку. Также сайт предложит сразу запустить рассылку через партнерское приложение Notisend и автоматически экспортирует верстку.
Chamaileon
Chamaileon главная
Это конструктор адаптивных электронных сообщений с интерфейсом на английском языке. Можно загрузить собственный шаблон или взять готовый на сайте и подогнать под собственные нужды. Chamaileon позволяет создать аккаунт от имени организации и параллельно работать командой как в Google Docs.
Чтобы запустить конструктор, зарегистрируйтесь на сайте и нажмите «New email».
Дальше появится всплывающее окно с вариантами начальных параметров:
design from scratch — для создания письма с нуля;
use a pre-designed template открывает окно с готовыми шаблонами;
select from the workspace templates — для повторного использования предыдущих писем;
import an existing email HTML — для редактирования готового кода.
Посмотрим, как отредактировать один из предлагаемых порталом шаблонов. Нажимаем на «use a pre-designed template», ждем пока содержимое окна обновится. На Chamaileon большой выбор готовых шаблонов. Нас интересует только бесплатные. Выбираем тег «Free» и добавляем через поисковую строку произвольную тематику.
Chamaileon выбор шаблона
Наводим на шаблон, нажимаем на «Start editing». Дальше запускается окно для редактирования, где можно изменить внешние и внутренние отступы, перетаскивать и менять размерами блоки, настраивать расположение, добавлять кнопки социальных сетей. Набор функций конструктора позволяет производить все те же действия, что и для обычной страницы сайта.
Chamaileon конструктор
Редактирование письма в конструкторе Chamaileon:
слева отображаются перетаскиваемые блоки с картинками, кнопками социальных сетей, разделителями и видео;
справа настраиваются размеры, отступы, выравнивание, фон в шрифты для выбранного блока. Параметры зависят от редактируемого типа контента;
после клика на блок с картинкой сверху отображаются кнопки, позволяющие сменить картинку, открыть графический редактор, добавить ссылку и указать альтернативный текст, который будет отображаться до полной загрузки графического элемента.
Готовое сообщение можно сохранить на сайте, экспортировать в сервисы для рассылки или CRM-платформы (необходимо предварительно авторизоваться), посмотреть на десктопе или смартфоне. Перед экспортом можно добавить UTM-метки, выбрать язык и отметить сообщение рекламой, чтобы Google Gmail кидал их в папку «Акции». Экспортированные в сервисы рассылок шаблоны синхронизируются, изменения в Chamaileon автоматически передаются в выбранный инструмент.
Экспорт в HTML
Экспорт в почтовые службы и CRM
Платформы с функцией отслеживания электронных сообщений
Большинство CRM-платформ и сервисов рассылок электронных сообщений поддерживает слежку за письмами и формируют отчеты по количеству открытий, переходов, отказов, отметок спам. Пиксель — невидимое изображение размером 1х1 px для сбора статистики. Когда получатель открывает сообщение, картинки запрашиваются с сервера, запрос фиксируется, и сервер записывает открытие.
Unisender
Unisender главная
Unisender — сервис для почтовых рассылок с функционалом для отслеживания сообщений. Он позволяет создать сообщение через собственный конструктор или добавить готовую верстку.
Чтобы импортировать HTML-сообщение для рассылки и включить отслеживание:
зарегистрируйтесь на сайте;
нажмите «Создать рассылку» → «Письмо с нуля» → «Ваш код»;
откройте скачанный из конструктора HTML-файл через блокнот;
скопируйте содержимое HTML-письма в поле;
заполните тему, адрес и нажмите далее;
откройте дополнительные настройки;
установите галочки «Открытие письма» и «Переходы по ссылкам».
Настройка сбора статистики Unisender
Дальше можно отправить тестовое сообщение или запустить рассылку. Статистика по отправке, доставке, открытиях и переходах отобразится в разделе «История».
Mailchimp
Mailchimp главная
Mailchimp — сервис рассылки электронных сообщений с функцией отслеживания. Через него можно бесплатно отправлять рассылки на 2 тыс. подписчиков с ограничением в 12 тыс. сообщений в месяц. Mailchimp интегрируется со сторонними сервисами, включая конструктор Chamaileon и CMS Wordpress.
Для запуска рассылки можно использовать шаблон, импортированный из Chamaileon, создать новый через встроенный конструктор или скопировать HTML-письмо из файла. Импортированные шаблоны и отчеты по кампаниям доступны в разделе Campaigns. Mailchimp без дополнительных настроек собирает статистику и формирует отчеты в разделе «Reports».
Mailchimp готовые кампании
В отчетах собирается следующая информация:
количество получателей, открытий, кликов по ссылкам;
число отписок через ссылку в сообщении;
дата отправки сообщений;
соотношение открытий и переходов;
количество пересылок друзьям;
статистика жалоб и отметок спам;
самые кликабельные ссылки.
NetHunt
NetHunt главная
NetHunt CRM — комплексный маркетинговый инструмент. После регистрации и установки расширения, он добавляет функционал в Gmail и Google Workspace. NetHunt фиксирует открытие, переходы, доставку, отписки, факт ответа и отметки спам. Также инструмент позволяет выстраивать и управлять воронками продаж, запускать рассылки, собирать переписки с мессенджеров и социальных сетей в одном окне.
NetHunt создание новой рассылки
Чтобы запустить рассылку:
пройдите регистрацию через аккаунт Google;
нажмите «E-mail рассылки» → «+Новый»;
заполните название рассылки;
нажмите «Создать рассылку» → «Продолжить».
NetHunt переключить на HTML
В открывшимся окне переключите ползунок на HTML и вставьте полученный из конструктора код. В правом боковом меню выберите получателей. Код заменится на содержимое письма и отобразятся настройки трекинга. Нажмите продолжить, система запросит разрешение и запустит рассылку. В конце отобразится статистика по кампании, смотрите картинку ниже.
NetHunt статистика
Если установить расширение от NetHunt, то информация дополнительно начнет отображаться для каждого сообщения в Gmail.
Теперь вы знаете, как создавать отслеживаемые электронные сообщения без знаний HTML, CSS и веб-дизайна. Рекомендуем каждое сообщение, полученное из конструктора сначала выгружать в HTML. В дальнейшем этот файл можно будет загружать в сервисы и править самостоятельно.
