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

3 880

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

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

У превью текста больше возможностей. Например, у родного почтового клиента на айфоне в теме умещается 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/> 

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

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

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

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

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

3 881