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

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

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

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

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

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

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

Интерфейс вставки пользовательского тега, показывающий выбор тега и опции значения по умолчанию

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

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

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

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

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

{
  "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.

Отображение ID контента email, показывающее название контента и уникальный идентификатор

Пример

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

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

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

{% email_content "AAAAA-BBBBB" %}

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

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

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

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

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

<a href=%%PW_EMAIL_UNSUBSCRIBE%%> Отписаться </a>

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

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

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

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

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

<a href=%%PW_EMAIL_UNSUBSCRIBE_ALL%%> Отписаться от всех email </a>

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

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

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

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

<a href=%%PW_EMAIL_PREFERENCE_CENTER_LINK%%> Управлять предпочтениями </a>

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

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

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

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

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

Диалоговое окно сохранения контента email с полями для названия и метки

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

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

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

Отправка тестового email

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

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

Кнопка 'Тестовый email' в интерфейсе редактора писем

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

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

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

Выпадающий список для выбора подтвержденного тестового адреса электронной почты

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

Например:

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

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

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

Диалоговое окно подтверждения отправки тестового email с полями для примеров данных