Как создать адаптивное электронное письмо и включить отслеживание

trafficcardinal1 написал 04.10.2021
12 мин
2
711
Содержание

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

Верстка электронной почты ведется с использованием тех же технологий, что и для сайтов. Это язык разметки HTML и каскадная таблица стилей CSS. Создать креативное и адаптивное письмо сложнее, чем разработать Landing Page. В почтовых приложениях смартфонов не поддерживается часть стилей и HTML-блоков.

Неправильная верстка приводит к корявому отображению письма в почтовых сервисах: пропадает фон, блок уезжает на другое место, шрифты заменяются на встроенные или программа накладывает собственные стили.

Конструкторы для создания e-mail

Языки HTML и CSS знает только небольшой процент веб-мастеров, поэтому рассмотрим, как создать почту средствами онлайн-инструментов. Разберем базовый функционал сервисов, позволяющих создавать адаптивные письма с помощью визуального редактора, не вникая в веб-дизайн и HTML-верстку.

Stripo

Stripo главная страница до авторизации

Инструмент позволяет создавать HTML-письма на основе готовых шаблонов или с нуля простым перетаскиванием блоков drag-n-drop. Можно выбрать один из 300 бесплатных шаблонов, заменить картинки, описание, поменять блоки размерами или удалить. Готовое письмо можно отправить на почту для тестирования, скачать или экспортировать в почтового клиента.

Чтобы открыть конструктор:

  1. зарегистрируйтесь на сайте;

  2. в личном кабинете нажмите на кнопку «Новое письмо»;

  3. выберите понравившийся шаблон или создание с нуля через «Empty template».

Дальше для примера воспользуемся готовым вариантом «Our library». Он бесплатный и доступен в разделе «Подготовленные шаблоны». Открываем образец и оцениваем его внешний вид и окно настроек с блоками слева.

Конструктор Stripo

Редактирование письма в конструкторе Stripo:

  1. при наведении мышки на блок всплывают кнопки, позволяющие переместить, скопировать, удалить блок или сохранить как модуль;

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

  3. нажатие на кнопку «Блоки» открывает список, позволяющий добавить в письмо видео, баннеры, меню, описание, карусель, кнопки социальных сетей и собственный HTML-код.

С помощью кнопок в верхней части окна можно:

  • открыть код и посмотреть на работу под капотом;

  • экспортировать шаблон в свою почту или сохранить в HTML;

  • переименовать и сохранить экземпляр на сайте;

  • отправить тестовое письмо с отредактированным шаблоном на почту;

  • посмотреть, как готовый вариант отображается на десктопах и телефонах.

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

MakeMail

MakeMail главная страница

MakeMail — бесплатный инструмент для создания адаптивных электронных писем. Сервис позволяет редактировать готовые или создавать новые шаблоны. Для внесения правок можно перетаскивать мышкой блоки drag-n-drop или воспользоваться HTML-редактором.

Чтобы открыть конструктор:

  1. зарегистрируйтесь на сайте;

  2. выберите шаблон.

Выбор шаблона MakeMail

При выборе шаблона обращайте внимание на подсказки, которые отображаются при наведении на него мышкой. Если не разбираетесь в верстке, выбирайте вариант с визуальным редактором drag-n-drop. Когда пользователь работает над письмом сайт запоминает внесенные правки и при повторном посещении конструктора редактирование начинается с того же места.

Makemail конструктор

Редактирование письма в конструкторе MakeMail:

  1. с левой стороны отображаются блоки, которые можно перетаскивать в шаблон. С помощью этих блоков добавляются кнопки, разделители, картинки, таблицы и карты;

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

  3. после нажатия на элемент отображаются границы блока и кнопка для перетаскивания. Если навести на эту кнопку мышку отобразятся кнопки для сохранения и копирования элемента.

После всех манипуляций можно подняться в верхнюю часть окна и посмотреть внешний вид письма на десктопах, смартфонах, почтовых клиентах, отправить образец на почту или получить 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:

  1. слева отображаются перетаскиваемые блоки с картинками, кнопками социальных сетей, разделителями и видео;

  2. справа настраиваются размеры, отступы, выравнивание, фон в шрифты для выбранного блока. Параметры зависят от редактируемого типа контента;

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

Готовое сообщение можно сохранить на сайте, экспортировать в сервисы для рассылки или CRM-платформы (необходимо предварительно авторизоваться), посмотреть на десктопе или смартфоне. Перед экспортом можно добавить UTM-метки, выбрать язык и отметить сообщение рекламой, чтобы Google Gmail кидал их в папку «Акции». Экспортированные в сервисы рассылок шаблоны синхронизируются, изменения в Chamaileon автоматически передаются в выбранный инструмент.

Экспорт в HTML


Экспорт в почтовые службы и CRM

Платформы с функцией отслеживания электронных сообщений

Большинство CRM-платформ и сервисов рассылок электронных сообщений поддерживает слежку за письмами и формируют отчеты по количеству открытий, переходов, отказов, отметок спам. Пиксель — невидимое изображение размером 1х1 px для сбора статистики. Когда получатель открывает сообщение, картинки запрашиваются с сервера, запрос фиксируется, и сервер записывает открытие.

Unisender

Unisender главная

Unisender — сервис для почтовых рассылок с функционалом для отслеживания сообщений. Он позволяет создать сообщение через собственный конструктор или добавить готовую верстку.

Чтобы импортировать HTML-сообщение для рассылки и включить отслеживание:

  1. зарегистрируйтесь на сайте;

  2. нажмите «Создать рассылку» → «Письмо с нуля» → «Ваш код»;

  3. откройте скачанный из конструктора HTML-файл через блокнот;

  4. скопируйте содержимое HTML-письма в поле;

  5. заполните тему, адрес и нажмите далее;

  6. откройте дополнительные настройки;

  7. установите галочки «Открытие письма» и «Переходы по ссылкам».

Настройка сбора статистики 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 создание новой рассылки

Чтобы запустить рассылку:

  1. пройдите регистрацию через аккаунт Google;

  2. нажмите «E-mail рассылки» → «+Новый»;

  3. заполните название рассылки;

  4. нажмите «Создать рассылку» → «Продолжить».

NetHunt переключить на HTML

В открывшимся окне переключите ползунок на HTML и вставьте полученный из конструктора код. В правом боковом меню выберите получателей. Код заменится на содержимое письма и отобразятся настройки трекинга. Нажмите продолжить, система запросит разрешение и запустит рассылку. В конце отобразится статистика по кампании, смотрите картинку ниже.

NetHunt статистика

Если установить расширение от NetHunt, то информация дополнительно начнет отображаться для каждого сообщения в Gmail.

Теперь вы знаете, как создавать отслеживаемые электронные сообщения без знаний HTML, CSS и веб-дизайна. Рекомендуем каждое сообщение, полученное из конструктора сначала выгружать в HTML. В дальнейшем этот файл можно будет загружать в сервисы и править самостоятельно.

telegram-icon-small
telegram-icon-big

TrafficCardinal в телеграме

Только полезный контент и бесплатные плюшки.

2-3 раза в день