Создание контента для email с помощью HTML-редактора кода

Видео на Youtube: Создание контента для email с нуля с помощью HTML

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

Примечание

Нет навыков программирования? Используйте Drag & drop редактор, чтобы легко создавать контент для email. Навыки программирования не требуются. Узнать больше

Важно

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

Создание контента для email

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

Кроме того, вы можете загрузить HTML-файл, нажав на Upload HTML File (Загрузить HTML-файл) в нижней панели.

Чтобы добавить индивидуальности вашим письмам, используйте кастомные теги. Для этого:

1. Нажмите на иконку Tag (Тег) в нижней части редактора.
2. Выберите нужный Tag, его модификатор и при необходимости укажите значение по умолчанию.
3. Нажмите Insert (Вставить), чтобы включить кастомный тег в контент вашего письма.

Чтобы включить эмодзи в ваше письмо, нажмите на иконку Emoji в нижней части редактора.

Добавление изображений

Чтобы добавить изображение в ваше письмо, включите тег <img> в ваш HTML и установите атрибут src на URL изображения.

Чтобы повторно использовать изображение из вашего хранилища медиафайлов (Media store), скопируйте его URL и вставьте в атрибут src. Инструкции см. в разделе Копирование URL изображения.

<img src="ВАШ-URL-ИЗ-ХРАНИЛИЩА-МЕДИАФАЙЛОВ" alt="Summer sale banner" width="600" style="display:block;max-width:100%;height:auto;" />

Замените ВАШ-URL-ИЗ-ХРАНИЛИЩА-МЕДИАФАЙЛОВ на URL, который вы скопировали из хранилища медиафайлов.

Использование локализации

Локализация позволяет предоставлять персонализированный опыт пользователям на разных языках.

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

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

{
  "default": {
    "button": "Shop now",
    "description": "For a limited time, you can enjoy a 20% discount on all our premium coffee blends",
    "subtitle": "Don't miss it",
    "title": "☕ Coffee Promotion Alert!"
  },
  "de": {
    "button": "Jetzt einkaufen",
    "description": "Für kurze Zeit erhalten Sie einen Rabatt von 20% auf alle unsere Premium-Kaffeemischungen",
    "subtitle": "Verpassen Sie es nicht",
    "title": "☕ Kaffee-Promotion Benachrichtigung!"
  },
  "es": {
    "button": "Comprar ahora",
    "description": "Por tiempo limitado, puedes disfrutar de un descuento del 20% en todas nuestras mezclas de café premium",
    "subtitle": "No te lo pierdas",
    "title": "☕ ¡Alerta de Promoción de Café!"
  }
}

После того как ваши данные для локализации структурированы и добавлены во вкладку Localization (Локализация) редактора, вставьте их в ваш HTML-контент с помощью плейсхолдеров. Плейсхолдеры динамически вставляют локализованный текст в ваш контент в зависимости от языковых предпочтений пользователя. Вот как это реализовать в вашем HTML:

{{title|text|}}
{{subtitle|text|}}
{{description|text|}}
{{button|text|}}

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>☕ Coffee Promotion Alert</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
  }
  .container {
    background-color: #fff;
    padding: 20px;
    margin: 10px auto;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #ff6f61;
    color: white;
    text-decoration: none;
    border-radius: 5px;
  }
  .button:hover {
    background-color: #ff5733;
  }
  .footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8em;
    color: #888;
  }
</style>
</head>
<body>
  <div class="container">
    <h1>{{title|text|}}</h1>
    <p>{{description|text|}}</p>
    <a href="https://www.example.com/promotion" class="button">{{button|text|}}</a>

  </div>
</body>
</html>

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

Вставка и объединение блоков контента email

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

Например, если у вас есть Контент email A (верхний колонтитул) и Контент email B (новостная рассылка), вы можете вставить Контент email A в Контент email B, не копируя контент вручную каждый раз.

Синтаксис

Чтобы вставить один фрагмент контента в другой, используйте следующий синтаксис:

{% email_content "AAAAA-BBBBB" %}

Где «AAAAA-BBBBB» — это ID контента email, который вы хотите вставить. Вы можете найти ID под названием контента в вашем списке контента для email.

Важно

• Вы можете вставлять контент рекурсивно, то есть один блок контента может включать другой, с максимальной глубиной вложенности до 3 уровней. Например:
  • Контент A может вставлять Контент B.
  • Контент B может вставлять Контент C.
  • Однако Контент C не может вставлять другой блок.
• Циклические вставки (например, когда Контент A вставляет Контент B, а Контент B пытается вставить Контент A) не допускаются и приведут к ошибке.

Пример

Допустим, у вас есть два фрагмента контента:

• Контент верхнего колонтитула (ID: «AAAAA-BBBBB») с предопределенным дизайном.
• Контент новостной рассылки, куда вы хотите включить верхний колонтитул.

Чтобы вставить верхний колонтитул в новостную рассылку, вы должны использовать следующее:

{% email_content "AAAAA-BBBBB" %}

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

Добавление ссылки для отписки

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

Ссылка для отписки

Добавьте эту ссылку, чтобы пользователи могли отказаться от получения полученного ими сообщения:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%> Unsubscribe </a>

При отправке письма переменная заменяется на URL отписки Pushwoosh.

• Когда центр управления предпочтениями подписки включен, получатели отписываются только от категории, назначенной этому письму (например, Новостная рассылка). Появляется экран подтверждения, где они могут Подписаться снова на эту категорию или Управлять предпочтениями, чтобы настроить все категории email. Узнать больше

• Когда центр управления предпочтениями подписки не включен, получатели отписываются от всех маркетинговых писем.

Клики учитываются в показателе отписок для этого сообщения в Истории сообщений (Message History).

Отписаться от всех категорий

Добавьте ссылку, которая отписывает пользователя от всех категорий email сразу:

<a href=%%PW_EMAIL_UNSUBSCRIBE_ALL%%> Unsubscribe from all emails </a>

Примечание

Чтобы вы могли доставлять важные письма вашим клиентам, мы не удаляем отписавшихся пользователей из вашей пользовательской базы. Для пользователей, которые полностью отказались от подписки (например, через стандартную ссылку отписки, когда центр предпочтений не включен, или через ссылку «Отписаться от всех»), тег по умолчанию Unsubscribed Emails устанавливается в значение ‘true’.

Рассмотрите возможность создания сегмента пользователей, которые не отписались (значение тега ‘false’), чтобы продолжать отправлять им сообщения. Во избежание жалоб не отправляйте письма пользователям, которые отписались.

Ссылка на центр управления предпочтениями

Добавьте прямую ссылку на центр управления предпочтениями, где пользователи могут управлять категориями писем, которые они получают:

<a href=%%PW_EMAIL_PREFERENCE_CENTER_LINK%%> Manage preferences </a>

Узнайте, как работает центр управления предпочтениями

На скриншоте ниже показан нижний колонтитул, в котором используются все три типа ссылок.

Осторожно

Если вы используете собственную ссылку для отписки вместо переменных Pushwoosh, пользователи, которые откажутся от подписки по вашей ссылке, не будут учтены в показателе отписок в Истории сообщений (Message History). В статистике по этому письму учитываются только пользователи, перешедшие по ссылке Pushwoosh.

Сохранение контента email

После того как вы закончите создание письма, нажмите кнопку Save (Сохранить) в верхней части редактора.

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

Если вы еще не настроили данные отправителя, обязательно сделайте это. Затем нажмите Save (Сохранить).

Теперь, когда контент вашего письма готов, его можно использовать в email-кампаниях. Узнать больше

Отправка тестового письма

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

Примечание

Если процедура KYC (Know Your Customer) не пройдена, вы все равно можете отправлять тестовые письма, верифицировав тестовый адрес электронной почты. Для этого перейдите в раздел Тестовые устройства (Test Devices), добавьте адрес электронной почты, который вы хотите использовать для тестирования, и завершите процесс верификации.

Чтобы отправить тестовое письмо, нажмите Test email (Тестовое письмо) в редакторе email.

В открывшемся окне:

1. В поле Email address (Адрес электронной почты) введите адрес, на который вы хотите получить тестовое письмо.

Если процедура KYC не была пройдена, вам нужно будет выбрать верифицированный адрес электронной почты из списка тестовых адресов вместо того, чтобы вводить email.

2. Если ваше письмо содержит динамический контент (плейсхолдеры для персонализированных данных), добавьте примеры значений для тестирования.

Например:

• Age (integer): Введите число для плейсхолдера возраста (например, 21).
• FirstName (string): Введите пример имени (например, David).

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

3. После того как вы заполните необходимые данные, нажмите Send test email (Отправить тестовое письмо), чтобы отправить тестовое сообщение на указанный адрес.