Как редактировать прехедер в JustClick?

Содержание

1 Зачем нужен прехедер?
2 Кто показывает прехедер?
3 Как почтовые сервисы выбирают прехедер?
4 Как сделать прехедер невидимым внутри письма?
5 Как правильно вставить прехедер?

Зачем нужен прехедер?

Прехедер (предварительный текст, превью письма) — первая строка текста письма, которая «подтягивается» сразу после темы и позволяет подписчику понять, о чем пойдет речь в сообщении. Правильно подобранный текст прехедера повышает эффективность рассылки.

Прехедер — своебразное превью письма. Его можно понимать как вторую тему или пояснение к ней. Предварительный текст может привлечь внимание получателя сообщения и заставить открыть его. Грамотно составленное превью письма влияет на поведение пользователя. Оно может заинтересовать человека упоминанием какого-то интересного объекта, который тот затем будет искать в тексте сообщения. В книге «The Rebel’s Guide to Email Marketing: Grow Your List, Break the Rules, and Win» авторов DJ Waldow, Jason Falls, описывается случай, когда грамотное использование прехедера позволило увеличить открываемость писем с 35% до 51%.

Кто показывает прехедер?

Как и все, что связано с email-рассылкой, поддержка прехедеров очень отличается. В общем можно сказать, что предварительные тексты поддерживаются всеми популярными почтовыми веб-сервисами, такими как Mail.ru, Yandex, Gmail и др., всеми мобильными приложениями, родными для iOS, Android и WindowsPhone, а также сравнительно новыми версиями десктопных почтовых клиентов.

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

* означает, что количество символов зависит от текущей ширины экрана устройства

Как почтовые сервисы выбирают прехедер?

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

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

Как сделать прехедер невидимым внутри письма?

В этой ситуации самый логичный выход — вставить прехедер, текст которого внутри письма не будет виден (и не будет ломать ваш дизайн). Как это сделать? Вставьте в код Вашего письма такую конструкцию:

<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Здесь текст прехедера.</div>

1	<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Здесь текст прехедера.</div>

Давайте разберем, что здесь написано:

display:none; //не выводить этот блок на экран
font-size:1px; //размер шрифта — 1 пиксель
color:#333333; //цвет шрифта — серый (можно заменить на цвет шапки письма)
line-height:1px; //интервал между строками — 1 пиксель
max-height:0px; //максимальная высота блока с прехедером — 0 пикселей
max-width:0px; //максимальная длина блока с прехедером — 0 пикселей
opacity:0; //блок полностью прозрачный
overflow:hidden; //скрывать содержимое, которое выходит за размеры блока

Может возникнуть закономерный вопрос: «Для чего нужны все эти свойства, если уже самое первое делает прехедер «невидимым»?». Ответ прост: «Как и все, что связано с email-рассылкой, данные свойства поддерживаются почтовыми сервисами и клиентами по-разному. Если одно из них не сработает, то остальные все равно выполнят задачу.»

Как правильно вставить прехедер?

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

перейти в режим «Источник» при создании письма;
вставить «невидимый прехедер» перед тегом </head>

Хотим заметить, что когда вы вставляете прехедер таким образом, то происходит маленький трюк: согласно стандартов W3C перед </head> не может находиться подобный блок. Однако наш редактор знает об этом и перемещает его в допустимое место, которое будет в самом начале письма.

В результате придет такое письмо: