Блог

Лайфхак с прехедером для использования в шаблонах электронных писем

12 августа 2024

Лайфхак с прехедером писем (англ. — email preheader) или предварительным просмотром текста, который вы можете использовать в каждом электронном письме.

Знаете ли вы, что существует хак для текста предварительного просмотра или прехедера, с помощью которого можно максимально эффективно использовать это ценное пространство электронной почты?

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

Это означает, что у вас остается два варианта:

  1. сделать длинный текст, что может привести к досадным обрезам почтовыми клиентами,
  2. сделать короткий текст, чтобы URL и другой «неоптимизированный» контент из ваших писем заполнил все пространство.

Предлагаем вам малоизвестный третий вариант…

Хак для прехедера

Знаете ли вы, что после нужного объема текста предварительного просмотра можно создать белое пространство, чтобы почтовые клиенты не добавляли в содержимое прехедера другой отвлекающий текст или символы?

В большинстве случаев все, что нужно сделать, — это добавить цепочку несоединяемых символов нулевой ширины (͏ и ‌) и неразрывных пробелов ( ) после текста предварительного просмотра, который вы хотите отобразить. Повторение ͏‌  заполняет все оставшееся пространство текста предварительного просмотра.

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

Однако здесь есть свои нюансы. В некоторых случаях этот хак для предварительного просмотра может не сработать. Клиенты электронной почты постоянно меняются (в среднем каждые 1.2 дня), и он может работать не везде.

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

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

Вот несколько способов сделать это:

1. Марк Роббинс в своей библиотеке Good Email Code предлагает вариант, в котором он чередует HTML-сущность ͏ и пробел в качестве превью-хака:

͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

2. Мы также видели, как это делается путем добавления пробелов к оригинальному хаку:

͏ ‌   ͏ ‌   ͏ ‌  

3. Чтобы получить наибольший охват, Марк Роббинс советует добавлять   и ­, поскольку эти HTML-сущности добавляют пробелы, которые все еще поддерживаются в Yahoo и iOS 16.4.

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

Вы можете увидеть, куда вставлять код, в этом примере:

<div style="display: none; max-height: 0px; overflow: hidden;">
Insert hidden preheader text here.
</div>
   
<!-- Insert &#847;&zwnj;&nbsp; hack after hidden preview text -->
<div style="display: none; max-height: 0px; overflow: hidden;">
&#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy; &#847; &zwnj; &nbsp; &#8199; &shy;
</div>

Предыстория хака для прехедера

Раньше текст прехедера состоял только из строки &zwnj;&nbsp;, но почтовое сообщество (и наше недавнее тестирование) обнаружило, что этот текст предварительного просмотра не работает с Yahoo Mail. Наш специалист по маркетингу электронной почты, Кэрин Слейтер, рекомендует использовать все 5 HTML-сущностей, чтобы «охватить все базы и предложить своим подписчикам наилучший опыт, если он поддерживается».

Важно! Поскольку почтовые клиенты довольно часто выпускают обновления, которые могут нарушить работу ваших писем, важно всегда проверять текст предварительного просмотра (и остальные письма)!

Мы также хотели бы поблагодарить члена сообщества Litmus Райана Филда, который упомянул эту технику в 2016 году и назвал ее «суперстарым» хаком для текста прехедера. Возможно, это и так, но вряд ли кто-то его использовал.

Почти 35% респондентов нашего опроса в LinkedIn до сих пор не знают об этом методе.

Будем надеяться, что использование хака для текста предварительного просмотра будет только расти.

Как бренды используют этот хак

Ищете вдохновение, как использовать этот трюк?

Мы используем этот прием в наших электронных письмах Litmus, начиная с ежемесячной рассылки и Litmus Weekly, заканчивая анонсами продуктов и приглашениями на мероприятия. Вот как некоторые из них выглядят в Gmail:

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

Влияет ли хак на доставляемость писем?

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

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

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

Оригинал статьи
Опубликовано 12 августа 2024 в 17:56
Обновлено 12 августа 2024 в 17:56
Категория: Блог
Теги:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Реклама

Связь со мной

uzabila@yandex.ru