923 0

8 распространённых ошибок в прехедере и как их избежать

После просмотра имени отправителя взгляд читателя падает на тему письма. В отличие от имени отправителя, темы писем меняются при каждой рассылке. С ними проводят больше А/В тестов, чем с другими элементами электронных писем. Об этом говорит исследование State of Email Design 2016-го года. Мы рассмотрели восемь типичных ошибок в прехедере и обсудили их с нашим технологом Александром Каринцевым.

Превью текст, или прехедер — третий по значимости и расположению элемент письма.

У превью текста больше возможностей. Например, у родного почтового клиента на айфоне в теме умещается 35–40 символов, а в превью — вдвое больше.

Прехедер может привлечь внимание подписчика к письму, но почему-то даже известные бренды и компании не уделяют ему должного внимания. Как следствие — каламбур слов, символов и непонятных знаков. Расскажем о восьми ошибках в прехедере и покажем реальные примеры. В конце дадим четыре совета по оптимизации темы и прехедера.

8 ошибок, которые можно избежать

1. ALT попадает в прехедер

В письме прехедер подтягивается из раздела <body>. В этом же разделе прописывается альтернативный текст для баннера, или ALT. Если не закрыть тег или прописать его с ошибкой, баннерный ALT встанет на место прехедера.

Александр подсказывает

Чтобы ничего не перепутать, в самом начале раздела пропишите стандартный текстовый блок и впишите прехедер на вместо заглушки — *|MC_PREVIEW_TEXT|*.

Если хотите, чтобы читатель первым делом видел логотип и баннер, используйте тег display:none. Тогда прехедер будет невидимым в письме. Код для скрытого прехедера выглядит так:

<div style="-webkit-font-smoothing:subpixel-antialiased;margin:0;color:#fff;display:none !important;font-family:arial;font-size:11px;line-height:0;">*|MC_PREVIEW_TEXT|*</div>

В Мейлчимпе правильно прописанный прехедер выглядит так

2. Код вместо прехедера

Если в коде письма ошибки — например, незакрытый тег — вместо превью текста получатель увидит код.

Александр подсказывает

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

3. Шаблонный текст вместо прехедера

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

4. Использование неподдерживаемых символов

Не все почтовые клиенты видят эмоджи. Самый проблематичный в это плане — Аутлук. Особенно если это эмоджи для iOS, где одних только цветов кожи шесть. В этом случае эмоджи может превратиться в непонятные символы, квадраты или вообще в код:

Александр подсказывает

Проверяйте поддержку символов в Литмусе, а ещё лучше на настоящих устройствах. Если среди ваших подписчиков много пользователей Аутлука, с эмоджи лучше не экспериментировать.

5. Ненастроенная персонализация

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

Александр подсказывает

Если в базе имена прописаны не у всех, это не повод убирать обращение. Укажите в коде усложнённую переменную. Если имени нет, она заменяет пробел на обращение, которое вы укажете. Например, нейтральное «подписчик» или тёплое «друг». Код должен выглядеть так:

*|IF:MERGE|*
content to display
*|ELSE:|*
alternative content to display
*|END:IF|*
Hello *|IF:FNAME|*
*|FNAME|*,
*|ELSE:|*
Friend,
*|END:IF|*

6. Смесь HTML текста и превью текста

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

Александр подсказывает

Если все теги закрыты, а в прехедере по-прежнему HTML текст, проверьте, не попал ли в прехедер лишний тег.

7. Превью текст не дополняет тему письма

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

Александр подсказывает

Если текст, который идёт в письме первым и автоматически становится прехедером, не подходит к теме, пропишите скрытый прехедер с display:none, как в первом пункте.

8. Неоптимизированный прехедер

Менеджеры, которые отвечают за рассылку, не считают нужным тратить время на оптимизацию превью текста — это самая распространённая ошибка.

Как оптимизировать тему и прехедер

Во-первых

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

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

Во-вторых

Используйте прехедер, чтобы раскрыть и объяснить тему письма.

В-третьих

Символы &zwnj;&nbsp; разбивают текст по строкам. Используйте их, чтобы оставить пространство в конце превью текста свободным.

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

<br/>&nbsp;

И в-четвёртых

Используйте программу Subject Line Checker от Литмуса. В ней вы сможете проверить, как отображаются тема и прехедер и посмотреть, как они выглядят в десктопных почтовых клиентах и в приложениях.

Александр подсказывает

Тему и прехедер можно посмотреть и в обычном превью Литмуса.

Будьте внимательны и учитесь на чужих ошибках!

Поделиться
Отправить