Создание email

Создание первой емейл-рассылки будет состоять из последовательных этапов.

Шаг 1. Переход к созданию Email-сообщения

В системе eSputnik вы можете без труда перейти к созданию Email-сообщения одним из следующих способов:

1. Выбрать пункт “Сообщения” в строке меню и в открывшемся списке кликнуть на подпункт “Сообщения”.

2. Выбрать Email в основной области главной страницы в блоке “Сообщения”.

3. Нажать на кнопку “+”. Выбрать Email в выпадающем меню для быстрого перехода к созданию письма.

Если вы перешли к созданию Email-сообщения одним из первых двух способов, в следующем окне вам необходимо нажать на кнопку “Создать Email”. Здесь вы также можете выбрать из выпадающего списка меню или на боковой панели справа другой тип сообщения: SMS, Web Push, Mob Push или Viber.

В случае перехода к созданию Email с помощью панели быстрого доступа на главной странице (способ №3), вам не нужно осуществлять этот шаг.

Шаг 2. Выбор шаблона сообщения

Теперь вы можете выбрать способ создания вашего письма.

По умолчанию вам будет предложено создать собственный дизайн Email с помощью одного из шаблонов Drag-and-drop конструктора, либо HTML-редактора во вкладке “Базовые”. На основе шаблонов вы сможете легко верстать различные промописьма, новостные рассылки, а также целые серии триггерных писем (приветствие, заказ, брошенные просмотры, брошенная корзина) для максимальной автоматизации вашей Email-кампании. 

Вы также можете выбрать один из готовых вариантов дизайна во вкладке “Тематические”. Тут размещено более 300 бесплатных шаблонов с учетом:

• различных типов рассылки (брошенные просмотры, брошенная корзина, акции, приглашение, новая коллекция, опрос, уведомление и др.); 

• сфер деятельности (бизнес, мода, еда, гаджеты, дети, подарки и цветы, E-commerce и др.);

• праздников и событий (черная пятница, Рождество, День cв. Валентина, День матери, Всемирный день шоппинга и др.);

• специальных возможностей (AMP, CSS-анимации, rollover-эффект, аккордеон-меню, видео, карусель, таймер обратного отсчета). 

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

Во вкладке “Шаблоны сообщений” вы можете добавить новый шаблон, нажав одноименную кнопку. 

Далее выберите способ создания Email из базовых, тематических или сохраненных шаблонов.

Таким образом, у вас есть возможность задать единый фирменный стиль для целой серии email-сообщений. 

Заказать бесплатный индивидуальный шаблон сообщений (ссылка).

• Кроме того, вы можете вернуться к редактированию уже сохраненных шаблонов сообщений во вкладке “Сохраненные”, либо в разделе “Шаблоны сообщений”. 

Для этого просто кликните по названию письма для перехода к его редактированию. 

Во вкладке “Шаблоны сообщений” вы также можете нажать на иконку редактирования, либо скопировать имеющийся шаблон для последующего редактирования. Данный способ создания сообщения будет наиболее уместен при запуске повторных Email-рассылок одного типа с сохранением фирменного стиля.

Шаг 3. Заполнение информации для отправки

Задайте основную информацию о вашем Email-сообщении.

Чтобы добавить/изменить название письма, кликните на иконку редактирования рядом с пунктом “Название сообщения” или просто поставьте курсор в это поле для немедленного перехода к редактированию. Чтобы задать остальные параметры отправки, кликните на аналогичную иконку рядом с пунктом “Тема сообщения” или на само поле с темой.

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

1. Название сообщения

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

Рекомендуем выбирать короткие и информативные названия, поскольку по умолчанию они будут передаваться в utm-метке в параметре utm_campaign. В системе eSputnik все метки, включая метку “Название кампании” проставляются автоматически, однако вы, по желанию, можете их легко отредактировать как в настройках самого сообщения, так и в настройках всего аккаунта.

• Чтобы посмотреть или изменить значение данной utm-метки для конкретного письма, нажмите на иконку “...” на панели меню, а далее выберите пункт “Задать настройки ссылок”.

В следующем окне вы увидите текущие настройки ссылок, которые будут использоваться при формировании аналитических отчетов, в частности, те, что заданы для параметра “Название кампании”. При необходимости, вы можете заменить $messageName другой utm-меткой, использование которой считаете более целесообразным. Нажмите на кнопку “Применить”, чтобы сохранить изменения, либо выберите “Восстановить значения по умолчанию” для отмены всех правок по этому параметру.

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

Подробнее о том, как использовать в Email-рассылках utm-метки, читайте здесь.

Пример того, как будут отображаться утм-метки в строке браузера, когда подписчик перейдет из письма на сайт. Обратите внимание, что Название сообщения будет видно вашим получателям в параметре campaign

2. Тема

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

Тестируйте различные темы, выбирайте лучшие из них и повышайте эффективность ваших рассылок. Чтобы добавить еще одну тему для эксперимента, просто кликните на “+ Добавить тему” рядом с полем темы. Всего в одном письме может быть не больше двух тем. Помните, что вашу рассылку нельзя будет запустить, если вы предварительно не указали тему сообщения.

Чтобы оптимизировать текст темы и скрытого предзаголовка, можно воспользоваться опцией “Улучшить с ИИ”. Подробнее >

3. Скрытый предзаголовок (прехедер)

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

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

4. Отправитель

По умолчанию имя отправителя создается на основе данных пользователя аккаунта. Если же вы хотите использовать другое имя отправителя для всех Email-сообщений или отдельных рассылок, нажмите на “+” рядом с пунктом “Отправитель” и заполните необходимые поля в окне заявки.

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

5. Адрес для ответа

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

6. Метки

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

Можно использовать латиницу, кириллицу, цифры и символы. Если метка одна, просто вписываем и сохраняем изменения. Если их несколько, разделяем с помощью клавиши Enter.

7. Уровень беспокойства

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

Задайте уровень беспокойства для конкретного письма с учетом дневного и недельного лимита вашей email-кампании. О том, как использовать данный параметр, читайте тут.

8. Мультиязычность (опционально)

Создайте  мультиязычную версию любого email. Нажмите значок "Глобус" на верхней панели, укажите язык по умолчанию и добавьте языковые версии. Наполните каждую версию контентом на соответствующем языке. Вы можете переключаться между версиями в рамках одного шаблона в один клик.

Подробнее о мультиязычности >

Шаг 4. Создание дизайна письма

Если вы выбрали один из базовых, тематических или сохраненных шаблонов, то далее переходите к самому интересному – созданию или редактированию email-сообщения с помощью адаптивного редактора eSputnik.

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

Основное преимущество визуального редактора – встроенная адаптивность блоков, благодаря чему ваш Email будет корректно отображаться на различных устройствах. Больше о возможностях настройки адаптивности в редакторе eSputnik читайте в специальной инструкции.

Основные инструменты Email-редактора представлены такими вкладками:

1. Оформление

Позволяет задавать общий стиль как всего письма, так и его отдельных элементов (заголовки, хедер, футер, кнопки, информационная область). Кроме того, тут размещены базовые настройки адаптивности. 

Все остальные инструменты, описанные ниже, вы найдете в разделе “Контент”.

2. Структуры

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

Просто перетащите одну из структур в полосу и встройте в нее нужные блоки.

Ниже приведен пример наполнения структуры блоками с текстом, кнопкой и картинкой. При встраивании в одну колонку структуры нескольких блоков по вертикали (например, текста и кнопки) образуется контейнер, для которого вы также можете задавать отдельные настройки оформления и данные.

Для перехода к редактированию контейнера просто кликните по нему мышкой.

3. Блоки

Для верстки шаблона вашего сообщения или наполнения выбранных структур воспользуйтесь базовыми блоками конструктора drag-and-drop:

• Картинка;

• Кнопка;

• Текст;

• Разделитель; 

• Видео; 

• Соцсети;

• Баннер; 

• Меню;

• HTML;

• Карусель;

• Аккордеон. 

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

4. Модули

Этот инструмент значительно упрощает создание письма и представляет собой одну или несколько структур со встроенными контейнерами и блоками. В редакторе eSputnik вы найдете уже готовые модули для наполнения вашего сообщения: 

• Предзаголовки; 

• Хедеры; 

• Баннеры; 

• Информационные модули;

• Карточки товаров; 

• Футеры; 

• AMP-песочница.

Вы также можете сохранить контейнер, структуру или полосу как модуль, нажав на соответствующую кнопку действия. Они отобразятся во вкладке “Мои модули”. Используйте сохраненные модули в верстке последующих Email, просто перетащив их в нужную область тела письма.

Каждый элемент вашего  Email может параллельно редактироваться в визуальном редакторе и в редакторе HTML. Для открытия или выхода из HTML-редактора нажмите на иконку ‹/› на верхней панели инструментов.

Работая в Drag-and-drop редакторе, у вас также есть возможность добавить собственный произвольный HTML и CSS в определенную область письма, перетянув соответствующий блок из панели инструментов. 

По клику на конкретный элемент Email-сообщения, слева автоматически раскрывается панель для его редактирования, а при наведении мышки на него появляется панель с основными действиями: сохранить как модуль, переместить, дублировать и удалить. 

Подробнее о том, как работает адаптивный редактор, вы можете узнать здесь. 

У вас уже есть шаблон письма в Photoshop, который вы хотели бы использовать для рассылок? Читайте в нашей статье о том, как правильно его перенести в eSputnik.

Среди дополнительных возможностей по работе с email-сообщениями в системе eSputnik можно выделить:

• мультиязычность писем;

• использование Smart-элементов;

• настройку динамического контента;

• использование AMP-элементов (аккордеон, карусель);

• персонализацию и др.

• Если в предыдущем шаге вы выбрали создание сообщения с помощью HTML-редактора, вставьте ваш код в окно редактирования HTML-кода. Часто письма могут содержать CSS стили внутри HTML в теге head

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

После этого вы увидите, как именно отображается ваше письмо в окне просмотра сообщения и при необходимости сможете вернуться к редактированию HTML-кода и CSS. Чтобы закрыть или повторно открыть окно HTML-редактора, нажмите на иконку ‹/› в строке меню. 

Обратите внимание, для того, чтобы Email корректно отображался во всех почтовых клиентах, необходимо придерживаться определенных стандартов верстки. О том, как правильно создать сообщение в HTML-редакторе, читайте в нашем блоге. 

Если вы хотите активировать Drag'n'Drop функцию редактора для внесения последующих изменений в письме, убедитесь, что вы адаптировали свой HTML код в соответствии с рекомендациями по адаптации шаблонов.

Больше советов о том, как сверстать красивое Email-сообщение, вы найдете тут.

Шаг 5. Просмотр и тестирование письма

После создания дизайна, вы можете посмотреть, как именно будет отображаться email-сообщение на мобильном устройстве и на ПК. Для этого нажмите на иконку с экранами на панели инструментов.

Убедитесь, что все элементы вашего письма отображаются корректно. Для возвращения в окно редактора нажмите кнопку “Назад”. 

Протестируйте ваше сообщение перед запуском рассылки. Для этого нажмите на соответствующую иконку в строке меню. Укажите email, на который вы хотите отправить тестовое письмо и нажмите кнопку “Отправить”. Проверьте отображение Email-сообщения в вашем почтовике.

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

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

Шаг 6. Сохранение сообщения

После завершения всех правок нажмите на кнопку “Сохранить”. Выберите “Сохранить как шаблон” в случае, если вы хотите использовать созданное сообщение в качестве шаблона для последующих рассылок, либо если до этого вы выбирали создание Email с помощью опции “Добавить новый шаблон”. Если вы редактировали ранее созданный шаблон, достаточно нажать на кнопку “Сохранить”.

После этого Email отобразится в общем списке сообщений или шаблонов сообщений в зависимости от того, каким образом вы сохранили его.

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