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

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

Создание контента для email-сообщения

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

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

Чтобы добавить персонализацию в ваши email-сообщения, используйте пользовательские теги. Для этого:

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

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

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

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

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

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

{
  "default": {
    "button": "Купить сейчас",
    "description": "В течение ограниченного времени вы можете получить скидку 20% на все наши премиальные кофейные смеси",
    "subtitle": "Не пропустите",
    "title": "☕ Уведомление об акции на кофе!"
  },
  "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>☕ Уведомление об акции на кофе</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 на немецком языке; пользователи, выбравшие получение писем на английском, увидят его на английском, а те, кто выбрал испанский, получат его на испанском. Это гарантирует, что все получатели получат ваше сообщение на предпочитаемом ими языке.

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

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

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

Синтаксис

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

{% email_content "AAAAA-BBBBB" %}

Здесь “AAAAA-BBBBB” — это ID контента email-сообщения, который вы хотите вставить. Вы можете найти ID под названием контента в вашем списке контента email-сообщений.

Пример

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

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

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

{% email_content "AAAAA-BBBBB" %}

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

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

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

Добавьте ссылку для отписки в ваше email-сообщение следующим образом:

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

Значение атрибута %%PW_EMAIL_UNSUBSCRIBE%% будет заменено на ссылку для отписки Pushwoosh в момент отправки email-сообщения. Когда получатели переходят по ссылке, они отказываются от ваших писем и учитываются в показателе отписок для этого конкретного email-сообщения в Message History.

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

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

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

Сохранение контента email-сообщения

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

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

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

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

Отправка тестового email-сообщения

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

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

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

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

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

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

Например:

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

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

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